Ajax

Arno 發(fā)布于2019-08-20 17:49 / 2692人閱讀

摘要：原理客戶端通過對象向服務(wù)器發(fā)送異步請求，從服務(wù)器獲取數(shù)據(jù)，通過操作的對象來更新頁面。是，則返回狀態(tài)碼，客戶端從緩存中讀取數(shù)據(jù)。

原理

客戶端通過xmlHttpRequest對象向服務(wù)器發(fā)送異步請求，從服務(wù)器獲取數(shù)據(jù)，通過操作javascript的DOM對象來更新頁面。

實(shí)現(xiàn) 原生實(shí)現(xiàn)

function createXmlHttpRequest(){
    var xhr;
    if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr = new window.XMLHttpRequest();
    }else if(window.ActiveXObject){
       // code for IE6, IE5
        try{
            xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
         }catch(ex){
             xhr = new window.ActiveXObject("msxm12.XMLHTTP");
         }
    }
    return xhr;
}

function doGet(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}
function doPost(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}

Jquery封裝實(shí)現(xiàn)

var ajaxa = function(){
    //默認(rèn)參數(shù)
    var _options = {
        type: "GET",
        url: null,
        data: null,
        dataType: "jsopn",
        success: null,
        fail: null,
        async: true,
        contentType: "application/x-www-form-urlencoded"
    };
    
    return function(options){
        if(!options || !options.url){
            throw("參數(shù)異常");
        }
        
        var xhr = new (window.XMLHttpRequest||window.ActionXObject)("Mircosoft.xml);
        
        xhr.open(options.type, options.url, options.async);
        
        xhr.onreadystate.change = function(){
            if(xhr.raadySate = 4){
                if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
                    var text = xhr.responseText;
                    if(options.dataType == "json"){
                        text = JSON.parse(text);
                    }
                    if(typeof options.success === "function"){
                        options.success(text, xhr.status);
                    }
                }else{
                    if(typeof options.fail === "function"){
                        options.fail("failed", 500);
                    }    
                }
            }
        }
        xhr.setRequestHeader("content-type",options.contentType);
        xhr.send(options.data);
    }
}

readystate五種狀態(tài)

0 －（未初始化）還沒有調(diào)用send()方法
1 －（載入）已調(diào)用send()方法，正在發(fā)送請求
2 －（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 －（交互）正在解析響應(yīng)內(nèi)容
4 －（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

常見的MIME類型

MIME是描述消息內(nèi)容類型的因特網(wǎng)標(biāo)準(zhǔn)，能包含文本、圖像、音頻、視頻以及其他應(yīng)用程序?qū)Ｓ玫臄?shù)據(jù)。主要有五種，text、application、images、audio、video

響應(yīng)狀態(tài)碼304原理

客戶端發(fā)送條件驗(yàn)證請求，服務(wù)器端讀取If-Modified-Since和If-None-Match請求頭信息，來判斷客戶端緩存的資源是否是最新的。是，則返回304狀態(tài)碼，客戶端從緩存中讀取數(shù)據(jù)。