快捷導(dǎo)航

document.onreadystatechange事件的用法分析

更新時(shí)間：2009年10月17日 17:00:19 作者：

這里主要介紹document.onreadystatechange事件的使用方法，一般多用于實(shí)時(shí)監(jiān)控用戶的輸入

這兩天，正在給部門的一個(gè)項(xiàng)目做優(yōu)化，其中一項(xiàng)是將web應(yīng)用中的所有alert用div方式實(shí)現(xiàn)，javascript的相關(guān)方法都寫好了，方法名為showDialog，前臺(tái)頁(yè)面調(diào)用showDialog方法一點(diǎn)也沒有問題，可是頁(yè)面一旦提交，從后臺(tái)輸出腳本，調(diào)用showDialog方法，就會(huì)時(shí)不時(shí)的出現(xiàn)問題了，報(bào)一個(gè)無法打開Internet站點(diǎn)的錯(cuò)誤，在腳本中下斷點(diǎn)調(diào)試，依然找不到問題的根源，最后到網(wǎng)上一查，這個(gè)問題有可能是頁(yè)面沒有完全加載造成的，于是乎，修改后臺(tái)輸出腳本的代碼，將其改為
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('來自網(wǎng)頁(yè)的消息','用戶名或密碼錯(cuò)誤，請(qǐng)重新輸入！','warning'); } };
問題解決，一切OK!

復(fù)制代碼代碼如下:

 
document.onreadystatechange = subSomething;//當(dāng)頁(yè)面加載狀態(tài)改變的時(shí)候執(zhí)行這個(gè)方法. 
function subSomething() 
{ 
if(document.readyState == "complete"){ //當(dāng)頁(yè)面加載狀態(tài)為完全結(jié)束時(shí)進(jìn)入 
//你要做的操作。 
} 
} 

說明：onreadystatechange 事件能辨識(shí)readyState 屬性的改變。

關(guān)于onreadystatechange屬性的一點(diǎn)疑問
在編寫Ajax方法的時(shí)候，我們經(jīng)常會(huì)寫上類似于這樣的代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var xmlHttp; 
//創(chuàng)建一個(gè)XmlHttpRequeset對(duì)象 
function createXMLHttpRequest()...{ 
if(window.ActiveXObject)...{ 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
else if(window.XMLHttpRequest)...{ 
xmlHttp = new XMLHttpRequest(); 
} 
} 
//開始一個(gè)請(qǐng)求 
function startRequest()...{ 

createXMLHttpRequest(); 
xmlHttp.onreadystatechange = handlestatechange; 
xmlHttp.open("GET", "SimpleRespose.xml", true); 
xmlHttp.Send(null); 
} 

function handlestatechange()...{ 
if(xmlHttp.readyState == 4)...{//描述一種"已加載"狀態(tài)；此時(shí)，響應(yīng)已經(jīng)被完全接收。 
if(xmlHttp.status == 200)...{//200表示成功收到 
alert("The Server Replied with:" + xmlHttp.responseText) 
} 
} 
} 
</script> 

第一次閱讀這段代碼的時(shí)候，我就感到了一點(diǎn)點(diǎn)不對(duì)勁，但是說不出來什么地方不對(duì)勁。隨著對(duì)Ajax代碼的進(jìn)一步了解，這種感覺時(shí)刻伴隨著我。

后來，我知道了這種感覺來自于什么地方。

看看startRequest函數(shù)。我們發(fā)現(xiàn)xmlHttp.onreadystatechange指向了一個(gè)函數(shù)，這個(gè)函數(shù)是在xmlHttpRequest.readyState發(fā)生改變的時(shí)候觸發(fā)。我們?cè)賮砜磗tartRequest函數(shù)，想象一下整個(gè)請(qǐng)求發(fā)送的步驟?，F(xiàn)在我們點(diǎn)擊一個(gè)按鈕，觸發(fā)了一個(gè)startRequest函數(shù)。函數(shù)往下走，第一步是createXmlHttpRequest()，它的作用是創(chuàng)建一個(gè)xmlHttpRequest對(duì)象，當(dāng)它完畢的時(shí)候，xmlHttpRequest.readyState的值是0(window.alert跟蹤得到的)，程序繼續(xù)往下走，xmlHttp.onreadystatechange = handlestatechange，因?yàn)闋顟B(tài)沒有改變(xmlHttpRequest.readyState的值是0)，所以不觸發(fā)函數(shù)，緊接著是Open()和Send()，那么，整個(gè)函數(shù)從頭到尾都應(yīng)該沒有觸發(fā)handlestatechange函數(shù)啊，但是為什么出來的結(jié)果是正確的呢？

后來我用window.alert跟蹤xmlHttp.readystate的變化，發(fā)現(xiàn)于原來它運(yùn)行的機(jī)制是這樣的。首先創(chuàng)建一個(gè)xmlHttpRequest的對(duì)象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange沒有運(yùn)行。緊接著是open()，這個(gè)函數(shù)發(fā)生了之后xmlHttp.readyState的值是1了，那么就會(huì)有一個(gè)斷點(diǎn)在Open()函數(shù)處斷開，保留現(xiàn)場(chǎng)，緊接著又返回到xmlHttp.onreadystatechange = handlestatechange運(yùn)行，然后再執(zhí)行Send()函數(shù)，這個(gè)函數(shù)發(fā)生了之后xmlHttp.readyState的值是2了，接著又返回到xmlHttp.onreadystatechange = handlestatechange運(yùn)行。以此類推。

瀏覽器因?yàn)椴荒苷嬲叵衩嫦驅(qū)ο竽敲淳幊?，所以找了個(gè)折衷的辦法，但是這個(gè)辦法看起來不倫不類，想了半天，再跟一個(gè)同學(xué)一起討論，才得出這樣的一個(gè)結(jié)果。

您可能感興趣的文章: