前端-ajax请求常见问题

来源：互联网发布：淘宝网老是要重新登录编辑：程序博客网时间：2024/05/19 09:17

1、ajax执行先后顺序

解决方法1：

http://www.cnblogs.com/cdf-opensource-007/p/6371237.html

解决方法2：

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

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

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

http://blog.csdn.net/wuyongde_0922/article/details/17420175

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

阅读全文

0 0