ajax中的onload和readychange區別
阿新 • • 發佈：2018-03-20
ntb XML stat img 自己 變化 value tel lis
先補個知識點：
readyState 狀態碼：
0:請求未初始化
1:服務器連接已建立
2:請求已接受
3:請求處理中
4:請求已完成，且響應已就緒
HTTP 狀態碼：
200 - 服務器成功返回網頁
404 - 請求的網頁不存在
503 - 服務器暫時不可用
首先在自己目錄下建立一個ajaxText.txt用來測試，ajax必須要服務器裏面執行，我當前是在apach本地服務器測試的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<button id="btn" value="請求數據">請求數據</button>
<p id="c"></p>
<body>
<!-- open(type, url/file,async) -->
<script type="text/javascript">
let btnRequest
console：
onreadystatechange()的定義是只要返回的狀態碼只要變化時就回調一次函數，而onload只有狀態碼為4時才能回調一次函數。
這邊提下onprogress()，也就是當狀態碼為3時，會執行這個函數。
當服務器正常的話基本上都會返回readyState 狀態碼0~4，但是不一定請求得到數據，所以有個http狀態碼來判斷。
xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200) { console.log(`請求成功並返回數據${this.responseText}`); } }
在onload（）裏面也是一樣，這裏的邏輯根據情況來寫。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<button id="btn">請求數據</button>
<p id="c"></p>
<body>
<!-- open(type, url/file,async) -->
<script type="text/javascript">
let btnRequest = document.getElementById(‘btn‘);
btnRequest.addEventListener(‘click‘, load, false);
function load() {
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘, ‘ajaxTest.txt‘,true);
//兩種方式請求 onload / onreadystatechange
// xhr.onload = function(){
// if (xhr.status == 200)
// {
// console.log(`請求成功並返回數據${this.responseText}`);
// }
// else{
// console.log(`請求不成功`);
// }
//// console.log(`onload 狀態碼${xhr.readyState}`);
//// console.log(`這是onload函數請求的文本:${this.responseText}`);
// }
//當state狀態發生改變時回調一次後面的匿名函數
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200)
{
let p = document.createElement("p");
p.innerHTML = this.responseText;
document.body.appendChild(p);
console.log(`請求成功並返回數據${this.responseText}`);
}
}
xhr.send();
}
</script>
</body>
</html>
ajax中的onload和readychange區別