readyState和status屬性是什么以及AJAX怎樣接收服務(wù)器返回的數(shù)據(jù)

readyState和status屬性是什么以及AJAX怎樣接收服務(wù)器返回的數(shù)據(jù)，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

　　在講解如何接收服務(wù)器數(shù)據(jù)之前，先來看一下 XMLHttpRequest 對(duì)象的 readyState 和 status 屬性。下面億速云小編來講解下readyState 和 status 屬性是什么?AJAX怎樣接收服務(wù)器返回的數(shù)據(jù)?

　　readyState 和 status 屬性是什么

　　readyState 屬性保存有 XMLHttpRequest 對(duì)象的交互狀態(tài)，從 0 到 4 變化：

　　0 ：未初始化(還沒有調(diào)用send()方法);

　　1：載入(已調(diào)用send()方法，正在發(fā)送請(qǐng)求);

　　2：載入完成(send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)數(shù)據(jù));

　　3：交互(正在解析響應(yīng)數(shù)據(jù));

　　4：完成(響應(yīng)數(shù)據(jù)解析完成，可以在客戶端調(diào)用了)。

　　status 屬性保存有 XMLHttpRequest 對(duì)象與后臺(tái)交互時(shí)服務(wù)器返回的一個(gè)狀態(tài)碼。例如：

　　200：OK，請(qǐng)求發(fā)送成功;

　　404：未找到頁面。

　　查看完整的 status 狀態(tài)碼：Ajax status 狀態(tài)對(duì)照表

　　注意：readyState 和 status 的含義不同，readyState 是XMLHttpRequest 對(duì)象的交互狀態(tài)，共有 5 個(gè)狀態(tài)，與服務(wù)器無關(guān);status 是服務(wù)器返回的一個(gè)狀態(tài)碼，表示服務(wù)器的響應(yīng)結(jié)果，例如，200 表示服務(wù)器響應(yīng)成功，404 表示請(qǐng)求的文件在服務(wù)器上不存在。

　　AJAX 請(qǐng)求成功，xmlhttp.readyState=4，xmlhttp.statue=200，代碼：

　　if (xmlhttp.readyState==4 && xmlhttp.status==200){

　　// AJAX 請(qǐng)求成功，處理響應(yīng)數(shù)據(jù)

　　}

　　事件句柄 onreadystatechange

　　onreadystatechange 是一個(gè)事件句柄，存儲(chǔ)函數(shù)(或函數(shù)名)，每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。

　　當(dāng)發(fā)送一個(gè) AJAX 請(qǐng)求后，客戶端無法確定請(qǐng)求何時(shí)完成，所以需要用事件機(jī)制來捕獲請(qǐng)求的狀態(tài)，即 readyState 的值，onreadyStateChange 實(shí)現(xiàn)了這一功能。

　　如下代碼所示：

　　xmlhttp.onreadystatechange=function(){

　　// 每次改變 readyState，都會(huì)調(diào)用該方法

　　if (xmlhttp.readyState==4 && xmlhttp.status==200){

　　// AJAX 請(qǐng)求成功，處理響應(yīng)數(shù)據(jù)

　　}

　　}

　　AJAX怎樣接收服務(wù)器返回的數(shù)據(jù)

　　接收來自服務(wù)器的響應(yīng)數(shù)據(jù)，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

　　屬性 描述

　　responseText 將響應(yīng)數(shù)據(jù)作為字符串解析。

　　responseXML 將響應(yīng)數(shù)據(jù)作為 XML 解析。

　　例如，將服務(wù)器返回的數(shù)據(jù)更新到 id="demo" 的節(jié)點(diǎn)：

　　?

　　1

　　document.getElementById("demo").innerHTML=xmlhttp.responseText ;

　　注意：服務(wù)器返回的數(shù)據(jù)一般作為字符串來解析，很少作為 XML 來解析，這里不再講述 responseXML 。

　　到此，我們終于可以實(shí)現(xiàn)一個(gè)完整的 AJAX 請(qǐng)求了。

　　下面的代碼展示了如何獲取客戶端 IP 地址：

　　script type="text/javascript">

　　var xmlhttp;

　　// 創(chuàng)建 XMLHttpRequest 對(duì)象

　　try{

　　// code for IE7+, Firefox, Chrome, Opera, Safari

　　xmlhttp=new XMLHttpRequest();

　　}catch(e){

　　// code for IE6, IE5

　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

　　}

　　xmlhttp.onreadystatechange=function(){

　　if (xmlhttp.readyState==4 && xmlhttp.status==200){ // 響應(yīng)成功

　　document.getElementById("demo").innerHTML=xmlhttp.responseText;

　　}

　　}

　　xmlhttp.open("POST","/demo/javascript/ajax/ajaxDemo.php?action=getIP",true);

　　xmlhttp.send();

　　/script>

　　注意：onreadystatechange 需要在請(qǐng)求發(fā)送之前設(shè)定，編寫代碼時(shí)，要寫在 open() 和 send() 之前。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。