1、ajax执行先后顺序

[javascript]view plaincopy 
   
 funcitonA(){
 $.ajax({
 url:"index.html",//异步请求路径
 async：false,//默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
 success:function(){//回调函数
 
 }});
 B();
 }

写代码时老是遇见要ajax请求一些action,之后另外一个B方法想要得到ajax方法返回结果，但是ajax是异步的，所以很有可能还没有执行完就执行B方法了。

解决办法如下：给asysc属性设为false，意思同步请求,这样保证A执行完在执行B。

http://www.jb51.cc/article/p-xmgcawrw-bdq.html

2、一个页面同时发起多个ajax请求，会出现阻塞情况

我知道原因出在哪里了，是PHP的session。执行session_start();后其它进程就无法对session文件进行读或写操作，必须等到该进程结束后才能开始下一个进程。解决的方案是不使用session或用session_write_close();关闭session以让其它进程有操作权限。

http://bbs.csdn.net/topics/390715984

$.ajax()——超时设置，增加 loading 提升体验

前端发送Ajax请求到服务器，服务器返回数据这一过程，因原因不同耗时长短也有差别，且这段时间内页面显示空白。如何优化这段时间内的交互体验，以及长时间内服务器仍未返回数据这一问题，是我们开发中不容忽视的重点。

常见的做法是：

1、设置超时时间，一旦时间超过设定值，便终止请求；
2、页面内容加载之前，手动增加一个 loading 层。

代码如下：

getAjax: function (method,apiUrl,options,callback) {
        var xhr = $.ajax({
            type: method,url: apiUrl,data: options,timeout: 5000,// 设置超时时间
            dataType: "json",beforeSend: function (xhr) {
                $.showLoading();    // 数据加载成功之前，使用loading组件
            },success: function(json) {
                $.hideLoading();    // 成功后，隐藏loading组件
                if(callback && callback instanceof Function === "true") {
                    callback(json);
                }
            },error: function (textStatus) {
                console.error(textStatus);
            },complete: function (XMLHttpRequest,status) {
                if(status == 'timeout') {
                    xhr.abort();    // 超时后中断请求
                    $.alert("网络超时，请刷新",function () {
                        location.reload();
                    })
                }
            }
        })
    }

http://www.cnblogs.com/fayin/p/6387044.html

<html>  <head> <Meta http-equiv="Content-Type" content="text/html; charset=gbk">  <style type="text/css"> * { margin:0; padding:0; list-style-type:none; } a,img { border:0; } .demo { margin:100px auto 0 auto; width:400px; text-align:center; font-size:18px; } .demo .action { color:#3366cc; text-decoration:none; font-family:"微软雅黑","宋体"; } .overlay { position:fixed; top:0; right:0; bottom:0; left:0; z-index:998; width:100%; height:100%; _padding:0 20px 0 0; background:#f6f4f5; display:none; } .showBox { position:fixed; top:0; left:50%; z-index:9999; opacity:0; filter:alpha(opacity=0); margin-left:-80px; } *html,*html body { background-image:url(about:blank); background-attachment:fixed; } *html .showBox,*html .overlay { position:absolute; top:expression(eval(document.documentElement.scrollTop)); } #AjaxLoading { border:1px solid #8CBEDA; color:#37a; font-size:12px; font-weight:bold; } #AjaxLoading div.loadingWord { width:180px; height:50px; line-height:50px; border:2px solid #D6E7F2; background:#fff; } #AjaxLoading img { margin:10px 15px; float:left; display:inline; } </style>  <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" > $(document).ready(function () { var h = $(document).height(); //$(".overlay").css({ "height": h }); $("#btn3").click(function () { ShowLoading(); $.post("../ASHX/Course.ashx",{ json: s,cid: "1234567" },function (data,textStatus) { alert(data + " status:" + textStatus); HiddenLoading(); }) }) function ShowLoading() { $(".overlay").css({ 'display': 'block','opacity': '0.8' }); $(".showBox").stop(true).animate({ 'margin-top': '300px','opacity': '1' },200); } function HiddenLoading() { $(".showBox").stop(true).animate({ 'margin-top': '250px','opacity': '0' },400); $(".overlay").css({ 'display': 'none','opacity': '0' }); } }); </script> </head> <body> <input type="button" id="btn3" value="test"/> <div class="overlay"></div> <div id="AjaxLoading" class="showBox"> <div class="loadingWord"><img src="a.gif">加载中，请稍候...</div> </div> </body> </html> http://www.cnblogs.com/kavilee/p/5032005.html

前端-ajax请求常见问题

$.ajax()——超时设置，增加 loading 提升体验

猜你在找的Ajax相关文章