js执行顺序问题-同步请求、异步请求区别

phpvar · 发表于 2013-8-29 09:52:44

<a href = "10481.html" title = "即将上线" class = "popup_links">即将上线</a>
<div class="conWindow">
</div>
<script type="text/javascript">
$(function() {
var artCont,
$('.popup_links').each(function(index, val) {
$(this).click(function() {
artCont = $(this).attr("href");
$(".conWindow").load(artCont, function(responseText, textStatus, xmlHttpRequest) {
alert("第1个alert，这是ajax异步请求！");
})
alert("第2个alert!");
return false;
}).click();
})
});
</script>

复制代码

上面的代码，会先弹alert("第2个alert!");再弹alert("第1个alert，这是ajax异步请求！"); js不是按代码顺序由上到下执行的吗？而我原意也是想先弹第1个alert,再弹第2个alert。

phpvar · 发表于 2013-8-29 10:33:24

ajax默认都是异步请求的。

首页得理解同步请求跟异步请求两者间的区别：
同步请求：提交请求->等待服务器处理->处理完毕返回，同步请求将锁住浏览器， js语句按代码顺序由上到下执行，上面的语句没执行完，下面的语句是无法运行的！

异步请求: 请求通过事件触发->服务器处理（不会阻塞主线程，而会建立一个新的线程来操作，这时浏览器同时可以处理其它事情）->处理完毕 js语句不再按代码先后顺序由上到下执行，ajax请求执行的会同时执行ajax语句后面的js命令。

这就很好理解为什么上面代码运行结果是“先弹alert("第2个alert!");再弹alert("第1个alert，这是ajax异步请求！")”

phpvar · 发表于 2013-8-29 11:32:06

又想用ajax，又想先弹第1个alert,再弹第2个alert，有2种方法：

方法1：
将ajax后面的js语句提到ajax的回调函数中执行，代码如下：

<a href = "10481.html" title = "即将上线" class = "popup_links">即将上线</a>
<div class="conWindow">
</div>
<script type="text/javascript">
$(function() {
var artCont,
$('.popup_links').each(function(index, val) {
$(this).click(function() {
artCont = $(this).attr("href");
$(".conWindow").load(artCont, function(responseText, textStatus, xmlHttpRequest) {
alert("第1个alert，这是ajax异步请求！");
<b>alert("第2个alert!");</b>
})
return false;
}).click();
})
});
</script>
</body>

复制代码

如上代码加粗部分所示！如果使用$.ajax()方法，可使用下列形式使用success回调函数

$.ajax({
success:function(){
alert("第2个alert!");
}
})

复制代码

方法2：
弃用$.load(),改用$.ajax()，方便将ajax请求设置成同步请求，具体代码如下：

<a href = "10481.html" title = "即将上线" class = "popup_links">即将上线</a>
<div class="conWindow">
</div>
<script type="text/javascript">
$(function() {
var artCont;
$('.popup_links').each(function(index, val) {
$(this).click(function() {
artCont = $(this).attr("href");
$.ajax({
url:artCont,
<b> async:false</b>,/*默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，<b>同步请求将锁住浏览器，直至执行完ajax回调函数才会再去执行ajax后面的js语句</b>*/
success: function(XHRtxt,TS){//回调函数
$(".conWindow").html("ajax已改成同步请求，请求状态:"+TS+"<br/>请求内容："+XHRtxt);
alert("第1个alert，这是ajax异步请求！");
}
});
alert("第2个alert!");
return false;
}).click();
})
});
</script>

复制代码

解决问题的关键，得知道同步请求、异步请求两者间的区别！

		自动登录	找回密码
密码			注册帐号