欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

document.onreadystatechange事件的用法分析

 更新時間:2009年10月17日 17:00:19   作者:  
這里主要介紹document.onreadystatechange事件的使用方法, 一般多用于實時監(jiān)控用戶的輸入
這兩天,正在給部門的一個項目做優(yōu)化,其中一項是將web應用中的所有alert用div方式實現(xiàn),javascript的相關方法都寫好了,方法名為showDialog,前臺頁面調用showDialog方法一點也沒有問題,可是頁面一旦提交,從后臺輸出腳本,調用showDialog方法,就會時不時的出現(xiàn)問題了,報一個無法打開Internet站點的錯誤,在腳本中下斷點調試,依然找不到問題的根源,最后到網(wǎng)上一查,這個問題有可能是頁面沒有完全加載造成的,于是乎,修改后臺輸出腳本的代碼,將其改為
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運行。以此類推。

瀏覽器因為不能真正地像面向對象那么編程,所以找了個折衷的辦法,但是這個辦法看起來不倫不類,想了半天,再跟一個同學一起討論,才得出這樣的一個結果。

相關文章

  • 詳解Javascript事件驅動編程

    詳解Javascript事件驅動編程

    這篇文章主要為大家詳細介紹了Javascript事件驅動編程的相關資料,通過經(jīng)典案例向大家介紹Javascript事件驅動編程,需要的朋友可以參考下
    2016-01-01
  • js toFixed()方法的重寫實現(xiàn)精度的統(tǒng)一

    js toFixed()方法的重寫實現(xiàn)精度的統(tǒng)一

    凡用過js 中的toFix() 方法的, 應該都知道這個方法存在一個小小的BUG,在IE 下和FF 下對于小數(shù)的進位有點不同
    2014-03-03
  • 學習使用Bootstrap柵格系統(tǒng)

    學習使用Bootstrap柵格系統(tǒng)

    這篇文章主要教大家學習使用Bootstrap柵格系統(tǒng),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 微信小程序實現(xiàn)多張圖片上傳功能

    微信小程序實現(xiàn)多張圖片上傳功能

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)多張圖片上傳功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • JS實現(xiàn)簡單Tab欄切換案例

    JS實現(xiàn)簡單Tab欄切換案例

    這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單Tab欄切換案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • JavaScript中淺講ajax圖文詳解

    JavaScript中淺講ajax圖文詳解

    ajax對于各位來說,應該都不陌生,正因為ajax的產(chǎn)生,導致前臺頁面和服務器之間的數(shù)據(jù)傳輸變得非常容易,同時還可以實現(xiàn)頁面的局部刷新。本文圖文并茂給大家介紹了js中ajax知識,需要的朋友一起學習吧
    2016-11-11
  • js實現(xiàn)年月日表單三級聯(lián)動

    js實現(xiàn)年月日表單三級聯(lián)動

    這篇文章主要為大家詳細介紹了js實現(xiàn)年月日表單三級聯(lián)動,生日欄表單三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析

    簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析

    這篇文章主要介紹了簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-10-10
  • ESLint和Jest中使用esm示例詳解

    ESLint和Jest中使用esm示例詳解

    這篇文章主要為大家介紹了ESLint和Jest中使用esm示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • Auto.JS實現(xiàn)抖音刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻功能

    Auto.JS實現(xiàn)抖音刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻功能

    auto.js是一個支持無障礙服務的Android平臺上的JavaScript IDE,可以編寫各種自動化腳本,這篇文章主要介紹了Auto.JS實現(xiàn)抖音刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻功能,需要的朋友可以參考下
    2020-05-05

最新評論