Ajax的原理及封裝

瞭解Ajax

• 就是js這個語言和服務端交互的手段
• 無刷新的頁面請求處理
• 區分表單提交
  

Ajax
即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種創建互動式、快速動態網頁應用的網頁開發技術，無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
通過在後臺與伺服器進行少量數據交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

發送一個Ajax請求

四個步驟：

1. 創建ajax對象

var xhr = new XMLHttpRequest();

2. 配置請求信息

xhr.open('GET','./01_data.php',true);
//xhr.open("請求方式","請求地址")
//請求地址： 相對路徑
//          絕對路徑  http://  https:// ===> 開發中比較常用的方式

3. 發送請求

xhr.send(null);

4. 接受響應

// 用事件接收 level1 => 原始版本的ajax  ,  level2 => 進階版本的ajax
// readystate  ajax狀態碼 
// change 改變
// 事件可能觸發 3-4 次
// 狀態碼有5個  0 1 2 3 4
// 4表示成功
xhr.onreadystatechange = function(){
    // 只要判定狀態即可，其他的情況不考慮
    if( xhr.readyState === 4){
        console.log(xhr.responseText)
    }
}

Ajax狀態碼

Ajax的狀態碼 有5個 : 0 1 2 3 4

• 0:創建ajax對象成功
• 1:配置請求信息成功
• 2:響應已經回到瀏覽器
• 3:瀏覽器正在解析響應體
• 4:響應體解析完畢可以使用了

Ajax的相容處理

• 1.創建ajax對象

var xhr = null;
    if(typeof XMLHttpRequest === "function"){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

• 2.發送請求

xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
            console.log(xhr.responseText);
        }
    }

封裝Ajax操作

ajax是非同步程式,我們什麼時候可以使用ajax載入回來的數據?

// ajax 相容性良好的封裝;
function ajax( options ){
    // 預設參數;
    var _default = {
        type : "GET",
        url : "",
        data : null,
        // 返回的數據類型;
        dataType : "text",
        status : null,
        success : function(){},
        complete : function(){},
        error : function(){}
    }
    // 我們會創建一些預設參數, 如果用戶傳入了其他數據會對預設參數進行覆蓋;
    options = assign( _default , options );
    options.type = options.type.toLowerCase();
    // 如果存在context;
    if( isObject(options.context) ){
        var callback_list = ["success","complete","error"];
        // 如果老版本瀏覽器更新成for迴圈;
        callback_list.forEach( function( item ){
            // console.log(options[item]);
            options[item] = options[item].bind( options.context );
        })
    }
    // 1. 創建xhr ;
    
    //創建ajax對象的相容
    var xhr = null;
    if(typeof XMLHttpRequest === "function"){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    // 可以簡化;
    // 1. 如果請求方式為get，那麼我們把數據拼接到url上;
    if(options.type === "get"){
        options.url =  toUrlData( options.data , options.url , options.type)
    }
    // 2. 如果請求方式為post，那麼我們把數據拼接到data上;
    if(options.type === "post"){
        options.data =  toUrlData( options.data , options.url , options.type)
    }
    
    // 2. 根據數據進行方法的調用;
    xhr.open( options.type , options.url , true ) ;
    options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
    // 3. 調用send方法;
    xhr.send( options.type=== "get" ? null : options.data );
    // 4. 調用回調函數;
    xhr.onreadystatechange = function(){
        // xhr程式運行結束;
        if( xhr.readyState === 4 ){
            options.complete();
            
            if( /^2\d{2}$/.test(xhr.status) ){
                // 5.傳遞數據
                // 如果需要轉換成json那麼我們就返回json,如果不需要原樣返回;
                // 如果JSON.parse報錯了那麼我們要調用錯誤函數;
                try{
                    var res = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText; 
                    options.success(res);
                }catch(e){
                    options.error(e,xhr.status);
                }
            }else{
                options.error("error",xhr.status);
            }
            // 策略模式調用 : 
            if( isObject(options.status) ){
                typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
            }
        }
    }
}