第一百二十八節，JavaScript，Ajax

時間 2019-11-12

標籤第一百二十八 javascript ajax 欄目 JavaScript 简体版

原文原文鏈接

JavaScript，Ajaxphp

學習要點：html

1.XMLHttpRequestweb

2.GET與POSTajax

3.封裝Ajaxjson

2005年Jesse James Garrett發表了一篇文章，標題爲：「Ajax：A new Approach to Web Applications」。他在這篇文章裏介紹了一種技術，用他的話說，就叫：Ajax，是Asynchronous JavaScript + XML的簡寫。這種技術可以想服務器請求額外的數據而無須卸載頁面(即刷新)，會帶來更好的用戶體驗。一時間，席捲全球。數組

一．XMLHttpRequest對象瀏覽器

Ajax技術核心是XMLHttpRequest對象(簡稱XHR)，這是由微軟首先引入的一個特性，其餘瀏覽器提供商後來都提供了相同的實現。在XHR出現以前，Ajax式的通訊必須藉助一些hack手段來實現，大多數是使用隱藏的框架或內嵌框架。服務器

XHR的出現，提供了向服務器發送請求和解析服務器響應提供了流暢的接口。可以以異步方式從服務器獲取更多的信息，這就意味着，用戶只要觸發某一事件，在不刷新網頁的狀況下，更新服務器最新的數據。app

雖然Ajax中的x表明的是XML，但Ajax通訊和數據格式無關，也就是說這種技術不必定使用XML。框架

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR對象，在這些瀏覽器中建立XHR對象能夠直接實例化XMLHttpRequest便可。

XMLHttpRequest()建立xhr對象

var xhr = new XMLHttpRequest();   //建立xhr對象
alert(xhr);    //打印對象

若是是IE6及如下，那麼咱們必須還須要使用ActiveX對象經過MSXML庫來實現。在低版本IE瀏覽器可能會遇到三種不一樣版本的XHR對象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。咱們能夠編寫一個函數。

兼容IE低版本建立xhr對象

var xhr = new createXHR(); //執行兼容IE低版本建立xhr對象函數
alert(xhr); //打印xhr對象


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

建立了XHR對象，在使用XHR對象時，先必須調用open()方法，它接受三個參數：要發送的請求類型(get、post)、請求的URL和表示是否異步。

open()方法，準備發送http請求，3個參數，參數1請求類型get或post，參數2請求的url能夠是動態的也能夠是靜態的（如：demo.php，demo.html）,參數3表示是否異步/false同步/true異步
使用方式：
XHR對象.open('get','demo.php',false)

var xhr = new createXHR(); //執行兼容IE低版本建立xhr對象函數
//open()方法，準備發送http請求，3個參數，參數1請求類型get或post，參數2請求的url能夠是動態的也能夠是靜態的（如：demo.php，demo.html）,參數3表示是否異步/false同步/true異步
xhr.open('get','demo.html',false);  //準備發送


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

open()方法並不會真正發送請求，而只是啓動一個請求以備發送。經過send()方法進行發送請求，send()方法接受一個參數，做爲請求主體發送的數據。若是不須要則，必須填null。執行send()方法以後，請求就會發送到服務器上。

send()方法方法，發送http請求，1個參數，請求主體發送的數據,若是不須要則，必須填null
使用方式：
XHR對象.send(null)

var xhr = new createXHR(); //執行兼容IE低版本建立xhr對象函數
//open()方法，準備發送http請求，3個參數，參數1請求類型get或post，參數2請求的url能夠是動態的也能夠是靜態的（如：demo.php，demo.html）,參數3表示是否異步/false同步/true異步
xhr.open('get','demo.py',false);  //準備發送
//send()方法方法，發送http請求，1個參數，請求主體發送的數據,若是不須要則，必須填null
xhr.send(null); //發送請求


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

當send()方法請求發送到服務器端，收到響應後，響應的數據會自動填充XHR對象的屬性。那麼一共有四個屬性：

