Jquery揭秘系列:ajax原生js實現


         講到ajax這個東西,我們要知道兩個對象XMLHTTPRequestActiveXObject ,提供了對 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);
            });

 

 

 

 

 

 

 

 

     

       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM