ajax属性总结,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:

多个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);