2012年2月14日 星期二

jQuery ajax.responseText注意事項

jQuery操作ajax技巧是相當方便的,
但是操作ajax.responseText,不得不注意到同步問題,如下面的例子:

var rtxt = $.ajax({type:"GET",
                   url:"empl.cfm",
                   data:{eno:"A001",
                   dept:"A"},
                   async:true}).responseText;
var msg = eval(rtext).message;
alert(msag);

這個是以 jQuery 利用ajax非同步呼叫 empl.cfm 頁面取得人事資料,而該頁面會以 JSON 格式回傳,該格式結構裡面會包含 message 的變數。

這個看似正常的程式碼其實隱含著很大的問題,
測試過程中,當伺服器回應在200ms以內時這個畫面會顯示 msag 內容,
當大於 200ms 就容易出現無反應 ( alert沒有執行 )。

後來反覆檢查的結果,發現原來是 async 參數會作祟,當 async為 true 時,ajax 為非同步運作:請求頁面同時,script 繼續執行並不等待請求回應,由於 responseText 指令在執行時會需要瀏覽器即時編譯,當編譯完成執行時,若請求的頁面已經返回回應資料,則此時會正常的繼續執行,若請求頁面來不及在編譯執行前返回回應資料,則會造成 rtxt 變成 undefined 狀態,使得接下來的 eval(rtext) 也變成 undefined ,如此直接取得結構 .message 時就會導致 javascript 執行錯誤停止。

當然正常的情況可以不要加入 async 屬性,因為其預設值就是 false 狀態。