原生ajax配置詳解

 // 原生ajax
    // 1. 創建ajax對象
    if(window.XMLHttpRequest){
        // //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        var xhr = new XMLHttpRequest()
    }else{
       // IE6, IE5 瀏覽器執行代碼
        var xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    // 2.連接服務器 open(方法，地址，異步傳輸)
    xhr.open(‘get‘,‘file:///d%3A/markown/index.html‘,true);
    
    // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 配置請求頭
    // setRequestHeader(header,value) 向請求添加 HTTP 頭。
            // header: 規定頭的名稱
            // value: 規定頭的值


    //3. 發送請求,如果使用的是post方法，則請求攜帶數據，在send中配置（僅post請求可用）
    xhr.send()

    
    // 4.接收返回，客戶端和服務器端有交互的時候會調用onreadystatechange
    xhr.onreadystatechange=function(){
        // xhr.readyState   瀏覽器和服務器進行到哪一步了。
        // 0 --(未初始化) ：還沒有調用open方法
        // 1 --(載入)     ：已調用send方法，正在發送請求
        // 2 --(載入完成)  ：send方法完成，已收到全部響應內容，
        // 3. --(正在解析) ：正在解析響應內容。
        // 4 --(完成)     ：響應內容解析完成，可以在客戶端使用
        if(xhr.readyState == 4){
            if(xhr.status== 200){
                // xhr.responseText  獲得字符串形式的響應數據。
                // xhr.responseXML      獲得 XML 形式的響應數據。
                console.log("請求成功，響應內容為" + xhr.responseText);
            }else{
                console.log("請求出錯！！！");
            }
        }
    }
 

對ajax簡單封裝

function ajax(methods,url,callBack,text) {
    if(window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        var xhr = new XMLHttpRequest()
    }else{
       // IE6, IE5 瀏覽器執行代碼
        var xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    // 給methods 一個默認值
    var methods = methods|| ‘get‘ ;
    xhr.open(methods,url,true);
    // 如果是get請求，直接調用send方法發送請求
    if (methods== ‘get‘){
        xhr.send();
    }
    // 如果是post請求，則可配置請求參數
    if (methods==‘post‘){
        xhr.send(text);
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4){
            if(xhr.status== 200){
                // 請求成功之後調用回調函數
                callBack(xhr.responseText);
            }else{
                let error = ‘錯誤碼‘ + xhr.status
                callBack(error);
            }
        }
    }
}
 

調用

ajax(‘get‘,‘file:///d%3A/markown/index.html‘,‘‘,function(result){
    console.log(result);
})

使用原生ajax及其簡單封裝