講到ajax這個(gè)東西，我們要知道兩個(gè)對(duì)象XMLHTTPRequest和ActiveXObject ，提供了對(duì) HTTP 協(xié)議的完全的訪問(wèn)，包括做出 POST 和 HEAD 請(qǐng)求以及普通的 GET 請(qǐng)求的能力?？梢酝交虍惒椒祷?Web 服務(wù)器的響應(yīng)，并且能以文本或者一個(gè) DOM 文檔形式返回內(nèi)容。XMLHTTPRequest基本上算是標(biāo)準(zhǔn)化了，兼容大部分瀏覽器ActiveXObject這玩兒意兒是微軟的東西，所以是為了兼容IE版本，我們用的只是它的xmlHTTP功能。

為了功能的明確和清晰，我們把這個(gè)ajax代碼分為5個(gè)部分：

•對(duì)象的創(chuàng)建 

•onreadystatechange句柄處理

•參數(shù)拼接

•Get功能實(shí)現(xiàn)

•Post功能實(shí)現(xiàn)

1.對(duì)象的創(chuàng)建 ：

首先創(chuàng)建用作 XMLHttpRequest 對(duì)象的 XMLHttp 變量。把它的值設(shè)置為 null。

按照 web 標(biāo)準(zhǔn)創(chuàng)建對(duì)象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()

按照微軟的方式創(chuàng)建對(duì)象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

如果捕獲錯(cuò)誤，則嘗試更老的方法 (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);

      }

     }

    }

這里面要說(shuō)一下readyState和status屬性。

readyState:

1.創(chuàng)建MLHTTP對(duì)象   

2.打開(kāi)與服務(wù)器的連接  

3.發(fā)送指令   

4.等待處理請(qǐng)求結(jié)果  。

status:

200.請(qǐng)求成功   

400.請(qǐng)求錯(cuò)誤。。。

還有很多值 ，這里就不一個(gè)個(gè)說(shuō)了。

timeout參數(shù)是請(qǐng)求過(guò)期時(shí)間   

callback參數(shù)，回調(diào)對(duì)返回?cái)?shù)據(jù)做了處理，轉(zhuǎn)換成對(duì)象。

3.參數(shù)拼接

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;

    }

這里是將傳入的對(duì)象參數(shù)拼接成字符竄，用于ajax請(qǐng)求時(shí)發(fā)送參數(shù)。

4.Get功能實(shí)現(xiàn)：

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 請(qǐng)求，發(fā)送的參數(shù)是直接在url上拼接的,而不是在send里面發(fā)送，而post方式參數(shù)則是在send里面發(fā)送。

5.Post功能實(shí)現(xiàn)

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");

這段代碼其實(shí)是說(shuō)明將整個(gè)發(fā)送內(nèi)容作為一個(gè)整體進(jìn)行編碼，get則是單個(gè)參數(shù)進(jìn)行編碼拼接 ，這也是post和get的區(qū)別。

調(diào)用方式如下 ：

var xhr = new xhrFactory();

   xhr.post("test.ashx", null, function (data) {

    alert(data);

   });

以上這篇Jquery揭秘系列:ajax原生js實(shí)現(xiàn)詳解(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考