1、ajax执行先后顺序
解决方法1：
http://www.cnblogs.com/cdf-opensource-007/p/6371237.html
解决方法2：
写代码时老是遇见要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();
})
}
}
})
}
<html> <!-- JQuery实现页面Loading效果 第一步:添加遮罩层和LOADING层 --> <head> <Meta http-equiv="Content-Type" content="text/html; charset=gbk"> <!-- 第二步：添加CSS样式 --> <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> <!-- 第三步：添加JS控制代码 --> <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