首先，我们先来看一个很简单的也很常用的ajax模块实例，在我们所做的后台系统开发中，我们经常会遇到这样的需求：抽象的说起来，有两种。
（1）在前端页面上有一个文本框子或者文本区，当我们键入内容后，可能需要对于键入的内容有一个复杂业务逻辑的判断，客户希望他所输入的内容能即时通过这个业务判断，并希望能看到即时的判断结果，而不希望是当表单页面的所有信息都填写完毕才能知道刚才填写的内容是否正确。
（2）在页面上有一些可以辅助自动完成的功能，比如说一些多级联动，区号电话号码邮编自动填写，查找以当前区域内容为关键字的相关信息。
对于这些需求来说，Ajax技术具有两点优势，一个是异步（不影响当前页面的流程），二是流量小，页面应用的开销小（拿城市省份联动来说，如果是基于页面JS的实现的话，需要一个完整的城市省份的数据集合，需要对于这个大容量的数据进行遍历，开销在浏览器，采用Ajax方式，处理过程的开销在于服务器后端，两者对于结果的处理开销是一样的）三是对于传统的Request/Response方式来说，所有的数据处理都是由服务端生成最终的HTML页面，现在通过Ajax模式，部分对于DOM数据生成操作改由客户端完成，略降了应用服务器的压力。
一个常见的Ajax模块的例子是这样的（判断当前是否有此公司ID存在）
Test.htm
<script type="text/javascript" src="test.js"></script>
<input type=”text” name=”comId” value=”请输入公司ID” onblur=”isExistCurComID(this.value)”>
Test.js
function isExistCurComID(comId) {
var xmlhttp_request;
// 创建XMLHTTP
try {
if (window.ActiveXObject) {
for (var i = 5; i; i--) {
try {
if (i == 2) {
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP."
+ i + ".0");
xmlhttp_request.setRequestHeader("Content-Type",
"text/xml");
xmlhttp_request.setRequestHeader("Charset", "gb2312");
}
break;
} catch (e) {
xmlhttp_request = false;
}
}
} else if (window.XMLHttpRequest) {
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
} catch (e) {
xmlhttp_request = false;
}
// 使用GET方式提交
var URL = 'companychk.do?action=isExistComId&comId=' + comId;
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
xmlhttp_request.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
responseStr = eval(xmlhttp.responseText);
// 处理返回信息
if (responseStr == true) {
var div = document.createElement('div');
document.getElementByName('comId')[0].parentNode
.appendChild(div);
div.innerHTML = '该公司ID已经存在';
}
} else {
// alert("读取失败");
}
}
}
}
从上面的源代码中可以看到，我们给页面的文本框控件增加onblur事件的处理方法isExistCurComID，参数为当前文本框的值内容。该事件定义在test.js文件中。
在test.js文件中，我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求，这里要用到XMLHttpRequest 类，它首先是由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。
对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0,6.0,7.0,8.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。
对于Mozilla﹑Netscape﹑Safari等浏览器，创建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();
如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：
//创建一个XMLHTTP请求
try {
if (window.ActiveXObject) {
for (var i = 5; i; i--) {
try {
if (i == 2) {
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i
+ ".0");
xmlhttp_request
.setRequestHeader("Content-Type", "text/xml");
xmlhttp_request.setRequestHeader("Charset", "gb2312");
}
break;
} catch (e) {
xmlhttp_request = false;
}
}
} else if (window.XMLHttpRequest) {
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
} catch (e) {
xmlhttp_request = false;
}
在定义了如何处理响应后，就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。
一般说来Get请求比Post略快，Get请求的数据内容在request head，Post在request body，Get走URL方式，对于URL有字符限制的，提交参数也是明文在URL上。对于大数据量需要用Post
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function() {
// JavaScript代码段
};
首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
readyState的取值如下：
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：
if (http_request.readyState == 4) { // 收到完整的服务器响应
}
else { // 没有收到完整的服务器响应
}
当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。
当请求达到服务端，因为刚才的请求是/companychk.do?action=isExistComId&comId=' + comId，实际就相当于在浏览器的URL地址栏中输入/companychk.do?action=isExistComId&comId=3415，对于现有后台老系统，通过struct控制器映射，进入CompanyCheckAction这个Action类，寻找Form参数action等于isExistComId的对应方法：
If(“isExistComId”.equals(form.getAction)){
isExistComId();
}
…
Public void isExistComId() throws Exception{
}
你可以看到在相应的后端业务代码中会根据传入参数，进行业务逻辑的判断，这里是判断是否存在该公司ID，调用MIC_CompanyCheck组件，通过传入ComId字段初始化，如果初始化不成功则证明该公司不存在。通过往Response输出流中写入返回结果，完成Ajax的前端数据(业务处理需要的参数)ßà后端数据(业务处理的返回结果)之间的传递。在后端数据处理的过程中，与前端密切相关的，也是我们做一个Ajax模块必须着重考虑的是，如果组织一个前端脚本语言友好，数据容量小，易于理解的数据结构。一般来说，我们有三种方式：
以纯文本方式，既字符串的方式输出
以XML标准文档的方式
这里我个人推荐是JSON的方式，首先JSON相比XML具有体积更小，查询更快捷（XML一般采用XPATH的方式，而JSON本生就是原生的JS对象），同时JSON和Java对象之间可以形成互相转换，参考附件2。在上面的例子中我们只是为了举例，所以输出的这个JSON比较简单，就是一个true或者false的Boolean对象，注意这里不是字符串，字符串是需要加引号的，别搞混了。
接着继续看前端，在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。因为刚才定下来传递过来的是一个JSON格式的数据，我们就需要对于这个Response中的content做解析，在Javascript中，有个原生的eval方法，它的参数是一个字符串，执行eval(‘字符串内容’)，可以把字符串内容解析为一个js对象。比如执行刚才的eval(‘true’)那它就会返回一个boolean值true。
当解析完返回结果后，我们需要做最后一步，就是根据返回结果，完成最终页面显示。这里我们的逻辑是当判断一个公司ID是否真的存在该公司时，如果返回true，那么在该文本框后面显示一段文字，叫做“该公司已经存在”。这里需要了解的知识是JS操作DOM，同时这里你看到的是document.getElementByName而不是常用的document.getElementById，用name的好处是，我们不必额外指定元素的ID，当然，对于一个DOM来说，每个Element的ID应该是唯一标示的。同样，对于一个表单来说，每个表单元素的name 都对应我们对应后端bean的一个属性一样，这里直接使用表单元素的name而不额外指定id是有好处的，我们的目的是尽量做到对于页面侵入越小越好，当然使用getElementByName 并不是我们最好的用法，在后面的Ajax操作DOM高级技巧中我们会进步一谈到。同时在这里，我们还采用动态创建页面元素的方法，不是在已有的页面先建立一块输出区域，我这样做的好处在于，此异步模块与现有页面模块是独立的，可分离的，当然细心的人会发现页面上还有一句onblur是耦合的，下面我们会讲一些进阶技巧，可以做ajax模块与当前页面模块进一步分离，只留下最基本的页面引用，让ajax开发做到复用，并且模块化。
讲到这里一个，很简单，很基本的ajax小模块就成型了。当然麻雀虽小，五脏俱全。无论是以后多么复杂的ajax应用，都离不开上诉的这些基本原理。但是如果每次开发都按照上面这样的话，是很雷人。作为新时代的程序员，我们一定要学会节约自己的时间，弄一些“偷懒”的方法，下面我们要讲一些进阶的ajax编程技巧。
