ajax这种常见的开发模式已经遍布我们日常的开发之中了,ajax本质还是采用一种轮询的模式,就是隔一段时间去发送一次http请求,获取数据,然后显示在页面之上,当然,ajax比起新兴的WebScoket肯定是差了一截,WebScoket基于握手协议,是一种全双工的通信。
目前,很多javascript库都实现了对ajax完善的支持,像jQuery, Ext, Mootools, prototype等。平时是不是就简单的调用一下$.ajax()或者$.post()就轻松的实习了一次ajax请求了呢?如果你过于依赖jQuery等类库的话,你可能会忽略ajax的原生实现。下面我来谈谈ajax的原生实现。
ajax中的核心对象是XMLHttpRequest。像Firefox、 chrome、 opera、 safari等浏览器可以直接通过new XMLHttpRequest()创建,IE6及IE6以下不支持这种方式创建,但是可以通过new ActiveXObject()创建。常见的HTTP状态码中,200表示请求已经发送成功,readyState一共有5种状态,0表示未连接,1表示打开连接,2表示发送请求,3表示交互,4表示完成交互并接手响应。了解了这些预备知识,我们就可以实现一个XHR工厂了。
/** * XHR Factory, use simple factory patten * It handle ajax create, request, send and etc * Written by liufeng cheng * update date: 2014/7/10 * call example: window.onload = function(){ var xhrFactory = new XhrFactory(); var callback = { success:function(responseText,responseXML){alert("Success:" + responseXML);}, failure:function(statusCode){alert("Failure" + statusCode);} }; myHandler.request('GET','innerHTML.xml',callback); }; */ var XhrFactory = function(){}; XhrFactory.prototype = { //ajax create,request,send and etc request:function(method,url,callback,postVars){ var xhr = this.createXhrObject(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; (xhr.status == 200) ? callback.success(eval("(" + xhr.responseText + ")"), xhr.responseXML): callback.failure(xhr.status); }; xhr.open(method,url,true); if(method != "POST") postVars = null; xhr.send(postVars); }, // return a xhr object in different case createXhrObject:function(){ var methods = [ function(){return new XMLHttpRequest();}, function(){return new ActiveXObject('Msxml2.XMLHttp');}, function(){return new ActiveXObject('Microsoft.XMLHttp');} ]; for(var i = 0; i < 3; i++){ try{ methods[i](); }catch(e){ continue; } this.createXhrObject = methods[i](); return methods[i](); } throw new Error("Error!"); } }