關於ajax對象一些常用屬性、事件和方法大小寫比較常見的問題總結_AJAX相關

來源:互聯網
上載者:User

最近比較空閑,於是抽個時間整理些關於ajax方法的東東。在項目中經常發現ajax板塊好多問題都是屬性,方法,事件大小寫不區分問題,最終導致了程式運行出現麻煩。

  下面是ajax對象的一些常用屬性,事件和方法

  1)標準的ajax對象的屬性有readyState,status,responseText,responseXML

  2)非標準ajax對象屬性,針對IE瀏覽器的,有responseBody,2進位資料流。如果不考慮瀏覽器安全色,這個屬性+VBScript能很好的解決亂碼問題。 

Visual Basic code

Function Bytes2BStr(vin)'二進位轉字串   strreturn = ""   for i = 1 to lenb(vin)   thischarcode = ascb(midb(vin,i,1))   if thischarcode < &h80 then    strreturn = strreturn & chr(thischarcode)   else    nextcharcode = ascb(midb(vin,i+1,1))    strreturn = strreturn & chr(clng(thischarcode) * &h100 + cint(nextcharcode))    i = i + 1   end if   next   Bytes2BStr = strreturnEnd Function

  3)事件onreadystatechange,狀態轉換函數

  4)方法有setRequestHeader,open,send,用於設定回應標頭的,當指定提交方法為POST的時候,需要設定content-type為application/x-www-form-urlencoded,如果未設定這個回應標頭,請求的動態網頁無法使用索引值對的形式擷取到值,不過可以從二進位流中產生提交的資料。

參考

ajax指定為post但是未設定content-type或未指定鍵時時如何擷取提交的內容

  容易出現錯誤的問題

1)對於使用XMLHttpRequest建立的對象,包括IE7+,屬性是嚴格區分大小寫,一定要注意大小寫問題,要不不區分大小,屬性值就是 undefined。如readyState寫成readystate,responseText寫成responsetext。

2)對於IE瀏覽器,如果是先判斷activexobject,那麼會執行activexobject建立xhr對象,使用acx建立的xhr對象,屬性,事件,方法都不區分大小寫

3)使用XMLHttpRequest建立時,onreadystatechange一定全部為小寫,要不相當於給xhr對象賦值一個自訂屬性,而不是實際的狀態轉換函數。這樣永遠都不執行回調。對於IE使用activexobject建立的xhr對象,不區分大小寫

4)同2,3點,XMLHttpRequest建立時,調用方法一定要區分大小寫,要不會出錯,提示找不到方法。IE使用activexobject建立不會區分大小寫。

特彆強調的是,一定要調用open方法後,才能執行setRequestHeader方法,要不會出錯。

  對於手寫ajax代碼一些建議

1)為get提交時,不需要設定content-type了,除非請求的是一些需要檢查content-type產生一些對應的資料格式的檔案。如 asp.net的webservice會檢查content-type,如果指定content-type為application/json,會產生對應的json格式的字串。

2)為get提交時,如果沒有資料,調用send方法時最好添加一個null作為參數。xhr.send(null);

3)為post提交時,一定不要忘記在調用open方法後,再調用setRequestHeader方法設定content-type為application/x-www-form-urlencoded

4) 在使用responseText,responseXML和responseBody【IE only】,status屬性時,需要在readyState==4,status狀態==200【線上測試】或者status狀態==0【本地測試】時再使用

JavaScript code

 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("microsft.xmlhttp");   xhr.open('get', 'index.html', true);   xhr.onreadystatechange = function () {     if (4 == xhr.readyState) {       if (200 == xhr.status || 0 == xhr.status) {         //=========正常返回後的處理代碼       }       else alert('動態網頁出問題了~~');     }   }   xhr.send(null);

5)如果為非同步執行時,需要添加狀態轉換函數,然後在readyState位4時使用responseText或者responseXML屬性。
如果為同步執行時,可以在send完後,直接使用responseText或者responseXML屬性,不需要添加onreadystatechange狀態轉換函數了。不過為同步時如果網速慢容易造成瀏覽器假死,使用者體驗不好。

6)最簡單的~~hoho~~改用jquery架構吧。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.