最近比較空閒,於是抽個時間整理些關於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 = strreturn 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
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框架吧。