快速上手Ajax【一篇文章就搞懂】

目錄：

• 1.什麼是 AJAX ？
• 2.快速上手
• 2.1 AJAX工做流程圖
• 2.2 readyState 和status
• 3. 具體用法
• 3.1 GET 請求
• 3.2. POST 請求
• 3.3選擇GET仍是POST？
• 3.4 同步與異步

 

1.什麼是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

而傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。

AJAX它使咱們能夠經過 JavaScript 直接獲取服務端最新的內容而沒必要從新加載
頁面。讓 Web 更能接近桌面應用的用戶體驗。

說白了，AJAX 就是瀏覽器提供的一套 API，咱們能夠經過 JavaScript 調用，從而實現經過代碼控制請求與響應。實現網絡編程。

2.快速上手

使用Ajax是很是容易的，咱們能夠類比咱們平時使用瀏覽器同樣，通常須要 4個步驟就能夠獲取到後端響應過來的內容。

//步驟1： 建立一個 XMLHttpRequest 類型的對象 ———— 至關於咱們平時打開一個瀏覽器
var xhr = new XMLHttpRequest();
//步驟2:  open打開一個與網址之間的聯繫 ———— 至關於在地址欄輸入網址訪問
xhr.open('GET','./time.php');
//步驟3:  send經過鏈接發送一次請求 ———— 至關於回車或者點擊訪問發送請求
xhr.send(null);
//步驟4:  指定 xhr 狀態發生變化的時候的處理函數 ———— 至關於處理網頁呈現後的操做 
xhr.onreadystatechange = function () {
// 經過 xhr 的 readyState 判斷這次請求的響應是否接收完成
    if (xhr.readyState === 4 && xhr.status=== 200) { //若是是請求已完成，而且響應已就緒
    // 經過 xhr 的 responseText 獲取到響應的響應體
    console.log(this)
    }
}

 

 

這樣就完成Ajax的所有操做啦。

2.1 AJAX工做流程圖

2.2 readyState 和status

因爲 readystatechange 事件是在 xhr 對象狀態變化時觸發（不單是在獲得響應時），也就意味着這個事件會被觸發屢次，因此咱們有必要了解每個狀態值表明的含義：

註釋：onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化。

經過了解每個狀態值的含義，咱們能夠得出，在readyState等於4的時候就已經完成請求了，因此咱們通常都會進行判斷是否等於4，這樣才能完整得拿到響應內容。

3. 具體用法

3.1 GET 請求

一般在一次 GET 請求過程當中，參數傳遞都是經過 URL 地址中的 ? 參數傳遞。

var xhr = new XMLHttpRequest()
// GET 請求傳遞參數一般使用的是問號傳參
// 這裏能夠在請求地址後面加上參數，從而傳遞數據到服務端
xhr.open('GET', './delete.php?id=1')
// 通常在 GET 請求時無需設置響應體，能夠傳 null 或者乾脆不傳
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4 && status === 200) {
console.log(this.responseText)
}
}
// 通常狀況下 URL 傳遞的都是參數性質的數據，而 POST 通常都是業務數據

 

 

3.2. POST 請求

POST 請求過程當中，都是採用請求體承載須要提交的數據.

var xhr = new XMLHttpRequest()
// open 方法的第一個參數的做用就是設置請求的 method
xhr.open('POST', './add.php')
// 設置請求頭中的 Content‐Type 爲 application/x‐www‐form‐urlencoded
// 標識這次請求的請求體格式爲 urlencoded 以便於服務端接收數據
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 須要提交到服務端的數據能夠經過 send 方法的參數傳遞
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

 

3.3選擇GET仍是POST？

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

1. 沒法使用緩存文件（更新服務器上的文件或數據庫）
2. 向服務器發送大量數據（POST 沒有數據量限制）
3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

3.4 同步與異步

在open方法中有三個參數，其中第3個參數就是設置Ajax是經過異步進行請求仍是同步請求，它是一個bool值，不填寫時，默認爲true。採用異步方式執行。若是須要同步執行能夠經過傳遞 false 實現。

那到底什麼是同步仍是異步呢？咱們經過生活的小例子進行講解。

同步：當你排隊去買彩票時候，你就只能排隊買彩票，中途不能作其它的事情，只能幹愣着，等待完成才能執行下一步。

異步：在你買彩票排隊的時候，你能夠去作一些其它的事情，好比玩手機，玩遊戲，而不是等待

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默認第三個參數爲 true 意味着採用異步方式執行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 這裏的代碼最後執行
    console.log('request done')
    }
}
console.log('after ajax')

 

 

若是採用同步方式執行，則代碼會卡死在 xhr.send() 這一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 執行須要 先註冊事件再調用 send，不然 readystatechange 沒法觸發
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 這裏的代碼最後執行
    console.log('request done')
    }
}
xhr.send(null)
console.log('after ajax')

 

不推薦使用 async=false，可是對於一些小型的請求，也是能夠的。

請記住，JavaScript 會等到服務器響應就緒才繼續執行。若是服務器繁忙或緩慢，應用程序會掛起或中止。

當您使用 async=false 時，必定在發送請求 send() 以前註冊 readystatechange （無論同步或者異步）——— 爲了讓這個事件能夠更加可靠（必定觸發），必定是先註冊！

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;