擴充JQuery Ajax請求錯誤機制，實現伺服器端訊息回饋。

JQuery使我們在開發Ajax應用程式的時候提高了效率，減少了許多相容性問題，但時間久了，也讓我們離不開他。比如簡單的Jquery Ajax請求的封裝讓我們忘卻了最原始的XmlHttpRequest對象和他的屬性,方法，也讓我們遠離事情的真相。

在Ajax項目中，經常遇到需要伺服器端返回錯誤的訊息提示，或者訊息碼之類的資料。查過一些協助，解決方案，很多網站是返回錯誤的訊息JSON資料或者指令碼，這種方式當我們用JQuery.ajax()的時候出現了問題，jquery.ajax()回呼函數success(data)的data參數可能是 xmlDoc, jsonObj, html, text, 等等...這取決於我們dataType設定和MIME.很多時候我們的錯誤處理都是統一的處理，不管你請求的是XML,JSON...。不光不好統一，還容易出現解析錯誤等等情況。

參考了Prototyp架構的做法，做了一個Jquery的錯誤擴充。

原理：Prototype思路是把伺服器處理結果狀態資訊寫在Header裡面，這種方式既保證了reponse body的乾淨，同時適應XML,JSON，HTML,Text的返回情況。

　　　伺服器端只需要 Response.AddHeader("Error-Json", "{code:2001,msg:'User settings is null!',script:''}");

實現：為了不影響原有的Jquery.ajax方法，同時不破壞jquery庫源檔案，做了如下擴充，代碼很簡單都能看懂：

;(function($){
    var ajax=$.ajax;
    $.ajax=function(s){
        var old=s.error;
        var errHeader=s.errorHeader||"Error-Json";
        s.error=function(xhr,status,err){
            var errMsg = window["eval"]("(" + xhr.getResponseHeader(errHeader) + ")");
            old(xhr,status,errMsg||err);
        }
        ajax(s);
    }

})(jQuery);

 

使用方法：

　　伺服器端：我們是對錯誤進行擴充，如果要讓jquery.ajax破獲錯誤，必須要伺服器端返回非200的錯誤碼，由於Opera瀏覽器下面對400以上的錯誤碼，都無法獲得請求的Header，建議如果要支援Opera，最好返回30*錯誤，這是Opera能接受Header的錯誤範圍。沒有做封裝，可以再單獨把Catch內容出來。

try {
                context.Response.Write(GetJson(context));
                throw new Exception("msg");
            }
            catch {
                context.Response.ClearContent();
                context.Response.StatusCode = 300;
                context.Response.AddHeader("Error-Json", "{code:2001,msg:'User settings is null!',script:''}");
                context.Response.End();
            }

　　用戶端：

　　

$.ajax({
            url: this.ajaxUrl,
            type: "POST",
            success: callback,
            error: function(xhr,status,errMsg){
        alert(errMsg.code+"<br/>"+errMsg.msg);
            }
        });

也許不是最好的，但覺得用起來很方便，忘了個寫新增參數errorHeader:"Error-Json",這個header頭key根據你後台設定配置。