Jquery揭秘系列:ajax原生js实现
讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能。
为了功能的明确和清晰,我们把这个ajax代码分为5个部分:
- 对象的创建
- onreadystatechange句柄处理
- 参数拼接
- Get功能实现
- Post功能实现
1.对象的创建 :
如果捕获错误,则尝试更老的方法 (Internet Explorer 5.5) :XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
var xhrFactory = function () { this.init.apply(this, arguments); } xhrFactory.prototype = { init: function () { this.xhr = this.create(); }, create: function () { var xhr = null; try { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.Xmlhttp"); } } catch (err) { xhr = new ActiveXObject("Microsoft.Xmlhttp"); } return xhr; } }
2.onreadystatechange句柄:
readystate: function (timeout,callback) { this.xhr.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { callback(eval("(" + this.responseText + ")")); } else { setTimeout(function () { this.xhr.abort(); }, !timeout ? 15000 : timeout); } } }
这里面要说一下readyState和status属性。
readyState : 1.创建MLHTTP对象 2.打开与服务器的连接 3 .发送指令 4 等待处理请求结果 。
status: 200.请求成功 400.请求错误。。。还有很多值 ,这里就不一个个说了。
timeout参数是请求过期时间 callback参数,回调对返回数据做了处理,转换成对象。
3.参数拼接
para: function (data) { var datastr = ""; if (data && Object.prototype.toString.call(data) == "[object Object]") { for (var i in data) { for (var i = 0; i < length; i++) { datastr += i + "=" + data[i] + "&"; } } } return datastr; }
这里是将传入的对象参数拼接成字符窜,用于ajax请求时发送参数。
4.Get功能实现:
get: function (url, data, callback, async, timeout) { this.readystate(timeout, callback); var newurl = url; var datastr = this.para(data); newurl = url + "?" + datastr; this.xhr.open("get", newurl, !async ? true : async); this.xhr.send(null); }
get 请求,发送的参数是直接在url上拼接的,而不是在send里面发送,而post方式参数则是在send里面发送。
5.Post功能实现
post: function (url, data, callback, async, timeout) { this.readystate(timeout, callback); var newurl = url; var datastr = this.para(data); this.xhr.open("post", newurl, !async ? true : async); this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded"); this.xhr.send(!datastr ? null : datastr); }
post这里面多了一段代码:this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");
这段代码其实是说明将整个发送内容作为一个整体进行编码,get则是单个参数进行编码拼接 ,这也是post和get的区别。
调用方式如下
:
var xhr = new xhrFactory(); xhr.post("test.ashx", null, function (data) { alert(data); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。