Ajax方法详解以及多个Ajax并发执行

 

 

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

先来一段代码

  
         $.ajax({
             type: "GET或者post",
             url: url,
             data: data,
             dataType: "json",
             success: function(data){
                    aler("请求成功");   
                      }
             error:function(data){
                   aler("请求失败");
        }
         });

常用参数

1.url: 
发送请求的地址（默认为当前页地址）

2.type: 
请求方式（post或get）默认为get

4.async: 
默认设置为true，表示异步请求。如果需要发送同步请求，请将此选项设置为false

5.cache: 
默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息

6.data: 
要求为Object或String类型的参数，发送到服务器的数据

7.dataType: 
预期服务器返回的数据类型
xml：返回XML文档，可用JQuery处理
html：返回纯文本HTML信息
script：返回纯文本JavaScript代码
json：返回JSON数据。
jsonp：JSONP格式
text：返回纯文本字符串

8.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

9.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

多个Ajax并发页面错误解决方法

（1）将并行改串行

function async1(){
   // 第一个ajax请求
    async2();
}
function async2(){
      // 第二个ajax请求
}
//将并行变成串行
async1();

 

多次执行统一个接口也可以用此方法

var a=0;
function async1(a){
   //ajax方法
}
a++;  //执行次数
success(){   //获取接口成功后
     if(a<执行次数){
          async1(a)
     }
}

（2）回调计数

设置计数实现

//计数
var n=0;
function async1(){
    //ajax方法1
callback();
}
function async2(){
//ajax方法2
callback();
}
function callback(){
n++;
if(2==n) console.log('都已执行完毕');
}

（3）jquery

var d1 = $.Deferred();
var d2 = $.Deferred();
 
function async1(){
   d1.resolve( "Fish" );
}
 
function async2(){
   d2.resolve( "Pizza" );
}
 
$.when( d1, d2 ).done(function ( v1, v2 ) {
   console.log( v1 + v2 + '已完成');
});

（4）ajax async设为同步执行

$.when($.ajax, $ajax).done(function() { "AJAX执行成功后,执行的方法"})