Ajax-原生JS中的Ajax-有解無憂

概述

AJAX是異步的JavaScript和XML（Asynchronous JavaScript And XML），簡單點說，就是使用 XMLHttpRequest 物件與服務器通信，它可以使用JSON，XML，HTML和text文本等格式發送和接收資料，AJAX最吸引人的就是它的“異步”特性，也就是說他可以在不重新重繪頁面的情況下與服務器通信，交換資料，或更新頁面，

你可以使用AJAX最主要的兩個特性做下列事：

在不重新加載頁面的情況下發送請求給服務器，
接受并使用從服務器發來的資料，

快速上手

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // ie7+等現代瀏覽器
} else if (window.ActiveXObject) { // ie6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP');
}
xhr.open('get', 'db.json', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {
        /* 
        readyState 請求的當前狀態
        status     回應碼
        */
        xhr.responseText;
        JSON.parse(xhr.responseText);
    }
}
xhr.send();

發送HTTP請求具體步驟

1.創建一個異步呼叫物件xhr

var xhr = null; // 創建異步物件
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // ie7+等現代瀏覽器
} else if (window.ActiveXObject) { // ie6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP');
}

2.初始化一個請求

xhr.open()宣告當你接到回應后要做什么，你要發送一個實際的請求，通過呼叫HTTP請求物件的 open() 和 send() 方法，像下面這樣:

xhr.open('GET', 'db.json', true);

第一個引數是HTTP請求方法，有GET，POST，HEAD以及服務器支持的其他方法，保證這些方法一定要是大寫字母，否則其他一些瀏覽器（比如FireFox）可能無法處理這個請求，
第二個引數是你要發送的URL，由于安全原因，默認不能呼叫第三方URL域名，確保你在頁面中使用的是正確的域名，否則在呼叫 open() 方法是會有 “權限被拒絕” 錯誤提示，一個容易犯的錯誤是你企圖通過 domain.tld 訪問網站，而不是使用 www.domain.tld，如果你真的需要向另一個域名發送請求, 可以查看 HTTP access control，
第三個引數是可選的，用于設定請求是否是異步的，如果設為 true (默認設定)，JavaScript執行會持續，并且在服務器還沒有回應的情況下與頁面進行互動，

如果是GET請求，可以將查詢字串引數追加到URL的末尾，以便將資訊發送給服務器，

如果是POST請求的話，要設定請求頭的值，且查詢字串應該用服務器可以決議的格式

3.設定http請求頭的值

xhr.setRequestsHeader()如果你使用 POST 資料，必須設定，且請求報文中請求頭的Content-Type應該跟隨請求體格式的變化而變化

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('key1=value1&key2=value2');

xhr.setRequestHeader('Content-Type', 'application/json');
httpRequest.send('{"foo":"123"}');

4.發送請求

xhr.send()引數可以是任何你想發送給服務器的內容，

如果是POST請求的話，發送表單資料時應該用服務器可以決議的格式，且一定要設定請求頭，像查詢陳述句：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
//或者其他格式, 類似 multipart/form-data，JSON，XML等，

處理服務器回應

xhr.onreadystatechange

這一步只在你發起異步請求時有效（既 open() 的第三個引數未特別指定或設為 true），只要readyState屬性的值由一個值變成另一個，都會觸發一次readystatechange事件，

如果你發起的是同步請求則不必使用函式，但是非常不推薦這樣子做，它的用戶體驗很糟糕，

xhr.onreadystatechange = function () { // 若為同步，此代碼不用寫，直接在send后，用`xhr.responseText`即可，
    if (xhr.readyState == 4 && xhr.status == 200) {
       //在檢查完請求狀態和HTTP回應碼后， 你就可以用服務器回傳的資料做任何你想做的了
        xhr.responseText;
        JSON.parse(xhr.responseText);
    }
}

xhr.readyState請求狀態

狀態	名	解釋
0：未初始化	UNSENT	尚未呼叫open()方法
1：啟動	OPENED	已經呼叫open()方法，已建立服務器連接，但尚未呼叫send()方法
2：發送	HEADERS_RESPONSE	已經呼叫send()方法，請求已接受，但尚未接受到回應拿不到回應體(responseText)，此時可以拿到頭.getAllResponseHeaders()
3：接收	LOADING	已經接收到部分回應資料
4：完成	DONE	已經接收到全部回應資料，而且可以在客戶端使用

xhr.status回應碼

查看MDN中HTTP回應碼

xhr.responseText

服務器以文本字符的形式回傳

xhr.responseXML

以 XMLDocument 物件方式回傳，之后就可以使用JavaScript來處理

本文鏈接集

跨域問題 HTTP access control

HTTP所有回應碼 MDN

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145746.html

標籤：JavaScript

上一篇：js中的原型物件/prototype

下一篇：webpack配置中環境變數-process.env. NODE_ENV