• 前言：ajax的神奇之處在於JavaScript 可在不重載頁面的情況與 Web 服務器交換數據，即在不需要刷新頁面的情況下，就可以產生局部刷新的效果。Ajax 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），當然也可同步，這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。Ajax使我們的項目更小、更快，更友好，在前端開發有很高的地位，也是面試題的熱點。

• 註：本次測試是在localhost本地環境。

  1、原生ajax

• html前端代碼get請求方式

        var xhr = new XMLHttpRequest()   //創建一個ajax實例xhr
        xhr.open("GET","js/text.js",true)     //這裏傳入三個參數，第一個是請求方式（一般為get和post），第二個參數是請求地址，第三個布爾值，true代表異步，false代表同步
        xhr.send()                                      //發送數據（get用不上，get發送的數據一般在鏈接後面，形式為鍵值對）
        xhr.onreadystatechange = function(){      //綁定監聽函數
            if(xhr.readyState === 4&& xhr.status === 200){   //判斷返回狀態碼
                var data = xhr.responseText    //請求返回的數據
                var datas = JSON.parse(data)    //因為數據傳過來是字符串，這裏把它變成對象
                console.log(datas)   //輸出對象
            }
        }
        
 

• 控制臺輸出
  
• html前端代碼post請求方式

        var xhr = new XMLHttpRequest()   //創建一個ajax實例xhr
        xhr.open("POST","js/text.js",true)     //方式變為POST
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //設置頭部信息，放在open方法下面
        xhr.send()                                      //發送數據如果發送數據，可以寫在這裏面
        xhr.onreadystatechange = function(){      //綁定監聽函數
            if(xhr.readyState === 4&& xhr.status === 200){   //判斷返回狀態碼
                var data = xhr.responseText    //請求返回的數據
                var datas = JSON.parse(data)    //因為數據傳過來是字符串，這裏把它變成對象
                console.log(datas)   //輸出對象
            }
        }
 

• 控制臺輸出
  
• 被請求js代碼

{
    "name":"小明",
    "age":24,
    "array":[1,51,3,4,4,6,64]
}

2、函數封裝

• 前端JS代碼

            function Ajax(type, url, data, success){
           
            var xhr = null;   // 初始化xhr
            if(window.XMLHttpRequest){    //兼容IE
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP')
            }
         
            var type = type.toUpperCase();
           
            var random = Math.random(); //創建隨機數
         
            if(type == 'GET'){
                if(data){
                    xhr.open('GET', url + '?' + data, true);  //如果有數據就拼接
                } else {
                    xhr.open('GET', url + '?t=' + random, true);  //如果沒有數據就隨便
                }
                xhr.send();
         
            } else if(type == 'POST'){
                xhr.open('POST', url, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(data);
            }
         
            
            xhr.onreadystatechange = function(){     // 創建監聽函數
                if(xhr.readyState == 4&&xhr.status == 200){
                        success(xhr.responseText);
                    } 
                }
        }
         
        Ajax('get', 'js/text.js', "", function(data){   //調用函數
            console.log(JSON.parse(data));
        });
 

• 被請求js代碼

{
    "name":"小明",
    "age":24,
    "array":[1,51,3,4,4,6,64]
}

• 控制臺輸出
  

  3、Jquery中的Ajax（先引入Jquery）

• 前端簡單的JS代碼

$.ajax({
            url:"./js/text.js",    //請求地址
            type:"GET",       //請求方式
            dataType:"json",   //請求數據類型
            success:function(data){   //成功調用方法
                console.log(data)
            },
            error:function(res){    //失敗調用方法
                console.log("請求失敗！")
            }
        })

• 被請求js代碼

{
    "name":"小明",
    "age":24,
    "array":[1,51,3,4,4,6,64]
}

• 控制臺輸出

• 如有不對之處，請大家多多指正，謝謝！

JavaScript原生封裝ajax請求和Jquery中的ajax請求，內附詳細案例和註釋！