前端技术分享论坛

标题: js执行顺序问题-同步请求、异步请求区别 [打印本页]
作者: phpvar    时间: 2013-8-29 09:52
标题: js执行顺序问题-同步请求、异步请求区别
  1. <a href = "10481.html" title = "即将上线" class = "popup_links">即将上线</a>
  2.         <div class="conWindow">
  3.             <!-- ajax请求内容预留位置 -->
  4.         </div>
  5.         <script type="text/javascript">
  6.         $(function() {
  7.             var artCont,
  8.             $('.popup_links').each(function(index, val) {
  9.                 $(this).click(function() {
  10.                     artCont = $(this).attr("href");
  11.                     $(".conWindow").load(artCont, function(responseText, textStatus, xmlHttpRequest) {
  12.                         alert("第1个alert，这是ajax异步请求！");
  13.                     })
  14.                     alert("第2个alert!");
  15.                     return false;
  16.                 }).click();
  17.             })
  18.         });
  19.         </script>
复制代码
上面的代码，会先弹alert("第2个alert!");再弹alert("第1个alert，这是ajax异步请求！"); js不是按代码顺序由上到下执行的吗？而我原意也是想先弹第1个alert,再弹第2个alert。
作者: phpvar    时间: 2013-8-29 10:33
ajax默认都是异步请求的。

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

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

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


作者: phpvar    时间: 2013-8-29 11:32
又想用ajax，又想先弹第1个alert,再弹第2个alert，有2种方法：

方法1：
将ajax后面的js语句提到ajax的回调函数中执行，代码如下：
  1. <a href = "10481.html" title = "即将上线" class = "popup_links">即将上线</a>
  2.         <div class="conWindow">
  3.             <!-- ajax请求内容预留位置 -->
  4.         </div>
  5.         <script type="text/javascript">
  6.         $(function() {
  7.             var artCont,
  8.             $('.popup_links').each(function(index, val) {
  9.                 $(this).click(function() {
  10.                     artCont = $(this).attr("href");
  11.                     $(".conWindow").load(artCont, function(responseText, textStatus, xmlHttpRequest) {
  12.                         alert("第1个alert，这是ajax异步请求！");
  13.                         <b>alert("第2个alert!");</b>
  14.                     })
  15.                     return false;
  16.                 }).click();
  17.             })
  18.         });
  19.         </script>
  20. </body>
复制代码
如上代码加粗部分所示！如果使用$.ajax()方法，可使用下列形式使用success回调函数
  1. $.ajax({
  2. success:function(){
  3. alert("第2个alert!");
  4. }
  5. })
复制代码
方法2：
弃用$.load(),改用$.ajax()，方便将ajax请求设置成同步请求，具体代码如下：
  1. <a href = "10481.html" title = "即将上线" class = "popup_links">即将上线</a>
  2.         <div class="conWindow">
  3.             <!-- ajax请求内容预留位置 -->
  4.         </div>
  5.         <script type="text/javascript">
  6.         $(function() {
  7.             var artCont;
  8.             $('.popup_links').each(function(index, val) {
  9.                 $(this).click(function() {
  10.                     artCont = $(this).attr("href");
  11.                     $.ajax({
  12.                         url:artCont,
  13. <b>                        async:false</b>,/*默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为  false。注意，<b>同步请求将锁住浏览器，直至执行完ajax回调函数才会再去执行ajax后面的js语句</b>*/
  14.                         success: function(XHRtxt,TS){//回调函数
  15.                             $(".conWindow").html("ajax已改成同步请求，请求状态:"+TS+"<br/>请求内容："+XHRtxt);
  16.                             alert("第1个alert，这是ajax异步请求！");
  17.                         }
  18.                     });
  19.                     alert("第2个alert!");
  20.                     return false;
  21.                 }).click();
  22.             })
  23.         });
  24.         </script>
复制代码
解决问题的关键，得知道同步请求、异步请求两者间的区别！








欢迎光临 前端技术分享论坛 (https://www.phpvar.com/bbs/) Powered by Discuz! X3.2