摘要：此外使用的時(shí)候必須在請(qǐng)求數(shù)據(jù)上面添加接收返回值使用會(huì)想用一個(gè)事件事件當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的操作。

AJAX 就是瀏覽器提供的一套API 可以通過javascript調(diào)用 從而實(shí)現(xiàn)通過代碼控制請(qǐng)求與響應(yīng) 實(shí)現(xiàn)網(wǎng)絡(luò)編程
AJAX 在瀏覽器端進(jìn)行網(wǎng)絡(luò)編程（發(fā)送請(qǐng)求 接受響應(yīng)）的技術(shù)方案
通過javascript直接獲取服務(wù)器的最新的內(nèi)容而不必重新加載頁面 讓web更能接近桌面應(yīng)用的用戶體驗(yàn)

???1、最大的一點(diǎn)是頁面無刷新，在頁面內(nèi)與服務(wù)器通信，給用戶的體驗(yàn)非常好。
　 2、使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。
　 3、可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。
?? 4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。
ajax的優(yōu)點(diǎn)
???1、最大的一點(diǎn)是頁面無刷新，在頁面內(nèi)與服務(wù)器通信，給用戶的體驗(yàn)非常好。
　 2、使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。
　 3、可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。
?? 4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。

1.ajax干掉了back按鈕，即對(duì)瀏覽器后退機(jī)制的破壞
2.安全問題因?yàn)閍jax技術(shù)就像是直接建立一個(gè)通道,會(huì)暴露比以前數(shù)據(jù)和服務(wù)器邏輯
3.對(duì)搜索引擎的支持比較弱
4.一些手機(jī)設(shè)備現(xiàn)在還不能更好的支持ajax

使用

連接服務(wù)器

徑，“異步/同步”）。
????????? ? 第三個(gè)參數(shù)：true===》異步、false===》同步。
????????? ? 當(dāng)請(qǐng)求方式為POST的時(shí)候，代碼寫法如上；
????????? ? 當(dāng)請(qǐng)求方式為GET的時(shí)候，使用xhr.open（"請(qǐng)求方式（GET/POST）"，url路徑 + “？”請(qǐng)求數(shù)據(jù) +? ，“異步/同步”）

發(fā)送請(qǐng)求

????????????? ? 使用xhr.send（）發(fā)送請(qǐng)求
????????????? ? 當(dāng)請(qǐng)求方式為GET的時(shí)候，發(fā)送請(qǐng)求為xhr.send(null).
????????????? ? 當(dāng)請(qǐng)求方式為POST的時(shí)候，發(fā)送請(qǐng)求為xhr.send(請(qǐng)求數(shù)據(jù))。
????????????? ? 此外使用POST的時(shí)候必須在xhr.send（請(qǐng)求數(shù)據(jù)）上面添加

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

3.接收返回值
使用ajax會(huì)想用一個(gè)事件readystatechange事件：當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的操作。
????? ? 當(dāng)readystatechange改變的時(shí)候，就會(huì)觸發(fā)這個(gè)事件執(zhí)行。
????? ? readyState：請(qǐng)求的狀態(tài)，返回的是狀態(tài)碼（0 - 4）：0（未初始化）open還沒有調(diào)用、1（載入）已經(jīng)調(diào)用了send（）正在發(fā)送請(qǐng)求、2（載入完成）send方法已經(jīng)完成? 已經(jīng)收到了全部的響應(yīng)內(nèi)容、3（解析）正在解析響應(yīng)內(nèi)容、4（完成）響應(yīng)內(nèi)容解析完成? 可以在客戶端用了。
????? ? responseText：返回請(qǐng)求的內(nèi)容。
????? ? status：返回請(qǐng)求的結(jié)果碼：返回200（成功）、返回404（未找到）、返回5**（5開頭）（服務(wù)器錯(cuò)誤）

ajax是一套API核心提供的類型：XMLHttpRequest
// 涉及到ajax操作的頁面不能使用文件協(xié)議訪問
// 1 安裝瀏覽器（用戶代理）
// xhr就類似于瀏覽器的作用（發(fā)送請(qǐng)求接收響應(yīng)） 初始化 請(qǐng)求代理對(duì)象
var xhr = new XMLHttpRequest();
// 2 打開瀏覽器 輸入網(wǎng)址(open方法已經(jīng)調(diào)用，建立一個(gè)與服務(wù)器特定端口的鏈接)
xhr.open("GET","./time.php")
// 3 敲回車鍵 開始請(qǐng)求
xhr.send()
// 因?yàn)榭蛻舳擞肋h(yuǎn)不知道服務(wù)器何時(shí)才能返回我們需要的響應(yīng)
// 所以AJAX API采用事件的機(jī)制（通知的感覺）
xhr.onreadystatechange = function(){
// 這個(gè)事件并不是只在響應(yīng)時(shí)觸發(fā) XHR 狀態(tài)改變就觸發(fā)
if(this.readyState !==4) return;
// 不然獲取響應(yīng)的內(nèi)容
console.log(this.responseText);
}

封裝Ajax
var $ = {

// 將{"name":"jack","age":20} 的參數(shù)要轉(zhuǎn)換為 ?name=jack&age=20
getpa:function(data){
    if(data && typeof data == "object"){
        var str = "?";
        for(var key in data){
            str = str + key + "=" + data[key] + "&";
        }
        str = str.substr(0,str.length-1);
    }
    return str;
},
// option.type:請(qǐng)求方式
// option.url:請(qǐng)求的url
// option.data:當(dāng)前請(qǐng)求所傳遞的參數(shù):規(guī)定參數(shù)必須是以對(duì)象的形式傳遞{"name":"jack","age":20}
// option.success:渲染方式
ajax:function(option){
    // 接收用戶參數(shù)進(jìn)行相應(yīng)處理
    var type = option.type || "get";
    // location.href 可以獲取當(dāng)前文件的路徑 
    var url = option.url || location.href;
    // 接收參數(shù):在js中最方便收集的數(shù)據(jù)類型為對(duì)象，所以我們就規(guī)定傳遞的參數(shù)必須是對(duì)象
    var data = this.getpa(option.data) || "";
    // 響應(yīng)成功之后的回調(diào)
    var success = option.success;

    // 創(chuàng)建異步對(duì)象
    var xhr = new XMLHttpRequest();

    // 讓異步對(duì)象發(fā)送請(qǐng)求
    // 請(qǐng)求行
    if(type == "get"){
        // 拼接參數(shù)
        url += data;
        data = null;
    }
    xhr.open(type,url);
    // 請(qǐng)求頭
    if(type == "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    // 請(qǐng)求體
    xhr.send(data);

    // 讓異步對(duì)象接收響應(yīng)
    xhr.onreadystatechange = function(){
        // 一個(gè)成功的響應(yīng)有兩個(gè)條件：1.服務(wù)器成功響應(yīng) 2.數(shù)據(jù)解析完畢可以使用
        if(xhr.status == 200 && xhr.readyState == 4){
            // 接收響應(yīng)的返回值
            // responseText   responseXML
            var rh = xhr.getResponseHeader("Content-Type");
            // 判斷
            if(rh.indexOf("xml") != -1){
                var result = xhr.responseXML;
            }
            else if(rh.lastIndexOf("json") != -1){
                var result = JSON.parse(xhr.responseText);
            }else{
                var result = xhr.responseText;
            }

            // 接收數(shù)據(jù)之后，調(diào)用回調(diào)函數(shù)
            success && success(result)
        }
    }
},
get:function(option){

},
post:function(){

}

}