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;    }