成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

講到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實現詳解(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。