首页 > 代码库 > XHR工厂的实现
XHR工厂的实现
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工厂了。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var AjaxHandler = new Interface( "AjaxHandler" ,[ "request" , "createXObject" ]); var XHRFactory = function () {}; XHRFactory.prototype = function () { request: function (method, url, callback, postvar) { var xhr = this .createXObject(); xhr.onreadystatechange = function (){ if (xhr.readyState == 4) { (xhr.status == 200)?(callback.success(xhr.responseText,xhr.ResponseXML)):(callback.failuse(xhr.status)); xhr.open(method, url, callback); if (method !== "POST" ) postvar = null ; xhr.send(postvar); } } }, createXObject: function (){ var methods = [ function (){ return new XMLHttpRequest()}, function (){ return new ActiveXObject( "Microsoft.XMLHTTP" )}, function (){ return new ActiveXObject( "Msxml2.XMLHTTP" )} ]; for ( var i = 0, len = methods.length; i < len; i++) { try { methods[i]; } catch (e){ continue ; } this .createXObject() = methods[i]; return methods[i]; } throw new Error( "Your explore dosen‘t support Ajax!‘" ); } } |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。