屬性名	說明
responseText	做爲響應主體被返回的文本
responseXML	若是響應主體內容類型是"text/xml"或"application/xml"，則返回包含響應數據的XML DOM文檔
status	響應的HTTP狀態
statusText	HTTP狀態的說明

接受響應以後，第一步檢查status屬性，以肯定響應已經成功返回。通常以HTTP狀態代碼爲200做爲成功的標誌。除了成功的狀態代碼，還有一些別的：

HTTP狀態碼	狀態字符串	說明
200	OK	服務器成功返回了頁面
400	Bad Request	語法錯誤致使服務器不識別
401	Unauthorized	請求須要用戶認證
404	Not found	指定的URL在服務器上找不到
500	Internal Server Error	服務器遇到意外錯誤，沒法完成請求
503	ServiceUnavailable	因爲服務器過載或維護致使沒法完成請求

responseText屬性，做爲響應主體被返回的文本

var xhr = new createXHR(); //執行兼容IE低版本建立xhr對象函數
//open()方法，準備發送http請求，3個參數，參數1請求類型get或post，參數2請求的url能夠是動態的也能夠是靜態的（如：demo.php，demo.html）,參數3表示是否異步/false同步/true異步
xhr.open('get','demo.html',false);  //準備發送
//send()方法方法，發送http請求，1個參數，請求主體發送的數據,若是不須要則，必須填null
xhr.send(null); //發送請求
//responseText屬性，做爲響應主體被返回的文本
alert(xhr.responseText);


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

其餘屬性見上表，同理

動態獲取請求數據，結合點擊事件

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面時激發函數
    var xhr = new createXHR();  //執行兼容IE低版本建立xhr對象函數
    xhr.open('get', 'demo.html', false);    //設置了同步，準備請求
    xhr.send(null);  //發送請求
    if (xhr.status == 200) {                    //若是返回成功了，判斷狀態碼是否等於200
        alert(xhr.responseText);                //調出服務器返回的數據
    } else {
        alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
    }
});



//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

open()方法異步調用【經常使用】

同步調用當然簡單，但使用異步調用纔是咱們真正經常使用的手段。使用異步調用的時候，須要觸發readystatechange事件，而後檢測readyState屬性便可。這個屬性有五個值：

readyState屬性

值	狀態	說明
0	未初始化	還沒有調用open()方法
1	啓動	已經調用open()方法，但還沒有調用send()方法
2	發送	已經調用send()方法，但還沒有接受響應
3	接受	已經接受到部分響應數據
4	完成	已經接受到所有響應數據，並且可使用

