您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > document.onreadystatechange事件的用法分析
document.onreadystatechange事件的用法分析
文章來源：365jz.com 點擊數(shù)：308 更新時間：2017-08-15 18:58 參與評論
這兩天，正在給部門的一個項目做優(yōu)化，其中一項是將web應用中的所有alert用div方式實現(xiàn)，javascript的相關方法都寫好了，方法名為showDialog，前臺頁面調(diào)用showDialog方法一點也沒有問題，可是頁面一旦提交，從后臺輸出腳本，調(diào)用showDialog方法，就會時不時的出現(xiàn)問題了，報一個無法打開Internet站點的錯誤，在腳本中下斷點調(diào)試，依然找不到問題的根源，最后到網(wǎng)上一查，這個問題有可能是頁面沒有完全加載造成的，于是乎，修改后臺輸出腳本的代碼，將其改為
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('來自網(wǎng)頁的消息','用戶名或密碼錯誤，請重新輸入！','warning'); } };
問題解決，一切OK!
說明 ：onreadystatechange 事件能辨識readyState 屬性的改變。
關于onreadystatechange屬性的一點疑問
在編寫Ajax方法的時候，我們經(jīng)常會寫上類似于這樣的代碼：
第一次閱讀這段代碼的時候，我就感到了一點點不對勁，但是說不出來什么地方不對勁。隨著對Ajax代碼的進一步了解，這種感覺時刻伴隨著我。
后來，我知道了這種感覺來自于什么地方。
看看startRequest函數(shù)。我們發(fā)現(xiàn)xmlHttp.onreadystatechange指向了一個函數(shù)，這個函數(shù)是在xmlHttpRequest.readyState發(fā)生改變的時候觸發(fā)。我們再來看startRequest函數(shù)，想象一下整個請求發(fā)送的步驟?，F(xiàn)在我們點擊一個按鈕，觸發(fā)了一個startRequest函數(shù)。函數(shù)往下走，第一步是createXmlHttpRequest()，它的作用是創(chuàng)建一個xmlHttpRequest對象，當它完畢的時候，xmlHttpRequest.readyState的值是0(window.alert跟蹤得到的)，程序繼續(xù)往下走，xmlHttp.onreadystatechange = handlestatechange，因為狀態(tài)沒有改變(xmlHttpRequest.readyState的值是0)，所以不觸發(fā)函數(shù)，緊接著是Open()和Send()，那么，整個函數(shù)從頭到尾都應該沒有觸發(fā)handlestatechange函數(shù)啊，但是為什么出來的結果是正確的呢？
后來我用window.alert跟蹤xmlHttp.readystate的變化，發(fā)現(xiàn)于原來它運行的機制是這樣的。首先創(chuàng)建一個xmlHttpRequest的對象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange沒有運行。緊接著是open()，這個函數(shù)發(fā)生了之后xmlHttp.readyState的值是1了，那么就會有一個斷點在Open()函數(shù)處斷開，保留現(xiàn)場，緊接著又返回到xmlHttp.onreadystatechange = handlestatechange運行，然后再執(zhí)行Send()函數(shù)，這個函數(shù)發(fā)生了之后xmlHttp.readyState的值是2了，接著又返回到xmlHttp.onreadystatechange = handlestatechange運行。以此類推。
瀏覽器因為不能真正地像面向?qū)ο竽敲淳幊?，所以找了個折衷的辦法，但是這個辦法看起來不倫不類，想了半天，再跟一個同學一起討論，才得出這樣的一個結果。
各瀏覽器對link標簽onload/onreadystatechange事件支持的差異分析，需要的朋友可以參考下。
1，onload事件
IE6/7/8/9中彈出了兩次，其它瀏覽器均沒有彈。說明只有IE支持link元素的onreadystatechange事件。彈出兩次分別是readyState為loading，complete狀態(tài)?？墒褂胷eadyState來判斷載入情況。我們再使用JS動態(tài)創(chuàng)建link元素試試，
IE6/7/8/9中仍然彈出了2次。Firefox/Safari/Chrome仍然沒彈。貌似一切正常，但神奇的是這次在Opera中彈出了一次，說明Opera支持動態(tài)創(chuàng)建link元素時的onreadystatechange事件。
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('來自網(wǎng)頁的消息','用戶名或密碼錯誤，請重新輸入！','warning'); } };
問題解決，一切OK!
document.onreadystatechange = subSomething;//當頁面加載狀態(tài)改變的時候執(zhí)行這個方法.
function subSomething()
{
if(document.readyState == "complete"){ //當頁面加載狀態(tài)為完全結束時進入
//你要做的操作。
}
}
說明 ：onreadystatechange 事件能辨識readyState 屬性的改變。
關于onreadystatechange屬性的一點疑問
在編寫Ajax方法的時候，我們經(jīng)常會寫上類似于這樣的代碼：
<script type="text/javascript">
var xmlHttp;
//創(chuàng)建一個XmlHttpRequeset對象
function createXMLHttpRequest()...{
if(window.ActiveXObject)...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)...{
xmlHttp = new XMLHttpRequest();
}
}
//開始一個請求
function startRequest()...{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handlestatechange;
xmlHttp.open("GET", "SimpleRespose.xml", true);
xmlHttp.Send(null);
}
function handlestatechange()...{
if(xmlHttp.readyState == 4)...{//描述一種"已加載"狀態(tài)；此時，響應已經(jīng)被完全接收。
if(xmlHttp.status == 200)...{//200表示成功收到
alert("The Server Replied with:" + xmlHttp.responseText)
}
}
}
</script>
第一次閱讀這段代碼的時候，我就感到了一點點不對勁，但是說不出來什么地方不對勁。隨著對Ajax代碼的進一步了解，這種感覺時刻伴隨著我。
后來，我知道了這種感覺來自于什么地方。
看看startRequest函數(shù)。我們發(fā)現(xiàn)xmlHttp.onreadystatechange指向了一個函數(shù)，這個函數(shù)是在xmlHttpRequest.readyState發(fā)生改變的時候觸發(fā)。我們再來看startRequest函數(shù)，想象一下整個請求發(fā)送的步驟?，F(xiàn)在我們點擊一個按鈕，觸發(fā)了一個startRequest函數(shù)。函數(shù)往下走，第一步是createXmlHttpRequest()，它的作用是創(chuàng)建一個xmlHttpRequest對象，當它完畢的時候，xmlHttpRequest.readyState的值是0(window.alert跟蹤得到的)，程序繼續(xù)往下走，xmlHttp.onreadystatechange = handlestatechange，因為狀態(tài)沒有改變(xmlHttpRequest.readyState的值是0)，所以不觸發(fā)函數(shù)，緊接著是Open()和Send()，那么，整個函數(shù)從頭到尾都應該沒有觸發(fā)handlestatechange函數(shù)啊，但是為什么出來的結果是正確的呢？
后來我用window.alert跟蹤xmlHttp.readystate的變化，發(fā)現(xiàn)于原來它運行的機制是這樣的。首先創(chuàng)建一個xmlHttpRequest的對象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange沒有運行。緊接著是open()，這個函數(shù)發(fā)生了之后xmlHttp.readyState的值是1了，那么就會有一個斷點在Open()函數(shù)處斷開，保留現(xiàn)場，緊接著又返回到xmlHttp.onreadystatechange = handlestatechange運行，然后再執(zhí)行Send()函數(shù)，這個函數(shù)發(fā)生了之后xmlHttp.readyState的值是2了，接著又返回到xmlHttp.onreadystatechange = handlestatechange運行。以此類推。
瀏覽器因為不能真正地像面向?qū)ο竽敲淳幊?，所以找了個折衷的辦法，但是這個辦法看起來不倫不類，想了半天，再跟一個同學一起討論，才得出這樣的一個結果。
各瀏覽器對link標簽onload/onreadystatechange事件支持的差異分析，需要的朋友可以參考下。
1，onload事件
<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onload="alert(this)"/> </HEAD> <BODY> </BODY> </HTML>
IE6/7 :
IE8/9 :
Opera :
即IE6/7/8/9/Opera都支持onload事件， Firefox/Safari/Chrome不支持。
注：用JS創(chuàng)建link標簽再添加到head中，情況如上。
2，onreadystatechange事件
<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onreadystatechange</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onreadystatechange="alert(this)"/> </HEAD> <BODY> </BODY> </HTML>
IE6/7/8/9中彈出了兩次，其它瀏覽器均沒有彈。說明只有IE支持link元素的onreadystatechange事件。彈出兩次分別是readyState為loading，complete狀態(tài)?？墒褂胷eadyState來判斷載入情況。我們再使用JS動態(tài)創(chuàng)建link元素試試，
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>Link Element onreadystatechange</title>
</HEAD>
<BODY>
<script>
function createEl(type, attrs){
var el = document.createElement(type),
attr;
for(attr in attrs){
if(attrs.hasOwnProperty(attr)){
el.setAttribute(attr, attrs[attr]);
}
}
return el;
}
var link = createEl('link', {
href : 'http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css',
rel : 'stylesheet',
type : 'text/css'
});
link.onreadystatechange = function(){
alert(this)
}
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</BODY>
</HTML>
IE6/7/8/9中仍然彈出了2次。Firefox/Safari/Chrome仍然沒彈。貌似一切正常，但神奇的是這次在Opera中彈出了一次，說明Opera支持動態(tài)創(chuàng)建link元素時的onreadystatechange事件。
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答?。?點擊進入論壇
您可能感興趣的文章:
------分隔線----------------------------
