本文共 5055 字，大约阅读时间需要 16 分钟。
感 于Ajax请求的使用为RIA(Rich Internet Applications)的开始，但大多数刚接触富客户端的同学还不是很清楚具体的使用方法，所以根据自己的使用心得写下此篇Blog留作拾遗。
（PS: 看网上大多数的技术Blog都写的毫无生气，只有严谨的态度，所以我一直在努力尝试使用生趣的方式展现技术文章，毕竟希望技术能带给大家快乐，乐知才最重要，生活才最最重要）
大概在2005年末，开始接触Ajax技术，开始于对《Ajax基础教程- 一书的阅读，其深入浅出的讲述方式、典型的实例和简洁清晰的代码，让这本书很适合刚开始使用Ajax技术的Web开发人员用来基础学习。
此书中的例子是最原始的Ajax使用方式，没有任何的封装及使用JS类库，也因当时的Prototype类库不是很成熟。对于这种未加封装的Ajax使用，自然就会面临Web浏览器类型的判别及数据乱码的问题，所以以这种方式写Ajax请求不免很多的判断条件的繁琐代码，让人看起来以为你是在coding凑数，无良的骗取钱财。以下是这些繁琐代码的示例，有兴趣的同学可以研究一下：
// Origin Ajax program paradigmvar xmlHttp;// 判断浏览器，决定使用哪种创建请求的方式function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }}// 回调方法中需判断浏览器的返回状态function callBack(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var message =xmlHttp.responseText; if(message == 'T'){ alert("Insert successful!"); opener.location.reload(); self.close(); } else if(message == 'F'){ alert("Insert failed!"); } } }}// function sendSaveURL(){ var tableId = $F("tableId"); tableId = trim(tableId); var validateValue = inputValidate( '表名:tableId:text', '机构:bankId:text', '币种:currId:text', '日期:reportDate:date', '申请理由:reason:text' ); if(validateValue){ var queryString = Form.serialize("form1"); // 需使用JS添加时间参数，确保服务器端的请求认定 var url = "saveRedoApply.do?timeStamp=" + new Date().getTime(); createXMLHttpRequest(); // 设置xmlHttp请求的报文头 xmlHttp.open("POST",url,false); xmlHttp.onreadystatechange = callBack; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); xmlHttp.send(queryString); return xmlHttp.responsText; }}
上面代码中的方法已做了注释，从中可以看出未加任何封装的Ajax请求的繁琐。后来自己封装了以上方法才看起来简洁些。
根据定义，Ajax请求的生命周期为：
- Created (创建)
- Initialized (初始化)
- Request sent (发送请求)
- Response being received (can occur many times, as packets come in) (接收响应过程)
- Response received, request complete (已接收响应，请求完成)
这也是开发前必须清楚的事项。
随后Prototype中也提供了比较稳定易用的Ajax封装，这使得使用Ajax请求不必再了解Origin般原汁原味的繁琐处理了。
下面是Prototype的Ajax实例：
new Ajax.Request('/your/url', { onSuccess: function(transport) { // yada yada yada }}); 可以看出来封装后的确很易用，概念也明朗了许多。
然后是ExtJS中的Ajax对象提供的请求方法，很类似于Prototype的封装及使用方式。就Get及Post两种方式说明一下
其使用方式，首先来看Get方式：
Ext.Ajax.request({ url: 'dashboardChartFormProvider.do', success: function(response) { // 接收响应文本的示例 var str = response.responseText; // 将响应转换为对象的示例 var obj = response.responseText.evalJSON(); }, failure: Ext.emptyFn, params: { pid: parmId } }); Ext的ajax默认的请求方式为Get，所以也就不用特别声明使用何种请求方式了。url 是请求的链接，success 是请求成功后的回调方法，failure 是失败后的回调方法，params 为请求参数。
在这里特别要说明的是对于success和failure方法的理解，对此有很多小盆友有误解，认为后台成功后设置响应参数success为true自然就调用成功的处理方法，否则则调用十倍的处理方法，但发现不管后台(backend)处理逻辑失败与否最后调用的都是Ajax的success方法，而不解。其实这里的ajax的success方法指的并不是逻辑上的成功或失败，而指的是http通讯的响应状态成功与否，也就是在上面origin那段代码示例中判断的xmlHttp.status == 200的响应状态。这样我们也就明确了回调方法的使用，对于逻辑上的成功失败的判断需要我们自己在success中完成并添加对应的处理方法。
另附xmlHttp.statu状态码，具体如下：
100：Continue101：Switching Protocols102：Processing200：OK201：Created202：Accepted203：Non-Authoriative Information204：No Content205：Reset Content206：Partial Content207：Multi-Status300：Multiple Choices301：Moved Permanently302：Found303：See Other304：Not Modified305：Use Proxy306：(Unused)307：Temporary Redirect400：Bad Request401：Unauthorized402：Payment Granted403：Forbidden404：File Not Found405：Method Not Allowed406：Not Acceptable407：Proxy Authentication Required408：Request Time-out409：Conflict410：Gone411：Length Required412：Precondition Failed413：Request Entity Too Large414：Request-URI Too Large415：Unsupported Media Type416：Requested range not satisfiable417：Expectation Failed422：Unprocessable Entity423：Locked424：Failed Dependency500：Internal Server Error501：Not Implemented502：Bad Gateway503：Service Unavailable504：Gateway Timeout505：HTTP Version Not Supported507：Insufficient Storage
最后让我们看看Post方式的请求方法，Post可以使用url或form的方式来发送请求。首先是form的方式，示例代码如下：
Ext.Ajax.request({ form: 'formId', method: 'POST', success: function(response, opt) { // TODO: finish this method }, failure: Ext.emptyFn }); 方法很简洁，不过不足之处是需要由你来维护表单中的值，而且html也中的代码也会因为form而增多。而使用url的方式就会利用js的对象技术而使html页更简洁些，示例如下：
Ext.Ajax.request({ url: 'something.do', method: 'POST', params: form, success: function(response) { // TODO: finshed this method here }, failure: Ext.emptyFn }); /** * Object for ajax request defined */function Object1(){ this.parm1 = ""; this.parm2 = ""; this.parm3 = "";}ChartForm.prototype.getParm1 = function(){ return this.parm1;}ChartForm.prototype.setParm1 = function(parm1){ this.parm1= parm1;}
其中params中对应填入你的js请求的Object，此种方式优点在于利用JS的面向对象的封装方式来做ajax请求，代码更为简洁，设计思路更为清晰。而这样前台为JS对象，返回后将其映射为java对象的做法让你可以利用OO的思想来开发Web程序，这也是目前JS编程的流行的做法，你可以更多的关注领域模型的设计，对于你来说前后台交互所面对的都是业务对象。
至此，我已简要的向你介绍了Ajax的请求使用历程。通过此篇你可以学习到ajax的原始请求形式，利用类库简化后的请求，及如何使用JS面向对象的方式来与后台交互，还有Ajax的生命周期及状态码的意义。值得注意的是ext对于ajax封装后的success方法的理解，这里的成功指的是http通讯状态的成功而非方法逻辑上的成功与否。
让我们继续关注Ajax能带给我们什么惊喜。
转载地址：http://bchdi.baihongyu.com/