Jquery下的Ajax调试方法.docx

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);}2??调试工具Firefox 有强大 FireBug 插件，现在比较新的浏览器如 Chrome 和 Safari，以及 IE 8都内置了调试工具，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程（chrome和firefox中调出调试工具的快捷键是ctrl+shift+c)；以下使用FireBug；?调试方法1.使用firebug，查看回调： 对于Ajax方法，是通过异步执行的服务器端程序，如果服务器端出错，在页面上不会显示的，我们需要借助调试工具来查看；例如，将以上示例中#2的注释去掉，触发ajax请求一次