Jquery下的Ajax調試方法

介紹

本文介紹Jquery下的Ajax調試方法；很多調試方法，就是一點就通，但是，在還沒有通之前，會讓人困惑，不知所以然；

Ajax 可以為使用者提供更為豐富的使用者體驗。jQuery 對 Ajax 當然也提供了很好的支援，而且還抽象了各種瀏覽器對於 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}

 

相關書籍：

剛接觸jquery的朋友，可以看看這本書。介紹的很全面，執行個體淺顯易懂：

《鋒利的JQuery》

 

 

 

附錄：

XMLHttpRequest.status狀態代碼

1xx-資訊提示

這些狀態碼表示臨時的響應。用戶端在收到常規響應之前，應準備接收一個或多個1xx響應。
100-繼續。
101-切換協議。

2xx-成功
這類狀態碼表明伺服器成功地接受了用戶端請求。
200-確定。用戶端請求已成功。
201-已建立。

202-已接受。
203-非權威性資訊。
204-無內容。
205-重設內容。
206-部分內容。

3xx-重新導向
用戶端瀏覽器必須採取更多操作來實現請求。例如，瀏覽器可能不得不請求伺服器上的不同的頁面，或通過Proxy 伺服器重複該請求。

301-對象已永久移走，即永久重新導向。
302-對象已臨時移動。
304-未修改。
307-臨時重新導向。

4xx-用戶端錯誤
發生錯誤，用戶端似乎有問題。例如，用戶端請求不存在的頁面，用戶端未提供有效身分識別驗證資訊。400-錯誤的請求。

401-訪問被拒絕。IIS定義了許多不同的401錯誤，它們指明更為具體的錯誤原因。這些具體的錯誤碼在瀏覽器中顯示，但不在IIS日誌中顯示：

401.1-登入失敗。
401.2-伺服器配置導致登入失敗。
401.3-由於ACL對資源的限制而未獲得授權。

401.4-篩選器授權失敗。
401.5-ISAPI/CGI應用程式授權失敗。

401.7–訪問被Web伺服器上的URL授權策略拒絕。這個錯誤碼為IIS6.0所專用。

403-禁止訪問：IIS定義了許多不同的403錯誤，它們指明更為具體的錯誤原因：
403.1-執行訪問被禁止。

403.2-讀訪問被禁止。
403.3-寫訪問被禁止。
403.4-要求SSL。
403.5-要求SSL128。

403.6-IP地址被拒絕。
403.7-要求用戶端認證。
403.8-網站訪問被拒絕。
403.9-使用者數過多。

403.10-配置無效。
403.11-密碼更改。
403.12-拒絕訪問映射表。
403.13-用戶端認證被吊銷。

403.14-拒絕目錄列表。
403.15-超出用戶端訪問許可。
403.16-用戶端認證不受信任或無效。

403.17-用戶端認證已到期或尚未生效。
403.18-在當前的應用程式集區中不能執行所請求的URL。這個錯誤碼為IIS6.0所專用。

403.19-不能為這個應用程式集區中的用戶端執行CGI。這個錯誤碼為IIS6.0所專用。

403.20-Passport登入失敗。這個錯誤碼為IIS6.0所專用。
404-未找到。
404.0-（無）–沒有找到檔案或目錄。

404.1-無法在所請求的連接埠上訪問Web網站。
404.2-Web服務擴充鎖定策略阻止本請求。

404.3-MIME映射策略阻止本請求。
405-用來訪問本頁面的HTTP謂詞不被允許（方法不被允許）

406-用戶端瀏覽器不接受所請求頁面的MIME類型。
407-要求進行Proxy 驗證。
412-前提條件失敗。

413–請求實體太大。
414-請求URI太長。
415–不支援的媒體類型。
416–所請求的範圍無法滿足。

417–執行失敗。
423–鎖定的錯誤。
5xx-伺服器錯誤
伺服器由於遇到錯誤而不能完成該請求。

500-內部伺服器錯誤。
500.12-應用程式正忙於在Web伺服器上重新啟動。
500.13-Web伺服器太忙。

500.15-不允許直接請求Global.asa。
500.16–UNC授權憑據不正確。這個錯誤碼為IIS6.0所專用。

500.18–URL授權存放區不能開啟。這個錯誤碼為IIS6.0所專用。
500.100-內部ASP錯誤。

