Ajax狀態(tài)碼的生成順序以及含義介紹
Ajax狀態(tài)碼:
在創(chuàng)建Ajax對象,配置Ajax對象,發(fā)送請求,以及接收完服務(wù)器響應(yīng)數(shù)據(jù),這個過程中的每一個步驟都會有一個數(shù)值,這個數(shù)值就是Ajax的狀態(tài)碼。
根據(jù)xhr.readystate獲取
0: 請求已經(jīng)未進(jìn)行初始化(未調(diào)用open方法)
1: 請求已經(jīng)建立,但是沒有發(fā)送(未調(diào)用send方法)
2: 請求已經(jīng)發(fā)送(已經(jīng)調(diào)用send方法)
3: 請求在正處理,通常響應(yīng)中已經(jīng)有部分?jǐn)?shù)據(jù)可以用了
4: 響應(yīng)已經(jīng)完成,可以獲取并使用服務(wù)了
Onreadystatechange事件,xhr.readystate值發(fā)生變化后,自動觸發(fā)
代碼案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style>
</style>
<body>
<script >
//1.創(chuàng)建Ajax對象
var xhr=new XMLHttpRequest();
console.log(xhr.readyState);//---0: 已經(jīng)創(chuàng)建了Ajax的對象,但是還沒有進(jìn)行對ajax進(jìn)行配置
//2.配置Ajax對象
xhr.open('get','http://localhost:3000/readyState');
console.log(xhr.readyState);//1:已經(jīng)對Ajax對象進(jìn)行配置,但是還沒有發(fā)送請求
//3.設(shè)置請求參數(shù)格式的類型(post中必須要進(jìn)行設(shè)置的)
xhr.setRequestHeader('Content-Type','application/json');//json固定格式
//4.發(fā)送請求
xhr.onreadystatechange=function(){
console.log(xhr.readyState);
// 2: 請求已經(jīng)發(fā)送
// 3: 已經(jīng)收到服務(wù)端的部分?jǐn)?shù)據(jù)
// 4: 服務(wù)器端的響應(yīng)數(shù)據(jù)已經(jīng)接收完畢
//對Ajax的狀態(tài)碼進(jìn)行判斷,如果狀態(tài)碼為4,代表數(shù)據(jù)已經(jīng)接收完畢,可以進(jìn)行獲取使用
if(xhr.readyState==4){
//5.獲取服務(wù)器端響應(yīng)的數(shù)據(jù)
console.log(xhr.responseText);
}
}
xhr.send();
</script>
</body>
</html>
<!--
Ajax狀態(tài)碼:
在創(chuàng)建Ajax對象,配置Ajax對象,發(fā)送請求,以及接收完服務(wù)器響應(yīng)數(shù)據(jù),這個過程中的每一個步驟都會有一個數(shù)值,這個數(shù)值就是Ajax的狀態(tài)碼。
根據(jù)xhr.readystate獲取
0: 請求已經(jīng)未進(jìn)行初始化(未調(diào)用open方法)
1: 請求已經(jīng)建立,但是沒有發(fā)送(未調(diào)用send方法)
2: 請求已經(jīng)發(fā)送(已經(jīng)調(diào)用send方法)
3: 請求在正處理,通常響應(yīng)中已經(jīng)有部分?jǐn)?shù)據(jù)可以用了
4: 響應(yīng)已經(jīng)完成,可以獲取并使用服務(wù)了
Onreadystatechange事件,xhr.readystate值發(fā)生變化后,自動觸發(fā)
-->到此這篇關(guān)于Ajax狀態(tài)碼的生成順序以及含義的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ECMAScript5(ES5)中bind方法使用小結(jié)
這篇文章主要介紹了ECMAScript5(ES5)中bind方法使用小結(jié),bind和call以及apply一樣,都是可以改變上下文的this指向的,需要的朋友可以參考下2015-05-05