異步調用

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面後執行函數
    var xhr = new createXHR();  //執行建立XHR對象函數，建立XHR對象
    xhr.open('get', 'demo.html', true); //open()方法異步調用,準備請求
    xhr.send(null);  //發送請求
    xhr.onreadystatechange = function () {  //當請求時執行函數
        if (xhr.readyState == 4) {  //判斷已經接受到所有響應數據，並且可使用
            if (xhr.status == 200) {  //判斷狀態碼爲200
                alert(xhr.responseText); //獲取請求頁面內容
            } else {
                //不然打印錯誤
                alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：使用abort()方法能夠取消異步請求，放在send()方法以前會報錯。放在responseText以前會獲得一個空值。

注意若是請求的url是動態頁面，獲取頁面數據時，不是實時的解決方式

xhr.open('get', 'demo.php?rand=' + Math.random(), true);

二．GET與POST

在提供服務器請求的過程當中，有兩種方式，分別是：GET和POST。在Ajax使用的過程當中，GET的使用頻率要比POST高。

在web程序上，GET通常是URL提交請求，好比：demo.php?name=lee&age=100
POST通常是表單提交，好比：<form method="post">...

在瞭解這兩種請求方式前，咱們先了解一下HTTP頭部信息，包含服務器返回的響應頭信息和客戶端發送出去的請求頭信息。咱們能夠獲取響應頭信息或者設置請求頭信息。咱們能夠在Firefox瀏覽器的firebug查看這些信息。

兩種頭信息

響應頭信息：服務器返回的信息，客戶端能夠獲取，但不能夠設置
請求頭信息：客戶端發送的信息，客戶端能夠設置，但不能夠獲取

獲取響應頭信息

getAllResponseHeaders()方法，獲取整個響應頭信息
使用方式
xhr對象.getAllResponseHeaders()

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面後執行函數
    var xhr = new createXHR();  //執行建立XHR對象函數，建立XHR對象
    xhr.open('get', 'demo.html', true); //open()方法異步調用,準備請求
    xhr.send(null);  //發送請求
    xhr.onreadystatechange = function () {  //當請求時執行函數
        if (xhr.readyState == 4) {  //判斷已經接受到所有響應數據，並且可使用
            if (xhr.status == 200) {  //判斷狀態碼爲200
                
                alert(xhr.getAllResponseHeaders()); //getAllResponseHeaders()方法，獲取整個響應頭信息
                
            } else {
                //不然打印錯誤
                alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

getResponseHeader()方法，獲取單個響應頭信息,參數是要獲取頭信息的名稱
使用方式
xhr對象.getResponseHeader('要獲取頭信息的名稱')

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面後執行函數
    var xhr = new createXHR();  //執行建立XHR對象函數，建立XHR對象
    xhr.open('get', 'demo.html', true); //open()方法異步調用,準備請求
    xhr.send(null);  //發送請求
    xhr.onreadystatechange = function () {  //當請求時執行函數
        if (xhr.readyState == 4) {  //判斷已經接受到所有響應數據，並且可使用
            if (xhr.status == 200) {  //判斷狀態碼爲200

                alert(xhr.getResponseHeader('Content-Type')); //getResponseHeader()方法，獲取單個響應頭信息,參數是要獲取頭信息的名稱

            } else {
                //不然打印錯誤
                alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

設置單個請求頭信息

setRequestHeader()方法，設置單個請求頭信息,兩個參數，要設置的頭信息名稱和值
使用方式
xhr對象.setRequestHeader('頭信息名稱','值')

注意：放在open方法以後，send方法以前

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面後執行函數
    var xhr = new createXHR();  //執行建立XHR對象函數，建立XHR對象
    xhr.open('get', 'demo.html', true); //open()方法異步調用,準備請求

    //setRequestHeader()方法，設置單個請求頭信息,兩個參數，要設置的頭信息名稱和值
    xhr.setRequestHeader('MyHeader', 'Lee');        //放在open方法以後，send方法以前
    
    xhr.send(null);  //發送請求
    xhr.onreadystatechange = function () {  //當請求時執行函數
        if (xhr.readyState == 4) {  //判斷已經接受到所有響應數據，並且可使用
            if (xhr.status == 200) {  //判斷狀態碼爲200
                //alert(xhr.getAllResponseHeaders()); //獲取整個響應頭信息
            } else {
                //不然打印錯誤
                alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：咱們只能夠獲取服務器返回回來響應頭信息，沒法獲取向服務器提交的請求頭信息，天然自定義的請求頭，在JavaScript端是沒法獲取到的。

GET請求

GET請求是最多見的請求類型，最經常使用於向服務器查詢某些信息。必要時，能夠將查詢字符串參數追加到URL的末尾，以便提交給服務器。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

經過URL的末尾提交數據，能夠經過動態頁面獲取提交的數據

經過URL後的問號給服務器傳遞鍵值對數據，服務器接收到返回響應數據。特殊字符傳參產生的問題可使用encodeURIComponent()進行編碼處理，中文字符的返回及傳參，能夠將頁面保存和設置爲utf-8格式便可。

var url = 'demo.php?rand=' + Math.random();
url = addURLParam(url,'name','lguix');
url = addURLParam(url,'aeg',100);

//一個通用的URL提交函數
function addURLParam(url, name, value) {
    url += (url.indexOf('?') == -1 ? '?' : '&');            //判斷的url是否有已有參數
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
    alert(url);
    return url;
}

PS：當沒有encodeURIComponent()方法時，在一些特殊字符好比「&」，會出現錯誤致使沒法獲取。

POST請求

POST請求能夠包含很是多的數據，咱們在使用表單提交的時候，不少就是使用的POST傳輸方式。

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面後執行函數
    var xhr = new createXHR();  //執行建立XHR對象函數，建立XHR對象
    xhr.open('post', 'demo.php', true); //open()方法異步調用,準備請求

而發送POST請求的數據，不會跟在URL的尾巴上，而是經過send()方法向服務器提交數據。

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

addEvent(document, 'click', function () {  //執行添加事件函數，添加一個點擊事件，點擊頁面後執行函數
    var xhr = new createXHR();  //執行建立XHR對象函數，建立XHR對象
    xhr.open('post', 'demo.php', true); //open()方法異步調用,準備請求
    xhr.send('name=Lee&age=100'); //發送

通常來講，向服務器發送POST請求因爲解析機制的緣由，須要進行特別的處理。由於POST請求和Web表單提交是不一樣的，須要使用XHR來模仿表單提交。

修改響應頭信息來模擬

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

PS：從性能上來說POST請求比GET請求消耗更多一些，用相同數據比較，GET最多比POST快兩倍。

上一節課的JSON也可使用Ajax來回調訪問。

var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);

三．封裝Ajax

由於Ajax使用起來比較麻煩，主要就是參數問題，好比到底使用GET仍是POST；究竟是使用同步仍是異步等等，咱們須要封裝一個Ajax函數，來方便咱們調用。

//注意：引入了開源庫json2，若是瀏覽器版本過低不支持JSON對象，經過一個開源庫json2.js來模擬執行，若是支持JSON對象就用JSON對象

//封裝ajax
function ajax(obj) {  //接收數據對象
    var xhr = new createXHR();  //執行建立xhr對象函數
    //數據對象裏的url加上?rand=，在加上Math.random()
    obj.url = obj.url + '?rand=' + Math.random();
    //數據對象裏的data鍵和值對象，執行名值對編碼函數
    obj.data = params(obj.data); //接收名值對編碼後而且格式化分隔符後的數組
    //判斷髮送方式是不是get，url裏的？索引位置是不是負一。若是不是執行後面
    if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
    //判斷髮送模式若是是異步
    if (obj.async === true) {
        //添加一個加載事件
        xhr.onreadystatechange = function () {
            //判斷已經接受到所有響應數據，並且可使用
            if (xhr.readyState == 4) callback(); //執行callback()函數
        };
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === 'post') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }
    if (obj.async === false) {
        callback();
    }
    function callback() { //callback()函數
        if (xhr.status == 200) {  //判斷狀態碼若是是200
            //將獲取到的頁面內容，傳入回調函數
            obj.success(xhr.responseText);            //回調
        } else {
            alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
        }
    }
}

//調用ajax
addEvent(document, 'click', function () {        //IE6須要重寫addEvent
    ajax({  //數據對象
        method: 'get',     //執行ajax封裝函數，將一個對象傳入封裝函數
        url: 'demo.html',   //請求url
        data: {
            'name': 'Lee',  //url鍵值
            'age': 100     //url鍵值
        },
        success: function (text) {  //接收回調函數
            alert(text);  //打印回調返回的內容
        },
        async: true  //true異步調用
    });
});

//名值對編碼
function params(data) {  //接收數據對象裏的data鍵和值對象
    var arr = []; //建立數組
    for (var i in data) { //循環數據對象裏的data鍵和值對象
        //將每次循環的對象名稱 = 加上 對應名稱的值，添加到arr數組
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');  //將數組格式化分隔符後返回
}


//兼容IE低版本建立xhr對象,函數
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判斷XMLHttpRequest建立xhr對象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr對象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判斷IE低版本的3種模式是否支持
        var versions = [  //數組，3種模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循環3種模式
            try {
                return new ActiveXObject(version[i]);  //嘗試每次循環的IE模式執行返回
            } catch (e) {
                //跳過
            }
        }
    } else {  //若是上面兩種都不能建立xhr對象
        //建立錯誤對象，拋出錯誤
        throw new Error('您的瀏覽器不支持XHR對象！');
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}