Ajax狀態(tài)碼的生成順序以及含義介紹
Ajax狀態(tài)碼:
在創(chuàng)建Ajax對象,配置Ajax對象,發(fā)送請求,以及接收完服務(wù)器響應(yīng)數(shù)據(jù),這個(gè)過程中的每一個(gè)步驟都會有一個(gè)數(shù)值,這個(gè)數(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ù),這個(gè)過程中的每一個(gè)步驟都會有一個(gè)數(shù)值,這個(gè)數(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