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:
- 多个ajax请求同时发送，相互无依赖。
- 多个ajax请求相互依赖，必须有先后顺序。
- 多个请求被同时发送，只需要最后一个请求。
具体应用查看链接
第1种case
应用场景： 这个场景很多，一个页面打开是多个区域同时请求后台得到各自的数据，没依赖，没顺序。
处理方案： 直接用jquery的ajax函数。这个用的非常多，这里从略，可看后面的代码中例子。
第2种case
应用场景： 多个ajax请求，需要顺序执行，后一个ajax请求的执行参数是前一个ajax的结果。例如： 用户登录后我们发送一次请求得到用户的应用ID，然后利用应用ID发送一次请求得到具体的应用内容（例子虽然不是太恰当，但基本就是这个意思了）。
处理方法：
- 利用ajax参数async设置为false，进行同步操作。(这个方法只适合同域操作，跨域需使用下面两种方法)
- 利用ajax嵌套（这个同第1种情况）:在.done()里不断嵌套执行
- 利用队列进行操作(.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);
