原生Ajax的使用——含開放API接口

看了兩天關於Ajax的使用，總感覺雲里霧里的。

故在此總結梳理一下，如果疏漏錯誤還請糾正支出。

 

Ajax能夠在向服務器請求額外的數據時，不必重新加載/卸載整個頁面，實現一小塊區域性的刷新，也是常說的異步更新。

它的核心是XMLHttpRequest對象（簡稱XMR對象）。

 

 

從對服務器的請求到接受返回來的數據，可以從上圖簡單先了解一下。

 

第一步，先新建一個XHR對象

//這里新建一個XHR對象

var xhr;

//如果你想兼容IE5的瀏覽器,那你必須先判斷
if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest(); //比較常用的
} else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE的寫法
}

 

第二步，調用XHR對象的方法open()來初始化

open(); 有三個參數

第一個是method，請求的方式： "POST,GET..." 這兩個比較常用

第二個是請求的URL，可以是絕對路徑或者相對路徑，當要遵循同域原則

第三個是true和false，true表示異步請求，false是同步請求。默認是true； 

 

xhr.open("GET","example.php",true);
//這里只是初始化請求條件！並未發送請求

//這里發送了一次請求。
//send();可以發送數據，但如果不，建議傳入null，以便一些瀏覽器報錯；

xhr.send(null);

 

第三步，發送完請求然后呢？判斷請求失敗了還是成功了。

xhr有這樣一個屬性；

xhr.status;

存儲着響應的HTTP狀態

如果它的值是200，表示請求成功。

如果它的值為304 表示請求的資源並沒有被修改，可以直接使用瀏覽器中緩存的版本；

 

xhr.status; 

//因為有的瀏覽器會錯誤報告204狀態代碼
if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
　　console.log("請求成功");
　　alert(xhr.responseText); // 彈出請求到的數據
} else {
　　alert(xhr.status); //請求失敗，彈出失敗的狀態 
}

 

到此為止，以上是可以成功發送同步請求的。

但問題來了，我們是發送異步請求，讓JS代碼繼續執行不必等待響應。

還有一個屬性

XHR對象的readyState；五個值

0：未初始化，未調用open();

1：啟動，但並未發送請求；

2：發送，已經發送請求；

3：接受，已經接受到部分響應數據；

4：完成所有數據的接受，並可以在客戶端使用了。

只要readyState屬性的值變成另外一個值，就會觸發readystatechange事件。

 

我們來利用這個事件做操作

xhr.onreadystatechange = function() {
　　if (xhr.readyState == 4) { //說明可以使用了
　　　　if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
　　　　　　alert(xhr.responseText);
　　　　} else {
　　　　　　alert("請求失敗了呢");　　
　　　　}
　　}
}

 

完整代碼

var xhr;

//因為有的瀏覽器會錯誤報告204狀態代碼

if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest(); //比較常用的
} else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE的寫法
}

xhr.onreadystatechange = function() {
　　if (xhr.readyState == 4) { //說明可以使用了
　　　　if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
　　　　　　alert(xhr.responseText);
　　　　} else {
　　　　　　alert("請求失敗了呢");　　
　　　　}
　　}
}

xhr.open("GET","example.php",true);

xhr.send(null);

　

在做Ajax的實驗時，找到一個老哥分享的接口，可以拿來練練手；

在此，也感謝這位老哥分享的文章！

 

免費開放接口API-https://blog.csdn.net/c__chao/article/details/78573737