AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
常用于： 網(wǎng)頁局部更新

Ajax工作原理

解析原理

1. 創(chuàng)建XHR對象(由于現(xiàn)在IE5,IE6已不在使用，所以不做過多的判斷)
    let xhr = new XMLHttpRequest();

2. XHR的用法
    在使用XHR對象時，要調(diào)用的第一個方法open()， 接收3個參數(shù)： 要發(fā)送的請求類型（get、post 等）、請求的URL和表示是否異步的布爾值
    xhr.open("get","data.php",true);
    send()方法接收一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)，如果不需要通過請求主體發(fā)送數(shù)據(jù)，則必須傳入null
    xhr.send(null);

3. 調(diào)用send()后，請求就回被分到服務(wù)器。在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會自動填充XHR對象，相關(guān)屬性如下：
    1) responseText: 作為響應(yīng)主體被返回的文本
    2) respoonseXML: 如果響應(yīng)的內(nèi)容類型時xml,這個屬性中將保存包含的響應(yīng)數(shù)據(jù)的XML DOM 文檔
    3) status: 響應(yīng)的HTTP狀態(tài)
    4) statusText: HTTP狀態(tài)的說明

4. 但是在多數(shù)情況下我們會先檢查readyState屬性，該屬性表示請求/響應(yīng)過程的當(dāng)前活動階段
    0: 為初始化。尚未調(diào)用open()方法
    1: 啟動。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法
    2: 發(fā)送。已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)
    3: 接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
    4: 完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)在客戶端使用了
    只要readState屬性的值發(fā)生變化，都會觸發(fā)一次readystatechange事件

案例

<div class="box"></div>
<div class="tips" style="display: none">數(shù)據(jù)加載中...</div>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState==1){
        document.querySelector('.tips').style.display = 'block';
    }
    if (xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            document.querySelector('.box').innerText = xhr.responseText;
            document.querySelector('.tips').style.display = 'none';
        }else{
            console.log('error:' + xhr.status);
        }
    }
}
xhr.open('get', 'data02.php', true);
xhr.send(null);
</script>

服務(wù)器端

<?php

// 寫業(yè)務(wù)主體
sleep(2);  // 為了交互效果，睡2s
echo "success";

XHR 對象更好玩的屬性可以把XHR打印出來，逐個研究...