ajax总结

1. Ajax

1.1 原生JavaScript封装Ajax

function Ajax(type, url, data, success, failed){
    // 创建ajax对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
 
    var type = type.toUpperCase();
    // 用于清除缓存
    var random = Math.random();
 
    if(typeof data == 'object'){
        var str = '';
        for(var key in data){
            str += key+'='+data[key]+'&';
        }
        data = str.replace(/&$/, '');
    }
 
    if(type == 'GET'){
      //open:启动请求以备发送
        if(data){
            xhr.open('GET', url + '?' + data, true);
        } else {
            xhr.open('GET', url + '?t=' + random, true);
        }
        xhr.send(null);//发送请求
 
    } else if(type == 'POST'){
        xhr.open('POST', url, true);
        // 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
 
    // 处理返回数据
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){//已经接收到全部数据,可以在客户端使用了
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){//响应的http状态码
              
                success(xhr.responseText);
            } else {
                if(failed){
                    failed(xhr.status);
                }
            }
        }
    }
}
 
// 测试调用
var sendData = {name:'asher',sex:'male'};
Ajax('get', 'data/data.html', sendData, function(data){
    console.log(data);
}, function(error){
    console.log(error);
});

1.2 jquery ajax 及其 快捷方法

  • $.ajax()

从 jQuery 1.5 开始,$.ajax()返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性,方法和行为。推荐使用的注意事项: jqXHR.success(), jqXHR.error(), 和 jqXHR.complete()回调从 jQuery 1.8开始 被弃用。他们将最终被取消,您的代码应做好准备,使用jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。

  • .load():从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素中。

这个方法是从服务器获取数据最简单的方法。除了不是全局函数,这个方法和$.get(url, data, success)基本相同,它有一个隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 textStatus是 "success" 或者 "notmodified")时,.load()方法将返回的HTML 内容数据设置到相匹配的节点中。这就意味着大多数采用这个方法可以很简单:
$('#result').load('ajax/test.html');

  • $.get()
  url: url,
  data: data,
  success: success,
  dataType: dataType
});```

* $.post()
```$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});```
* $.getScript()
```$.ajax({
url: url,
dataType: "script",
success: success
});```
* $.getJSON()
```$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});

1.3 多ajax请求的各类解决方案(同步, 队列, cancel请求)

如何利用jquery来处理下面几种case:

  1. 多个ajax请求同时发送,相互无依赖。
  2. 多个ajax请求相互依赖,必须有先后顺序。
  3. 多个请求被同时发送,只需要最后一个请求。

具体应用查看链接

第1种case
应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序。

处理方案: 直接用jquery的ajax函数。这个用的非常多,这里从略,可看后面的代码中例子。

第2种case
应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果。例如: 用户登录后我们发送一次请求得到用户的应用ID,然后利用应用ID发送一次请求得到具体的应用内容(例子虽然不是太恰当,但基本就是这个意思了)。

处理方法:

  1. 利用ajax参数async设置为false,进行同步操作。(这个方法只适合同域操作,跨域需使用下面两种方法)
  2. 利用ajax嵌套(这个同第1种情况):在.done()里不断嵌套执行
  3. 利用队列进行操作(.queue():默认是 fx,标准的动画队列。用法详解:jQuery中queue和dequeue的用法)

第3中case
应用场景: 比较典型的是autocomplete控件的操作,这个我们可以使用第2种情况的处理方法,但我们可能只需要最后次按键后返回的结果,这样利用第2种处理方法未免有些浪费。处理方法: 保留最后一次请求,cancel之前的请求。

(function ($) {
var jqXhr = {};
 $.ajaxSingle = function (settings) {
       //jQuery对象本身有一个ajaxSettings属性,是默认的ajax配置。我们设置参数后会覆盖原有配置。
        var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);
        if (jqXhr[options.className]) {
            jqXhr[options.className].abort();
        }

        jqXhr[options.className] = $.ajax(options);
    };
})(jQuery);

你可能感兴趣的