原生的Ajax實現步驟

1.原生js中的構造函數XMLHTTPRequest()構造實例；

考慮兼容問題： if(window.XMLHttpRequest){var xhr = new XMLHTTPRequest(); }else{var xhr = new ActiveXObject(); } 復制代碼

2.實例化為對象后，要創建一個請求，準備好一個請求的發射窗口狀態；

xhr.open("get/post", "請求地址", true); 復制代碼

3.send方法發出請求，參數是發送的報文體，get方法時報文體為空null，post方法才有內容；

xhr.send(null); 復制代碼

4.JS中需要監聽數據什么時候回來的機制，使用一個事件監聽就緒狀態，當xhr的狀態改變是觸發；

xhr.onreadystatechange = function(){if(xhr.readyState == 4){//xhr的readyState有5個數值，表示不同狀態，4表示接受文件完成，{}內表示接受完成之后執行的操作document.getElementById().innerHTML = xhr.responseText;} } 復制代碼

狀態的監聽要放在創建實例對象和open調用之間，確切的說添加事件應該是第二步，

• readyState的屬性值：

  0: 未初始化，此時XMLHTTPRequest對象已經創建，還沒有調用open();

  1: 已經創建請求，調用open函數，但是還沒有調用send發送；

  2: 請求已經發送，正在處理中，此時已經接受了response的報文頭部；

  3: 請求處理中，此時已經接收了部分報文體，response中的部分數據已經可以使用；

  4: 響應完成，可以使用報文的全部信息。

• 注意：為了防止緩存(304)，調用open時，在第二個參數請求地址后添加一個隨機數，保證每次訪問的地址不同，避免因為緩存導致請求的文件發生改變，而頁面并未隨之改變(因為使用了緩存的數據)。

xhr.open("get", "demo/demo.txt?" + Math.random(), true); 復制代碼

post請求和get請求的區別

xhr.open("post", "請求文件", true);//設置請求頭部發送時的文本格式，因為post方法只能通過表單格式發送 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//send方法中的參數是報文體，而post方法傳遞是通過報文體，調用send方法傳遞的參數是以kv對形式的字符串，類似query string xhr.send("k=v&k=v"); 復制代碼

原生的post是將傳遞的參數放到send()中以form data形式傳遞，而原生的get方法是將數據放到第二個參數的路徑?后面，以查詢字符串的形式傳遞，這和jQuery的傳遞方法不同，jQuery中的$.get()和$.post()都是通過第二個參數以json的形式傳遞到接口頁面的。 在接口頁面中，比如PHP頁面中，獲取傳遞的數據方法

$getdata = $_GET["k值"]； $postdata = $_POST["k值"]； 復制代碼

但是通常參數是以json形式傳遞的，如何將json對象轉換為鍵值對形式的字符串？

var data = {"names": "Tom","age": 19,"sex": "男" }//封裝一個格式轉換函數 function changeToString(JSON){var tempArr = [];for(var k in JSON){//url只允許英文、數字和特殊字符，當有中文或其他國家語言出現時，要通過uri(統一資源標識符)來轉換tempArr.push(k + "=" + encodeURIComponent(JSON[k]));}return temp.join("&"); }//調用函數轉換格式 xhr.send(changeToString(data)); 復制代碼

那么從后臺發送來的數據，前端并不知道數據是什么格式，也就不能直接拿來就使用，要先進行判斷：

如果負責的后臺在接口文件中將數組轉換為json對象再發回前端，那么前端只要做判斷就可以了。

<?php//header('Content-type: application/json');$arr = array(...);//json_encode將數組變為json對象形式echo json_encode($arr); ?> 復制代碼

• 判斷方法一：使用JSON.parse()方法將字符串轉換為json對象，但是有兼容問題存在，IE6，7，8不兼容這個方法。

使用jQuery的get方法 $.get("data.php", function(data){//data是從后臺傳回的response數據，要先判斷是JSON對象還是JSON對象形式的字符串var dataObj = typeof data == "object" ? data : JSON.parse(data); }) 復制代碼

• 判斷方法二：使用eval()方法，沒有兼容問題，eval()可以將str變成執行語句，但是轉換對象形式的字符串要注意，字符串外面必須加括號。

var dataObj = typeof data == "object" ? data : eval("("+ data +")"); 復制代碼

• 判斷方法三：使用內置構造函數Function(), 通過構造函數new的實例立即執行返回json對象。

var dataObj = typeof data == "object" ? data : (new Function("return" + data))(); 復制代碼

構造函數的參數當有多個時，最后一個為執行語句，前面的都是參數，而當只有一個時，這個參數就是執行語句，立即調用執行可以直接返回。

原生的Ajax可能在平時用到并不多，因為有像jQuery這些提供了更方便的方法，但還是要知道是怎樣實現的。Ajax另一個重要的概念是跨域的問題，等學完再專門寫一篇跨域的小結。

轉載于:https://juejin.im/post/5a50e3f9518825733c13df3a

總結

以上是生活随笔為你收集整理的原生的Ajax实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。