Jquery揭秘系列:ajax原生js实现详解（推荐）

讲到ajax这个东西，我们要知道两个对象XMLHTTPRequest和ActiveXObject ，提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所以是为了兼容IE版本，我们用的只是它的xmlHTTP功能。
为了功能的明确和清晰，我们把这个ajax代码分为5个部分：
•对象的创建

•onreadystatechange句柄处理

•参数拼接

•Get功能实现

•Post功能实现
1.对象的创建：
首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
按照 web 标准创建对象（Mozilla, Opera 以及 Safari）：XMLHttp=new XMLHttpRequest（）
按照微软的方式创建对象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject（"Msxml2.XMLHTTP"）
如果捕获错误，则尝试更老的方法（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）; }）;

以上这篇Jquery揭秘系列:ajax原生js实现详解（推荐）就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。