Jquery使用Firefox FireBug外掛程式調試Ajax步驟講解

 本文介紹Jquery下的Ajax調試方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，還有諸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更為簡便的方法

首先，我們用一個樣本來說明JQuery的Ajax調用過程， 實現的一個功能是：點擊確認支付按鈕之後，實現餘額支付的功能： 1.首先在php頁面將相關需要調用的函數綁定到按鈕上：  代碼如下:<input type="submit" name="pay_btn" id="pay_btn" value="確認支付" /> <script type="text/javascript"> $(function(){     $("#pay_btn").bind("click",ABC.balancePay); });   2.指令碼處： 如果使用$.post方式實現：  代碼如下:var ABC = {     balancePay: function(event){         event.preventDefault();         var tthis = $(event.currentTarget);         var form = tthis.parents(‘form');         var url = form.attr(‘action');         var data = ‘code=15′ ;//+ $(‘#verifyCode').val();         var jqXhr = $.post(url, data, undefined, ‘jsonp');         jqXhr.done(function(datas){                 //console.log(‘這裡是通過console列印出來的'); //#4                 $("#msg").text(‘結果:'+data); }); }   $.post方式也可以直接指定回呼函數：  代碼如下:var jqXhr = $.post(url, data, function(data){             $("#msg").text('結果:'+data); }, 'jsonp');   使用$.ajax方法實現：  代碼如下:var jqXhr = $.post(url, data, function(data){             $("#msg").text(‘結果:'+data); }, ‘jsonp');   使用$.ajax方法實現：  代碼如下:var jqXhr = $.ajax({             type: ‘post',             url: url,             data: {code: ‘15′},             dataType: ‘jsonp',             sccuess:function(data){             alert(‘good');},             error: function(XMLHttpRequest, textStatus, errorThrown) {  //#3這個error函數調試時非常有用，如果解析不正確，將會彈出錯誤框                        alert(XMLHttpRequest.status);                        alert(XMLHttpRequest.readyState);                        alert(textStatus); // paser error;                    }, });   3.伺服器端：  代碼如下:public function actionInterPayProc($callback) { //header("content-type: text/javascript"); //header(‘Content-type: text/html; charset=utf-8′);          $code = $_POST['code'];         //$code  //#1 此處給出一個有語法錯誤的運算式         //echo $code;  //#2  此處標記，用於後面調試說明；         …         $result = 1;             //echo $_POST['callback']. ‘(‘ . json_encode($result) . ‘);';//注意使用的編碼方式需要和用戶端請求保持一致； exit(0); }   調試工具 Firefox有強大FireBug 外掛程式，現在比較新的瀏覽器如 Chrome 和 Safari，以及 IE 8都內建了調試工具，藉助於這些調試工具，可以非常詳細的查看 Ajax 的執行過程（chrome和firefox中調出調試工具的快速鍵是ctrl+shift+c)；以下使用FireBug；  1.使用firebug，查看回調： 對於Ajax方法，是通過非同步執行的伺服器端程式，如果伺服器端出錯，在頁面上不會顯示的，我們需要藉助調試工具來查看；例如，將以上樣本中#2的注釋去掉，觸發ajax請求一次，可以在控制檯面板中查看到錯誤的返回結果：     如果是伺服器端程式出錯，也可以直接看到，出錯原因跟一般普通的頁面一樣，只不過是在ajax返回的面板中查看（web瀏覽器頁面中不會有任何顯示）。這裡需要說明的是，如果在伺服器端使用了echo等方法將需要查看的變數列印出來了，那麼，ajax調用的結果一定是失敗的，因為這樣看上去的回呼函數名稱被更改了，造成無法解析； 例如，列印的變數是333，那麼最後回調的結果是：333ajaxcallbak(1);用戶端尋找333ajaxcallbak這個函數名，無法解析。 2.使用error函數列印錯誤資訊： $.ajax()有一個error參數，可以指定一個函數，在請求失敗時，將調用此方法。這裡給出的資訊，對於調試來說，非常有用； error：function (XMLHttpRequest, textStatus, errorThrown) error事件返回的第一個參數XMLHttpRequest有一些有用的資訊： XMLHttpRequest.readyState: 其返回的狀態代碼對應了一種錯誤說明： 狀態代碼 0 －（未初始化）還沒有調用send()方法 1 －（載入）已調用send()方法，正在發送請求 2 －（載入完成）send()方法執行完成，已經接收到全部響應內容 3 －（互動）正在解析響應內容 4 －（完成）響應內容解析完成，可以在用戶端調用了 XMLHttpRequest.status: 這裡返回的狀態代碼就是我們日常見到的HTTP狀態；比如404，表示沒有找到頁面； textStatus: "timeout", "error", "notmodified" 和 "parsererror"。 (默 認: 自動判斷 (xml 或 html)) 請求失敗時調用時間。參數有以下三個：XMLHttpRequest 對象、錯誤資訊、（可選）捕獲的錯誤對象。如果發生了錯誤，錯誤資訊（第二個參數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。 通過這個error函數，程式出錯就很容易排查； 比如上面的#2處，去掉注釋，相當於更改了回呼函數名；在erro裡就會報：parsererror； 3.使用console.log列印輸出：（alert()也可以） 這隻是一個增強調試體驗的輔助方法。對於js中的關注變數跟蹤，我們可通過alert()方法列印出來，不過彈出框頻繁會讓人煩躁。console.log是一個替代方式，它是firebug外掛程式的一個方法。console.log列印出來的變數結果會顯示在firebug的控制檯面板中； 可能的出錯原因： 1.如果返回的結果格式不正確，在firebug中能看到結果； 2.對於JSON請求，對格式比較嚴格： 如果通過error函數打出來的報錯是：parsererror 可能的原因是伺服器端指令碼編碼的問題；可以在服務端處理函數內處理的第一行加上對應的header資訊： eg：header('Content-type: text/html; charset=utf-8'); 當然，最有可能的是格式不正確：  代碼如下:echo "{'re':'success'}";jquery不能解析echo "{"re":"success"}";就沒有錯誤  不要輸出怪異的json格式的字串，要不jq1.4+版本不會執行success回調。如{abc:1}或者{'abc':1},要輸出   代碼如下:{"abc":1} {'success':true}改為{"success":true}