jquery的ajax同步和异步 - 深海的小鱼儿 - 博客园
之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题。最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
jquery的async:false,这个属性
默认是true：异步，false：同步。
$.ajax({ 
        type: &post&, 
       url: &path&, 
       cache:false, 
       async:false, 
        dataType: ($.browser.msie) ? &text& : &xml&, 
         success: function(xmlobj){ 
        } 
有了这个属性可以相对的减少代码运行书序问题，但是如果用的太多，页面假死次数太多。这样反而导致用户体验不佳~！
$.Ajax()中 async 和success的官方的解释：
Default: true
By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an .
在这里，async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）例：
$.ajax({  
          type:&POST&, 
         url:&Venue.aspx?act=init&, 
           dataType:&html&, 
          success:function(result){   //function1()
             f1(); 
             f2(); 
        } 
         failure:function (result) {  
            alert('Failed');  
         }, 
  } 
  function2(); 
在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2(),也就是说，在这个时候出现两个线程，我们这里暂且说为function1() 和function2()。
          当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，知道function1()部分执行完毕。问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
直接上代码
$('form').submit(function (e) {
// 阻止表单默认提交
e.preventDefault();
var name = $('#name').val();
var password = $('#password').val();
var data = JSON.stringify({"name": name, "password": password});
// 异步发送数据
// 数据传送方式
type: 'POST',
contentType: "application/ charset=utf-8",
// 数据处理文件
url: 'process.php',
// JSON格式数据
data: data,
dataType: 'json',
// @msg: 数据返回值
success: function (msg, status) {
console.log(msg);
error: function (xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
数据传输一直是error
Details: parsererror
Error:SyntaxError: Unexpected token N
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个报错应该是你后台返回的数据的格式不是标准json格式，解析错误。
调试网络请求返回json格式的最简单方法，用chrome 调试工具找到这个请求，看返回的值。
如果preview里是纯文本，就说明格式错误。
如果preview里是如图的对象，就说明格式正确。
另，多多关注我的小站： 专注前端
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
拿到返回到的json.检测一下格式对不对.
这个可以帮你
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
应该就是返回的数据格式有误，不是json。@代码诗人芋头 说了，如果不是的话，他自切丁丁。
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.jQuery同步Ajax带来的UI线程阻塞问题及解决办法_脚本技术_前端技术
您的位置： &
& 详细内容
遇到了同步Ajax引起的UI线程阻塞问题，在此记录一下。
　　事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的：
function getData1(){
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& result =
&&&&&&&&&&& }
&&&&&&& });
　　这里的ajax不能用异步的，否则函数返回时，result还未赋值，会出错。所以我加了async:false。看起来好像没什么问题。我调用这个函数可以正常的得到数据。
$(".btn1").click(function(){
&&&&&&& var data = getData1();
&&&&&&& alert(data);
接下来，要加另外一个功能，由于ajax请求有一定的耗时，所以我需要在发出请求前页面有个loading效果，即显示一张&正在加载&的gif图片，想必大家也都见过。所以我的处理函数就变成了这样：
$(".btn1").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& var data = getData1();
&&&&&&& $(".loadingicon").hide();
&&&&&&& alert(data);
请求之前显示loading图片，请求完成后把它隐藏。看起来也没什么问题。为了看清效果，我的p.php代码sleep了3秒，如下：
echo ("aaaaaa");
但是我运行的时候问题出现了，我点击按钮并未像预想的那样出现这个loading图片，页面什么反应也没有。排除良久找到了原因，就在async:false这里。
浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会&迅速&将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。
setTimeout解决阻塞问题
　　既然明白了问题在哪里，我们就来针对性想办法。为了不让同步ajax请求阻塞线程，我想到了setTimeout，把请求的代码放到sestTimeout中，让浏览器重启一个线程来操作，不就解决问题了吗？于是乎，我的代码就变成了这样：
$(".btn2").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& setTimeout(function(){
&&&&&&&&&&& $.ajax({
&&&&&&&&&&&&&&& url : "p.php",
&&&&&&&&&&&&&&& async : false,
&&&&&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&&&&&&&&&& alert(data);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& });
&&&&&&& }, 0);
　　setTimeout的第二个参数设为0，浏览器会在一个已设的最小时间后执行。不管三七二十一先运行起来看看。
　　结果loading图片显示出来了，但是！！！图片怎么不动呢，我明明是一张动态gif图。这个时候我很快就想到了，虽然同步请求延迟执行了，但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼，连gif图片都不动了，看起来像一张静态图片一样。
　　结论很明显，setTimeout治标不治本，相当于把同步请求&稍稍&异步了一下，接下来还是会进入同步的噩梦，阻塞线程。方案失败。
是时候用Deferred了
　　jQuery在1.5版本之后，引入了Deferred对象，提供的很方便的广义异步机制。详情可参看阮一峰老师的这篇文章。
　　于是我用Deferred对象改写了代码，如下：
function getData3(){
&&&&&&& var defer = $.Deferred();
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& //async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& defer.resolve(data)
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& return defer.promise();
$(".btn3").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& $.when(getData3()).done(function(data){
&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&& alert(data);
&&&&&&& });
　　可以看到我在ajax请求中去掉了async:false，也就是说，这个请求又是异步的了。另外请注意success函数中的这一 句：defer.resolve(data)，Deferred对象的resolve方法可传入一个参数，任意类型。这个参数可以在done方法中拿到， 所以我们异步请求来的数据就可以以这样的方式来返回了。
　　至此，问题得到了解决。Deferred对象如此强大且方便，我们可以好好利用它。
　　我的全部测试代码如下，有意的同学可以拿去测一下：
&button class=&btn1&&async:false&/button&
&button class=&btn2&&setTimeout&/button&
&button class=&btn3&&deferred&/button&
&img class=&loadingicon& style=&position:left:50%;top:50%;margin-left:-16margin-top:-16display:& src=/Web/Jquery/&loading2.gif& alt=&正在加载& /&
&&& function getData1(){
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& result =
&&&&&&&&&&& }
&&&&&&& });
&&& $(".btn1").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& var data = getData1();
&&&&&&& $(".loadingicon").hide();
&&&&&&& alert(data);
&&& $(".btn2").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& setTimeout(function(){
&&&&&&&&&&& $.ajax({
&&&&&&&&&&&&&&& url : "p.php",
&&&&&&&&&&&&&&& async : false,
&&&&&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&&&&&&&&&& alert(data);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& });
&&&&&&& }, 0);
&&& function getData3(){
&&&&&&& var defer = $.Deferred();
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& //async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& defer.resolve(data)
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& return defer.promise();
&&& $(".btn3").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& $.when(getData3()).done(function(data){
&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&& alert(data);
&&&&&&& });
&&& });&/script&
PS:Firefox有做优化？
　　上述问题在chrome和IE9中测试结论一致。但是我在Firefox中测试时，同步ajax并未阻塞掉UI线程，也就是说这个问题根本不存 在。我用其他代码做了测试，在Firefox中js线程确实是会阻塞UI线程，这个没有疑问。那可能的一个猜测就是Firefox对同步ajax做了优 化，事实到底是什么，我暂未得知。有高人知道还请指点。
( 18:52:52)
( 18:52:50)
( 15:49:41)
( 15:48:44)
( 11:42:57)
( 11:42:55)
( 16:55:05)
( 13:46:01)
相关排行总榜简单认识JQuery的Ajax中的ajax()方法
简单认识JQuery的Ajax中的ajax()方法
& & 之前在JavaScript的学习过程中学习过Ajax，写了一个微小的Ajax骨架，最近一段时间学习了JQuery中的Ajax，总结一下。
服务端的搭建：
& &&& & Ajax是用来与服务端进行异步通信的，在学习Ajax的过程中，如果没有一个服务器来提供数据以供本地来请求，那么学习效果就会打折扣，所以要先起个服务器。
& &&& & 我用了以前学习中用到过得wamp作为服务器程序，自己编写服务器端的代码，用php这门语言，听说过php（“php是最好的语言“）但是没用过，所以借这个机会学习一下，有C语言和Java的基础学起来应该不会很难吧，而且服务器端代码的编写以前也做过不止一次，让我想起了以前做过的.Net餐饮后台管理系统和JavaWeb的网上交易系统。现在无非就是换一种语言而已，编程思想应该是大同小异的，而且这次也就是用简单的数组来模拟一下数据的存储、检索和取出，比操作数据库应该是要简单一些的，于是在学习了php的一些语法后就开始写起，写了一个简单到不能再简单的服务器端php程序。
& &&& &&& &&
& PS：这里用JSON作为数据传输的形式。
&&先进行约定：服务器返回的JSON中的数据项有:
&success&:true/false,//表明请求是否成功，设置这一项可以防止一些通过网络表现不会出来的逻辑上的错误&errorMsg&:&说明错误原因&,//数据传输成功了，但是因为逻辑上而不是因为网络上的错误(比如没有找到记录)没能正确处理&favFruit&:&XXX&//查到的结果&userName&:“用户名”
服务端php代码如下：
&?phpheader(&Content-type:application/JSON;charset=utf-8&);//充当数据源的多维数组，在开发中本应该使用数据库等方式来保存数据，这里就简略一些吧。下同。$fruit = array( array(&userName& =& &Jack&, &favFruit&=&&apple&), array(&userName& =& &韩梅梅&, &favFruit&=&&melon&), array(&userName& =& &小明&, &favFruit&=&&peach&), array(&userName& =& &Obama&, &favFruit&=&&Lemon&));//判断客户端用的是什么方法，调用不同的处理方式//$_SERVER是一个超全局变量if ($_SERVER[&REQUEST_METHOD&] == &GET&) { search();}elseif ($_SERVER[&REQUEST_METHOD&] == &POST&) { create();}//对应GET方式的search()方法function search(){ /*
$_GET 和 $_POST 都为超全局变量，用来收集提交的数据,
检测判断提交上来的数据是不是不存在或者为空，其实应该对数据进行检测判断的方面有很多，比如格式、长度等等，这里知识模拟一下，适当简略了一些. */ if (!isset($_GET[&userName&]) || empty($_GET[&userName&])) {
echo ' {&success&:false,&errorMsg&:&参数不能为空&} ';//输出JSON格式的结果
return; } global $fruit;//global来申明访问本函数内的全局变量 $keyWord = $_GET[&userName&]; $result = '{ &success&:false,&errorMsg&:&不存在这条记录& }';//初始化结果变量，默任为失败 foreach ($fruit as $value) {//循环比较关键值
if($value[&userName&] == $keyWord){
&success&:true,
&userName&: &'. $value[&userName&] .'&,
&favFruit&: &'. $value[&favFruit&] .'&
} } echo $result;//将结果输出}function create(){ if ( !isset($_POST[&userName&]) ||
!isset($_POST[&favFruit&]) ||
empty($_POST['userName'])
empty($_POST[&favFruit&])
echo ' { &success&:false,&errorMsg&:&参数不能为空&
return; } //这里并没用真正的存储，只是模拟了一下，毕竟目的是学习Ajax $result = '{ &success&:true }'; echo $result;//将结果输出}?&
& &&& & 这里数据单位很简单，userName和favFruit，即姓名和最爱的水果。
& &&& &&前台页面通过姓名来查找对应人最爱的水果，返回查找结果，由GET方式发出请求；还可以填写人名及其最爱的水果存储到服务器上，返回存储结果（成功或失败），用POST方式完成。
&&前台页面
& &&& &&写个简单到不能再简单的页面做个示意：
& &&& & HTML代码如下：
id=&searText& type=&text& placeholder=&你要搜索的姓名&
id=&searBtn&搜索他爱吃的水果
id=&searRes& style=&width: 30em;height: 2em;& id=&createName& type=&text& placeholder=&你的姓名& id=&createFavFruit& type=&text& placeholder=&你爱吃的水果& id=&createBtn&添加你爱吃的水果
id=&createRes& style=&width: 30em;height: 2em;&
&&&界面如下：
&&要实现的效果：
输入一条服务器中不存在的数据进行查询，输出错误信息：&
输入一条服务器中存在的数据进行查询，输出查找结果：
向服务器添加姓名和水果，返回添加结果：
原生JavaScript实现Ajax:
& &&& &&& & 创建&XMLHttpRequest 的实例，为了兼容性，为了可爱的低版本IE， 还是别忘了对 ActiveXObject 的判断吧。之后调用open方法对请求URL，请求方法和同步或异步进行设置(注意如果使用post方法，那么应该在调用open方法之前设置一下请求头，代码在下面)。之后调用send()方法发送，参数为要发送的数据，GET方式通过URL传递数据，可以将数据写在open()方法的URL中，也可以写在send()方法的参数中；但是用POST方式时数据必须写在send()方法的参数中。之后就是监听readystatechange事件了。
& &&& &&& &&&处理JSON数据时最好用parse()方法来解析，相比eval()方法的优点网上可以搜索到很多。
& &&& &&& & 代码如下：
window.onload = function() { var searBtn = document.getElementById('searBtn'); var searText = document.getElementById('searText'); var searRes = document.getElementById('searRes'); var createBtn = document.getElementById('createBtn'); var createName = document.getElementById('createName'); var createFavFruit = document.getElementById('createFavFruit'); var createRes = document.getElementById('createRes'); searBtn.onclick = function() {//用GET方法
var keyWord = searText.value;
if (window.ActiveXObject)
var myReq = new ActiveXObject(&Microsoft.XMLHTTP&);
} else if (window.XMLHttpRequest)
var myReq = new XMLHttpRequest();
myReq.open(&GET&,&myJSONServer.php?userName=& +
keyWord);//用GET方法
myReq.send();
myReq.onreadystatechange = function() {
if (myReq.readyState == 4) {
if (myReq.status == 200) {
var result = JSON.parse(myReq.responseText);
if (result[&success&]) {
searRes.innerHTML = result[&userName&] + &最喜欢的水果是:& + result[&favFruit&];
searRes.innerHTML = (&出现错误:&+ result.errorMsg);
alert(&发生错误& + myReq.status);
}; }; createBtn.onclick = function() {//用POST方法
var createNameTxt = createName.value;
var createFavFruitTxt = createFavFruit.value;
if (window.ActiveXObject)
var myReq = new ActiveXObject(&Microsoft.XMLHTTP&);
} else if (window.XMLHttpRequest)
var myReq = new XMLHttpRequest();
myReq.open(&POST&,&myJSONServer.php&);//用POST方法
//setRequestHeader在open后面,参数为：
//Content-Type: application/x-www-form-urlencoded(在fiddle中以POST方法测试时也要加上下面这行代码)
myReq.setRequestHeader(&Content-type&,&application/x-www-form-urlencoded&);
myReq.send(&userName=& + createNameTxt+&&favFruit=&+createFavFruitTxt);
myReq.onreadystatechange = function() {
if (myReq.readyState == 4) {
if (myReq.status == 200) {
var r = myReq.responseText;
var result = JSON.parse(r);
if (result[&success&]) {
createRes.innerHTML = &添加成功&;
createRes.innerHTML = (&出现错误:&+ result.errorMsg);
alert(&发生错误& + myReq.status);
JQuery实现Ajax
使用较底层的ajax方法来实现，不用getJSON()等方法。
& &&& & 使用了JQuery的ajax方法很方便，只需要填写几个参数，有了error和success也不用自己判断网络上传输的成功或者失败了，处理JSON数据也很方便啊，JQuery会自动将JSON解析完成，直接用就可以了。
$(document).ready(function() { $(&#searBtn&).click(function() {
type:&GET&,
dataType:&JSON&,
url:&myJSONServer.php?userName=&+$(&#searText&).val(),
success:function(data){//data is already a JSON
if (data.success) {
$(&#searRes&).html(data.userName+&爱吃的水果是&+data.favFruit);
$(&#searRes&).html(&出现错误:&+data.errorMsg);
error:function(XHR) {
alert(XHR.status);
}); }); $(&#createBtn&).click(function() {
type:&POST&,
dataType:&JSON&,
url:&myJSONServer.php&,
userName:$(&#createName&).val(),
favFruit:$(&#createFavFruit&).val()
success:function(data) {
if (data.success) {
$(&#createRes&).html(&添加成功&);
$(&#createRes&).html(&添加失败:&+data.errorMsg);
error:function(XHR) {
alert(XHR.status);
}); });});
JSONP与跨域：
背景：通过XMLHttpRequest(下面简称为XHR)实现的Ajax通信会受到一种称为跨域安全策略的限制，意思是，默认情况下XHR对象只能&& & &访问与所在的页面位于同一个域中的资源，本意是为了安全，但是也给合法的跨域请求造成了困难。JQuery
ajax 方法使用jqXHR对象会在XMLHttpRequest对象存在的情况下封装这个对象的行为，在不可用的情况下会尽可能的模拟它的行为，所以jqXHR也会受到跨域安全限制的影响。如果要实现跨域传送JSON数据可以用下面的几个方法：代理，XHR2，Comet和JSONP等等，下面说JSONP。
关于JSONP：
& &&& & 全称是JSON&with padding，可以翻译为填充式JSON，形式看起来就是一个被包含在函数中的JSON。由于&script&元素想要从其他域中加载资源是不受限制的，所以可以用这个标签将要传输的JSON数据包装起来，就实现了跨域。
& &&& & 由两部分组成：数据和回调函数。回调函数是相应到来时应该在页面中调用的函数，函数名一般是在请求中制定的，这样请求端在服务器相应并返回数据时可以清楚的知道要通过哪一个函数名来调用这个函数。美好的JQuery会把我们指定的回调函数名转码发送。
& &&& & 放一个下面例子中JSONP的请求（红色部分是JQuery转码处理过的）:
http://localhost/JsonpServer.php?userName=%E9%9F%A9%E6%A2%85%E6%A2%85&callback=jQuery&_=4
实现可以处理JSONP的服务端程序：
& &&& &&& &要实现JSONP不仅需要在请求端发送JSONP请求，而且服务端也要可以处理JSONP请求，所以先写一个可以处理JSONP请求的服务端程序。其实这个程序不难写，在上面的JSON服务程序上改动几处就可以。
& &&& &&& & 这里只改动search()方法，因为search()方法处理GET请求，而JSONP只能用以GET请求。
function search(){ $jsonp = $_GET[&callback&];//&-----------改动：获取回调函数 if (!isset($_GET[&userName&]) || empty($_GET[&userName&])) {
echo $jsonp.' ({ &success&:false,&errorMsg&:&参数不能为空&
return; } global $fruit; $keyWord = $_GET[&userName&]; //-----------改动：将结果的JSON数据用()包起来之后用.再和上面的新获取的$jsonp连接起来 $result = $jsonp .'({ &success&:false,&errorMsg&:&不存在这条记录& })';
foreach ($fruit as $value) {
if($value[&userName&] == $keyWord){
//-----------改动：将结果的JSON数据用()包起来之后用.再和上面的新获取的$jsonp连接起来
$result = $jsonp .'({
&success&:true,
&userName&: & '. $value[&userName&] .' &,
&favFruit&: & '. $value[&favFruit&] .' &
} } echo $result;}
用JQuery处理JSONP：
& &&& & 在上面处理JSON代码基础上稍加改动即可让JQuery处理JSONP数据，
1：将dataType改为JSONP;
2:指定回调函数名。
& &&& & 代码如下：
$(&#searBtn&).click(function() { $.ajax({
type:&GET&,
dataType:&jsonp&,//将dataType改为JSONP
//指定回调函数名,这里指定为callback，应该与上面服务器程序接受的一样$jsonp = $_GET[&callback&];
jsonp:&callback&,
url:&JsonpServer.php?userName=&+$(&#searText&).val(),
timeout:10000,
success:function(data){//data is already a json
if (data.success) {
$(&#searRes&).html(data.userName+&爱吃的水果是&+data.favFruit);
$(&#searRes&).html(&出现错误:&+data.errorMsg);
error:function(XHR) {
alert(XHR.status);
Ajax Promise的简单应用
& &&& & jqXHR对象是一种Promise对象，它提供了一些方法，通过使用这些方法可以实现不少好处，下面就说说.done()和.fail()方法，可以用这两种方法分别替换上面使用的success()和error()方法，结合.always()方法实现一个loading滚动条效果，代码如下：
$(&#searBtn&).click(function() {
$(&#searRes&).addClass('loading');//.loading{background: url(loading.gif) left top no-}
type:&GET&,
dataType:&json&,
url:&myJsonServer.php?userName=&+$(&#searText&).val(),
timeout:10000//设置超时时间，防止漫长的等待
}).done(function(data){
if (data.success) {
$(&#searRes&).html(data.userName+&爱吃的水果是&+data.favFruit);
$(&#searRes&).html(&出现错误:&+data.errorMsg);
}).fail(function(XHR) {
alert(XHR.status);
}).always(function() {
$(&#searRes&).removeClass('loading');//&--------------------------
我的热门文章
即使是一小步也想与你分享}