501-頁首值指定了未實現的配置。
502-Web伺服器用作網關或Proxy 伺服器時收到了無效響應。
502.1-CGI應用程式逾時。

502.2-CGI應用程式出錯。application.
503-服務不可用。這個錯誤碼為IIS6.0所專用。
504-網關逾時。

505-HTTP版本不受支援。
FTP
1xx-肯定的初步回覆

這些狀態碼指示一項操作已經成功開始，但用戶端希望在繼續操作新命令前得到另一個回覆。
110重新啟動標記回覆。

120服務已就緒，在nnn分鐘後開始。
125資料連線已開啟，正在開始傳輸。
150檔案狀態正常，準備開啟資料連線。

2xx-肯定的完成回覆
一項操作已經成功完成。用戶端可以執行新命令。200命令確定。
202未執行命令，網站上的命令過多。

211系統狀態，或系統協助回覆。
212目錄狀態。
213檔案狀態。
214協助訊息。

215NAME系統類別型，其中，NAME是AssignedNumbers文檔中所列的正式系統名稱。
220服務就緒，可以執行新使用者的請求。

221服務關閉控制串連。如果適當，請登出。
225資料連線開啟，沒有進行中的傳輸。

226關閉資料連線。請求的檔案操作已成功（例如，傳輸檔案或放棄檔案）。
227進入被動模式(h1,h2,h3,h4,p1,p2)。

230使用者已登入，繼續進行。
250請求的檔案操作正確，已完成。
257已建立“PATHNAME”。
3xx-肯定的中間回覆

該命令已成功，但伺服器需要更多來自用戶端的資訊以完成對請求的處理。331使用者名稱正確，要求輸入密碼。
332需要登入帳戶。

350請求的檔案操作正在等待進一步的資訊。
4xx-瞬態否定的完成回覆

該命令不成功，但錯誤是暫時的。如果用戶端重試命令，可能會執行成功。421服務不可用，正在關閉控制串連。如果服務確定它必須關閉，將向任何命令發送這一應答。

425無法開啟資料連線。
426Connectionclosed;transferaborted.

450未執行請求的檔案操作。檔案不可用（例如，檔案繁忙）。
451請求的操作異常終止：正在處理本地錯誤。

452未執行請求的操作。系統儲存空間不夠。
5xx-永久性否定的完成回覆

該命令不成功，錯誤是永久性的。如果用戶端重試命令，將再次出現同樣的錯誤。500語法錯誤，命令無法識別。這可能包括諸如命令列太長之類的錯誤。

501在參數中有語法錯誤。
502未執行命令。
503錯誤的命令序列。
504未執行該參數的命令。
530未登入。

532隱藏檔需要帳戶。
550未執行請求的操作。檔案不可用（例如，未找到檔案，沒有存取權限）。

551請求的操作異常終止：未知的頁面類型。
552請求的檔案操作異常終止：超出儲存分配（對於目前的目錄或資料集）。

553未執行請求的操作。不允許的檔案名稱。
常見的FTP狀態碼及其原因

150-FTP使用兩個連接埠：21用於發送命令，20用於發送資料。狀態碼150表示伺服器準備在連接埠20上開啟新串連，發送一些資料。

226-命令在連接埠20上開啟資料連線以執行操作，如傳輸檔案。該操作成功完成，資料連線已關閉。

230-用戶端發送正確的密碼後，顯示該狀態碼。它表示使用者已成功登入。

331-用戶端發送使用者名稱後，顯示該狀態碼。無論所提供的使用者名稱是否為系統中的有效帳戶，都將顯示該狀態碼。

426-命令開啟資料連線以執行操作，但該操作已被取消，資料連線已關閉。

530-該狀態碼表示使用者無法登入，因為使用者名稱和密碼組合無效。如果使用某個使用者帳戶登入，可能鍵入錯誤的使用者名稱或密碼，也可能選擇只允許匿名訪問。如果使用匿名帳戶登入，IIS的配置可能拒絕匿名訪問。

550-命令未被執行，因為指定的檔案不可用。例如，要GET的檔案並不存在，或試圖將檔案PUT到您沒有寫入許可權的目錄。

參考：

http://www.akasuna.com/2012/03/15/jquery-and-ajax-and-jsonp/

http://www.cnblogs.com/mybest/archive/2011/12/13/2285730.html

 

Posted by: 大CC |
OCT23,2012

部落格：cnblogs.com/me115/
[訂閱]

微博：新浪微博