jquery uses the Firefox Firebug plug-in to debug Ajax steps to explain

  This article describes the Ajax debugging methods under jquery, jquery Ajax provides a full-featured $.ajax () method, as well as $.get (), $.getscript (), $.getjson (), $.post (), and $ (). A simpler method, such as load (),

First of all, we use an example to illustrate the Ajax invocation of jquery,   implementation of a function is: Click on the Confirmation Payment button, realize the balance payment function:   1. First, in the PHP page, you bind the function you want to call to the button:     The code is as follows: <input type= "Submit" Name= "pay_btn" id= "pay_btn" value= "confirm payment"/>   <script type= "Text/javascript" >   $ (function () {      $ ("#pay_btn"). Bind ("click", Abc.balancepay);  });       2. Script:   If implemented using $.post mode:     code as follows: var ABC = {      BALANCEPAY:FUNCTI On (event) {          Event.preventdefault ();           var tthis = $ (Eve Nt.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) {        &NBSp        //console.log (' Here is printed through console '); #4                   $ ("#msg"). Text (' Result: ' +data);  });  }       $.post methods You can also specify callback functions directly: The     code is as follows: var jqxhr = $.post (URL, data, function (data) {&NBSP ;             $ ("#msg"). Text (' Result: ' +data);  }, ' Jsonp ');       Using the $.ajax method:     Code is as follows: var jqxhr = $.post (URL, data, function (data) {              $ ("#msg"). Text (' Result: ' +data);  }, ' Jsonp ');       Using the $.ajax method:     Code is as follows: var jqxhr = $.ajax ({            &NBS P Type: ' Post ',               Url:url,               Data: {code: ' 15′},               dataType: ' Jsonp ',               Sccuess:function (data) {              alert (' Good ');},               Error:functio N (XMLHttpRequest, Textstatus, Errorthrown) { //#3这个error函数调试时非常有用, if parse is incorrect, will eject error box         & nbsp               alert (xmlhttprequest.status);                         alert (xmlhttprequest.readystate);                         alert (textstatus); Paser error;                    },  }       3. Server side:     Code as follows: Public function Actioninterpayproc ($callback)   { //header ("C Ontent-type:text/javascript ");  //header (' content-type:text/html; charset=utf-8′);             $code = $_post[' code '];          //$code  //#1 Here is a syntax-error expression          //echo $code;  //#2   Tag, for debugging instructions,           ...         $result = 1;              //echo $_post[' callback '. ' (' Json_encode ($result). ‘);';/ /Note that the encoding used should be consistent with the client request;   exit (0);  }       Debugging Tools   Firefox has a powerful Firebug plug-in, now newer browsers such as Chrome and Safari, as well as IE 8 built-in debugging tools, with these debugging tools, can be very detailed The process of viewing Ajax (the shortcut key for debugging tools in Chrome and Firefox is ctrl+shift+c); The following uses Firebug     1. Use Firebug to view callbacks:   for Ajax methods, is a server-side program that executes asynchronously, and if the server-side error is not displayed on the page, we need to use the Debugging tools to view it; For example, remove the comments in the example above, trigger the AJAX request once, and view the wrong return results in the console panel:           If the server-side program goes wrong, you can see it directly, and the reason for the error is the same as the average page, except that it is viewed in the AJAX-returned panel (no display in the Web browser page). The point here is that if you use the Echo method on the server side to print out the variables that need to be viewed, the result of the AJAX call must be a failure, because the name of the callback function appears to have been changed, resulting in unresolved;   For example, the printed variable is 333, Then the result of the final callback is: 333ajaxcallbak (1); The client looks for the 333ajaxcallbak function name and cannot parse it.   2. Print error message using the error function:   $.ajax () has an error parameter that specifies a function that will be called when the request fails. Here's AInformation, very useful for debugging   error:function (XMLHttpRequest, Textstatus, Errorthrown)   The first argument returned by the error event XMLHttpRequest some useful information:   Xmlhttprequest.readystate:   Its return status code corresponds to an error description:   Status code   0 -(uninitialized) has not called the Send () method   1-(load) has called the Send () method. Sending Request   2-(loading complete) Send () method execution completed, received all response content   3-(interactive) parsing response content & nbsp 4-(complete) Response content parsing completed, you can call the   Xmlhttprequest.status on the client:   The status code returned here is the HTTP status we see daily, such as 404, indicating that no page was found;   Textstatus:   "Timeout", "error", "Notmodified" and "ParserError".   (Default: Automatic judgment (XML or HTML)) call time when a request fails. The parameter has the following three: XMLHttpRequest object, error message, optionally caught error object. If an error occurs, the error message (the second argument) may be "timeout", "error", "Notmodified", and "ParserError" in addition to being null.   Through this error function, the error of the program is easy to troubleshoot;   such as the top of the corner, remove the annotation, the equivalent of changing the callback function name; Erro: ParserError   3. Use Console.log printout: (Alert () can also)   This is only an auxiliary method for enhancing the debugging experience. For the attention variable tracking in JS, we can print out the alert () method, but the pop-up box is often annoying. Console.log is an alternative, and it is a way of Firebug plug-ins. Console.log the printed variable results are displayed in the Firebug console panel;   Possible cause of error:   1. If the returned result is malformed, it can be in the FirebugSee results   2. For JSON requests, the format is stricter:   If the error function is the error: ParserError   Possible cause is the problem of server-side scripting coding The first line that can be processed within the service-side processing function plus the corresponding header information:   Eg:header (' content-type:text/html; Charset=utf-8 ');   Of course, the most likely format is not correct:     code as follows: Echo "{' re ': ' Success '}"; jquery cannot parse echo "{Re": "Success"}; there is no error     Do not output weird JSON-formatted strings, or jq1.4+ versions do not perform success callbacks. such as {abc:1} or {' abc ': 1}, to output       code as follows: {"ABC": 1}   {' Success ': true} to {"Success": true}