论文部分内容阅读
[摘要]Ajax是Web2.0的核心之一，它采用异步模式，可以开发出基于浏览器的具有高用户交互性的web应用，改变了传统Web应用的交互模式，从而可以构建出更为动态、响应更灵敏和用户体验更好的Web应用程序。
[关键词]Ajax JavaScript DHtml Web2.0
中图分类号：TP3 文献标识码：A 文章编号：1671－7597(2008)0710057－01
一、Ajax技术简介
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript
和XML），是指一种创建交互式网页应用的网页开发技术。Ajax运用的了如下的一些基本技术：
HTML：用于建立Web表单并构建Web应用界面；JavaScript：Ajax 技术的核心，帮助改进与服务器应用程序的通信；DHTML（Dynamic HTML）：用于动态更新表单。通常使用div、span和其他动态HTML元素来标记HTML；文档对象模型DOM：用于（通过JavaScript代码）处理 HTML 结构。
二、Ajax原理
在传统的Web 应用程序中，交互的一般流程是：用户填写表单字段并单击提交按钮，整个表单发送到服务器，通过服务器端不同的技术（如PHP、JSP等）进行处理，然后再将处理结果以全新的页面发送回客户端。在用户提交后等待处理时，屏幕变成一片空白，用户得不到立即反馈。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。也就是说当用户提交表单时，数据发送给一些JavaScript
代码而不是直接发送给服务器。而JavaScript代码捕获表单数据并向服务器发送请求，即JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出，并且请求是异步发送的，就是说JavaScript代码（和用户）不用等待服务器的响应。在JavaScript代码和服务器进行交互时，用户仍然可以继续输入数据、滚动屏幕和使用应用程序。在服务器处理完毕后将数据返回JavaScript代码（仍然在Web表单中），然后使用DOM技术迅速更新表单数据，让用户感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预，甚至完全不知道幕后发生的一切，从而极大的提升了用户体验。
三、Ajax应用
现以修改用户的登录名的例子来讲述AJAX在实际中的应用，该实例可以推广到网页中任何文本内容的动态修改。
（一）创建XMLHttpRequest对象，为了使代码同时支持Internet Explorer和非Microsoft浏览器，使用如下代码
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e2) {
xmlHttp = false;
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
在创建XMLHttpRequest对象之后，就可以结合JavaScript代码完成以下工作：从 Web 表单中获取数据-＞打开到服务器的连接-＞设置服务器处理完成后的响应函数，这也是Ajax工作的一般流程。
（二）定义获取表单数据及更改表单的JavaScript代码
function changeToInput(id) {
var oNP = document.getElementById(id);//从表单中获取数据
var value = oNP.value;
oNP.outerHTML = "＜input type='text' id='" + id + "' value='" + value + "' size='5' onblur='change(this.id)'＞";//在表单中动态改变文本为输入框
document.getElementById(id).focus();
}
（三）打开到服务器的连接，将修改提交服务器
服务器处理修改的功能由changename.jsp实现，在此不做详细介绍。
function change(id) {
var oNP = document.getElementById(id);
var value = oNP.value;
gID = id;
init();
var url="changename.jsp?id="+escape(id)+"&normalprice="+value;
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
（四）定义服务器处理完成之后的响应函数
function callback() {
if(4 == req.readyState) {//就绪状态
if(200 == req.status) {//无错误正常完成状态
var oNP = document.getElementById(gID);
var value = oNP.value;
oNP.outerHTML = "＜span id='" + gID + "' value='" + value + "' onclick = 'changeToInput(this.id)'＞"+ value + "＜/span＞";
}
}
当服务器正常完成处理后，将处理结果同步更新到web页面，而利用JavaScript在幕后与服务器交互及处理交互后的结果这些复杂的过程全部隐藏起来，至此，利用完成了全部工作。
四、结束语
通过上述的具体示例，可以看到Ajax技术主要依赖于XMLHttpRequest
对象及JavaScript技术，其背后隐藏的细节比较复杂，比传统的Web开发更难更繁琐，但它却能给用户带来全新的体验。Ajax不仅仅是一种时尚，更是一种构建网站的强大方法，亦是Web2.0的核心之一，因此掌握并熟练运用Ajax技术是一种必须和必然。
参考文献：
[1][美]麦克劳夫林．Head Rush Ajax-深入浅出Ajax 东南大学出版社，2006.5.
[2]李刚.基于J2EE的Ajax宝典.电子工业出版社.2007.5.
作者简介：
李森，男，河南南阳河南工业职业技术学院网络管理中心，在职研究生，主要从事Java和计算机网络方面研究。
[关键词]Ajax JavaScript DHtml Web2.0
中图分类号：TP3 文献标识码：A 文章编号：1671－7597(2008)0710057－01
一、Ajax技术简介
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript
和XML），是指一种创建交互式网页应用的网页开发技术。Ajax运用的了如下的一些基本技术：
HTML：用于建立Web表单并构建Web应用界面；JavaScript：Ajax 技术的核心，帮助改进与服务器应用程序的通信；DHTML（Dynamic HTML）：用于动态更新表单。通常使用div、span和其他动态HTML元素来标记HTML；文档对象模型DOM：用于（通过JavaScript代码）处理 HTML 结构。
二、Ajax原理
在传统的Web 应用程序中，交互的一般流程是：用户填写表单字段并单击提交按钮，整个表单发送到服务器，通过服务器端不同的技术（如PHP、JSP等）进行处理，然后再将处理结果以全新的页面发送回客户端。在用户提交后等待处理时，屏幕变成一片空白，用户得不到立即反馈。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。也就是说当用户提交表单时，数据发送给一些JavaScript
代码而不是直接发送给服务器。而JavaScript代码捕获表单数据并向服务器发送请求，即JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出，并且请求是异步发送的，就是说JavaScript代码（和用户）不用等待服务器的响应。在JavaScript代码和服务器进行交互时，用户仍然可以继续输入数据、滚动屏幕和使用应用程序。在服务器处理完毕后将数据返回JavaScript代码（仍然在Web表单中），然后使用DOM技术迅速更新表单数据，让用户感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预，甚至完全不知道幕后发生的一切，从而极大的提升了用户体验。
三、Ajax应用
现以修改用户的登录名的例子来讲述AJAX在实际中的应用，该实例可以推广到网页中任何文本内容的动态修改。
（一）创建XMLHttpRequest对象，为了使代码同时支持Internet Explorer和非Microsoft浏览器，使用如下代码
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e2) {
xmlHttp = false;
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
在创建XMLHttpRequest对象之后，就可以结合JavaScript代码完成以下工作：从 Web 表单中获取数据-＞打开到服务器的连接-＞设置服务器处理完成后的响应函数，这也是Ajax工作的一般流程。
（二）定义获取表单数据及更改表单的JavaScript代码
function changeToInput(id) {
var oNP = document.getElementById(id);//从表单中获取数据
var value = oNP.value;
oNP.outerHTML = "＜input type='text' id='" + id + "' value='" + value + "' size='5' onblur='change(this.id)'＞";//在表单中动态改变文本为输入框
document.getElementById(id).focus();
}
（三）打开到服务器的连接，将修改提交服务器
服务器处理修改的功能由changename.jsp实现，在此不做详细介绍。
function change(id) {
var oNP = document.getElementById(id);
var value = oNP.value;
gID = id;
init();
var url="changename.jsp?id="+escape(id)+"&normalprice="+value;
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
（四）定义服务器处理完成之后的响应函数
function callback() {
if(4 == req.readyState) {//就绪状态
if(200 == req.status) {//无错误正常完成状态
var oNP = document.getElementById(gID);
var value = oNP.value;
oNP.outerHTML = "＜span id='" + gID + "' value='" + value + "' onclick = 'changeToInput(this.id)'＞"+ value + "＜/span＞";
}
}
当服务器正常完成处理后，将处理结果同步更新到web页面，而利用JavaScript在幕后与服务器交互及处理交互后的结果这些复杂的过程全部隐藏起来，至此，利用完成了全部工作。
四、结束语
通过上述的具体示例，可以看到Ajax技术主要依赖于XMLHttpRequest
对象及JavaScript技术，其背后隐藏的细节比较复杂，比传统的Web开发更难更繁琐，但它却能给用户带来全新的体验。Ajax不仅仅是一种时尚，更是一种构建网站的强大方法，亦是Web2.0的核心之一，因此掌握并熟练运用Ajax技术是一种必须和必然。
参考文献：
[1][美]麦克劳夫林．Head Rush Ajax-深入浅出Ajax 东南大学出版社，2006.5.
[2]李刚.基于J2EE的Ajax宝典.电子工业出版社.2007.5.
作者简介：
李森，男，河南南阳河南工业职业技术学院网络管理中心，在职研究生，主要从事Java和计算机网络方面研究。