[AJAX] Phonegap APP利用Ajax取得後端資料(使用jQuery)

Ref: jQuery Ajax

按照官方文件的標準寫法如下：

var json_string = '{"ID":"123456", "Name":"AndyWang"}';

$.ajax({

   beforeSend : function () {

         //送需求前要做的事情

         $.mobile.loading('show');

   },

   complete : function () {

         //完成之後要做的事情

         $.mobile.loading('hide');

   },

   url: "WebService URL",      //網址，需要加上『http://』

   type: "POST",              //Request type

   dataType: "json",            //欲接收回傳內容(檔案)的資料型態

   async: "false",

   data: json_string,            //欲傳送的參數/檔案

   success: function (result) {

         //成功之後要做的事情

   },

   error: function (xhr, status) {

         //失敗之後要做的事情

         $.mobile.loading('hide');

         alert("Cancel Executing Query ! ");

   }

});


但運用在APP中，可能會碰上使用者在你送出ajax request的結果出來之前，就切換到其它功能的狀況。
如果在使用者切換的瞬間，程式沒有自動把這個ajax request中斷，會自動拋出Exception！
按照上面的邏輯，收到Exception時，會自動呼叫alert('Cancel Executing Query ! ')
事實上這不能算是Exception，那應該要怎麼修改錯誤處理呢???

1. HTML卸載前的事件(beforeunload event)
   想要多了解這個事件的話，建議Google『HTML life cycle』
   $(window).on('beforeunload', function(){
       try{
           windo.ajax.abort();    }    catch(err){ }
   });
2. 宣告 Ajax request為實體物件
   window.xxxx屬於Javascript全域變數
   
   window.ajax = $.ajax({
       beforeSend : function () {
           //送需求前要做的事情
           $.mobile.loading('show');
       },
       complete : function () {
           //完成之後要做的事情
           $.mobile.loading('hide');
       },
       url: "WebService URL", //網址，需要加上『http://』
       type: "POST", //Request type
       dataType: "json", //欲接收回傳內容(檔案)的資料型態
       async: "false",
       data: json_string, //欲傳送的參數/檔案
       success: function (result) {
           //成功之後要做的事情
       },
       error: function (xhr, status) {
           //失敗之後要做的事情
       $.mobile.loading('hide');
           alert("Cancel Executing Query ! ");
       }
   });
   

改成這樣之後，使用者急促地切換頁面或選單的時候，就不會發生不必要的錯誤了 !