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 =  https://www.cnblogs.com/Joanna-9908/p/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]() : "";
            }
        }
    }
}

標籤：JavaScript

上一篇：理解 JavaScript 的 async/await

下一篇：js之中的異步