非同步對象（XMLHttpRequest）的協助指令碼

標籤：style   blog   http   io   color   ar   os   使用   sp   

非同步對象五部曲

這是post請求的、

 //1.00建立非同步對象            var xhr = new XMLHttpRequest();            //2.0            xhr.open("post", url,params, true);            //3.0將參數使用Formdata屬性傳遞            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            //4.0設定回呼函數            xhr.onreadystatechange = function () {                if (xhr.readyState == 4 && xhr.status == 200) {                    alert(xhr.responseText);                }            }            //5.0傳遞參數            xhr.send(params);

結合get請求做一個非同步對象的封裝

 

get 請求中的

  xhr.setRequestHeader("If-Modified-Since", "0"); 是為了清除緩衝

而post請求的

 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

是為了傳輸方式
在<from method=‘post‘ type="">
<from>中的type可以得到三種方式，其中包括application/x-www-form-urlencoded

 

var ajaxHelp = {    CreatXHR: function () {        //建立非同步對象        var xhr = new XMLHttpRequest();        return xhr;    },    //ajax的get請求    AjaxGet: function (url, callBack) {        this.AJaxCommon("get", url, null, callBack);    },    //ajax的post請求    AjaxPost: function (url, params, callBack) {        this.AJaxCommon("post", url, params, callBack);    },    AJaxCommon: function (method, url, params, callBack) {        //1.0        var xhr = this.CreatXHR();        //2.0        xhr.open(method, url, true);        //3.0        if (method == "get") {            xhr.setRequestHeader("If-Modified-Since", "0");        } else {            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        }        //4.0        xhr.onreadystatechange = function () {            if (xhr.readyState == 4 && xhr.status == 200) {                var datas = JSON.parse(xhr.responseText);                //執行回呼函數                callBack(datas);            }        }        //5.0        xhr.send(params);    }};

 

ps:在JQuery裡面是有$.ajax  和$.get /   $.Post  等非同步請求的方法的。以前的封裝就不用了。額。好扯。其實他們底層也是這樣的寫的呢。JQuery就是為瞭解決各個瀏覽器的相容性問題而已

非同步對象（XMLHttpRequest）的協助指令碼