快捷導(dǎo)航

淺談jQuery異步對象（XMLHttpRequest）

更新時間：2014年11月17日 09:09:07 投稿：hebedich

文章淺顯易懂的將jQuery異步對象分為了5個步奏，非常有利于我們學(xué)習(xí)記憶，是篇相當(dāng)不錯的學(xué)習(xí)jQuery異步對象的文章，這里推薦給大家。

我們先來看看異步對象五部曲

這是post請求的、

 //1.00創(chuàng)建異步對象

            var xhr = new XMLHttpRequest();

            //2.0

            xhr.open("post", url,params, true);

            //3.0將參數(shù)使用Formdata屬性傳遞

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

            //4.0設(shè)置回調(diào)函數(shù)

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    alert(xhr.responseText);

                }

            }

            //5.0傳遞參數(shù)

            xhr.send(params);

結(jié)合get請求做一個異步對象的封裝

get 請求中的

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

而post請求的

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

var ajaxHelp = {

    CreatXHR: function () {

        //創(chuàng)建異步對象

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

                //執(zhí)行回調(diào)函數(shù)

                callBack(datas);

            }

        }

        //5.0

        xhr.send(params);

    }

};