好程式設計師教程分享關於ajax物件一些常見的問題總結

好程式設計師IT發表於2019-04-16

      好程式設計師 教程分享關於ajax物件一些常見的問題總結, 最近比較空閒,於是抽個時間整理些關於 ajax方法的東東。在專案中經常發現ajax板塊好多問題都是屬性,方法,事件大小寫不區分問題,最終導致了程式執行出現麻煩。

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

  1)標準的ajax物件的屬性有readyState,status,responseText,responseXML

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

  Visual Basic code

1. 

2.  Function Bytes2BStr(vin)'二進位制轉字串

3.  strreturn = ""

4.  for i = 1 to lenb(vin)

5.  thischarcode = ascb(midb(vin,i,1))

6.  if thischarcode < &h80 then

7.  strreturn = strreturn & chr(thischarcode)

8.  else

9.  nextcharcode = ascb(midb(vin,i+1,1))

10.  strreturn = strreturn & chr(clng(thischarcode) * &h100 + cint(nextcharcode))

11.  i = i + 1

12.  end if

13.  next

14.  Bytes2BStr = strreturn

15.  End 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

1. 

2.  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("microsft.xmlhttp");

3.  xhr.open('get', 'index.html', true);

4.  xhr.onreadystatechange = function () {

5.  if (4 == xhr.readyState) {

6.  if (200 == xhr.status || 0 == xhr.status) {

7.  //=========正常返回後的處理程式碼

8.  }

9.  else alert('動態頁出問題了~~');

10.  }

11.  }

12.  xhr.send(null);

   5)如果為非同步執行時,需要新增狀態轉換函式,然後在readyState位4時使用responseText或者responseXML屬性。

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

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2641566/,如需轉載,請註明出處,否則將追究法律責任。

相關文章