Ajax 兩種請求方式的區別onload和onreadystatechange

一. onreadystatechange

1. XMLHttpRequest對象有一個屬性readyState，將其(xhr.readyState)打印后發現。進入onreadystatechange請求方式中時，可以打印其狀態為2，狀態為3，狀態為4。

<button id="btn">請求純文本</button> <script> let btn = document.getElementById('btn'); btn.addEventListener("click",loadText); function loadText(){ let xhr = new XMLHttpRequest(); xhr.open('GET','sample.txt',true); xhr.onreadystatechange = function(){ console.log("READYSTATE"+ xhr.readyState); console.log(this.responseText); } xhr.send(); } </script> 

 

 

2. readyState狀態碼和HTTP狀態碼

 

 

• 如果在上方代碼中的open方法下，打印readyState屬性，可得到狀態碼1

3. 可以利用網絡請求碼和readyState狀態碼進行判斷

• 當網絡請求碼為200（服務器成功返回網頁），readyState狀態碼為4時（請求已完成，響應已就緒），方可打印請求的數據。如圖，在readyState狀態碼3的情況下不會再打印請求返回的數據。

function loadText(){ let xhr = new XMLHttpRequest(); xhr.open('GET','sample.txt',true); console.log("READYSTATE"+ xhr.readyState); xhr.onreadystatechange = function(){ console.log("READYSTATE"+ xhr.readyState); if(this.status == 200 && this.readyState == 4){ console.log(this.responseText); }else if(this.status == 404){ console.log("網頁不存在"); } } xhr.send(); } 

 

 

4. 如果此時將open中的路徑改為一個錯誤路徑，會產生如下效果

 

 

二. onload

1. 進入onload之后，只出現了狀態碼4。也就是說，只有處於狀態碼4，請求已完成，響應已就緒的情況下，才會進入onload。只要進入onload請求中，一定是已經到4這個狀態了。

 function loadText(){ let xhr = new XMLHttpRequest(); xhr.open('GET','sample.txt',true); console.log("READYSTATE"+ xhr.readyState); //兩種請求方式onload和onreadystatechange xhr.onload = function(){ console.log("READYSTATE"+ xhr.readyState); console.log(this.responseText); } xhr.send(); } 

 

 

2. 此時如果修改open中的路徑為錯誤路徑的話，會出現如下狀況。仍然會打印1和4，證明已經進入onload請求狀態。這里報錯的原因是，HTTP狀態碼不是200。

 

 

3. 實現頁面尚未加載完成使，加載頁面的實現（eg：進度條或轉圈）。可用onprogress方法，打印readyState出現狀態3

function loadText(){ let xhr = new XMLHttpRequest(); xhr.open('GET','sample.txt',true); console.log("READYSTATE"+ xhr.readyState); //兩種請求方式onload和onreadystatechange xhr.onprogress = function(){ console.log("測試加載狀態READYSTATE"+ xhr.readyState); } xhr.onload = function(){ console.log("READYSTATE"+ xhr.readyState); console.log(this.responseText); } xhr.send(); } 

 

 

三. 將請求到的純文本附在dom中

xhr.onload = function(){ document.getElementById('text').innerHTML = this.responseText; } 

 

 

 

 

3人點贊

 

日記本

 

 

作者：祝名
鏈接：https://www.jianshu.com/p/f914c9c8f4e7
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。