摘要：此外使用的時候必須在請求數據上面添加接收返回值使用會想用一個事件事件當請求被發送到服務器時，我們需要執行一些基于響應的操作。

AJAX 就是瀏覽器提供的一套API 可以通過javascript調用 從而實現通過代碼控制請求與響應 實現網絡編程
AJAX 在瀏覽器端進行網絡編程（發送請求 接受響應）的技術方案
通過javascript直接獲取服務器的最新的內容而不必重新加載頁面 讓web更能接近桌面應用的用戶體驗

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

1.ajax干掉了back按鈕，即對瀏覽器后退機制的破壞
2.安全問題因為ajax技術就像是直接建立一個通道,會暴露比以前數據和服務器邏輯
3.對搜索引擎的支持比較弱
4.一些手機設備現在還不能更好的支持ajax

使用

連接服務器

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

發送請求

????????????? ? 使用xhr.send（）發送請求
????????????? ? 當請求方式為GET的時候，發送請求為xhr.send(null).
????????????? ? 當請求方式為POST的時候，發送請求為xhr.send(請求數據)。
????????????? ? 此外使用POST的時候必須在xhr.send（請求數據）上面添加

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

3.接收返回值
使用ajax會想用一個事件readystatechange事件：當請求被發送到服務器時，我們需要執行一些基于響應的操作。
????? ? 當readystatechange改變的時候，就會觸發這個事件執行。
????? ? readyState：請求的狀態，返回的是狀態碼（0 - 4）：0（未初始化）open還沒有調用、1（載入）已經調用了send（）正在發送請求、2（載入完成）send方法已經完成? 已經收到了全部的響應內容、3（解析）正在解析響應內容、4（完成）響應內容解析完成? 可以在客戶端用了。
????? ? responseText：返回請求的內容。
????? ? status：返回請求的結果碼：返回200（成功）、返回404（未找到）、返回5**（5開頭）（服務器錯誤）

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

封裝Ajax
var $ = {

// 將{"name":"jack","age":20} 的參數要轉換為 ?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:請求方式
// option.url:請求的url
// option.data:當前請求所傳遞的參數:規定參數必須是以對象的形式傳遞{"name":"jack","age":20}
// option.success:渲染方式
ajax:function(option){
    // 接收用戶參數進行相應處理
    var type = option.type || "get";
    // location.href 可以獲取當前文件的路徑 
    var url = option.url || location.href;
    // 接收參數:在js中最方便收集的數據類型為對象，所以我們就規定傳遞的參數必須是對象
    var data = this.getpa(option.data) || "";
    // 響應成功之后的回調
    var success = option.success;

    // 創建異步對象
    var xhr = new XMLHttpRequest();

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

    // 讓異步對象接收響應
    xhr.onreadystatechange = function(){
        // 一個成功的響應有兩個條件：1.服務器成功響應 2.數據解析完畢可以使用
        if(xhr.status == 200 && xhr.readyState == 4){
            // 接收響應的返回值
            // 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;
            }

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

},
post:function(){

}

}