ajax 学习整理

AJAX（Asynchronous Javascript And XML）

如名字所示，ajax的含义是异步的JavaScript和XML，ajax不是新的编程语言，而是指与服务器交互数据从而对页面进行局部更新的web技术，xml是一种数据格式，相比于JSON，对数据的描述性更好

使用ajax

1.原生JavaScript

要使用ajax，XMLHttpRequest 对象必不可少，XMLHttpRequest 作为ajax的基础，支持所有的现代浏览器（IE5,IE6不算）

创建XMLHttpRequest 对象，兼容IE5,IE6

var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

ajax请求数据

// 点击ID为send的元素，发送ajax请求
$('#send').click(function () {
    // 请求的5个阶段，对应readyState的值
    // 0: 未初始化，send方法未调用；
    // 1: 正在发送请求，send方法已调用；
    // 2: 请求发送完毕，send方法执行完毕；
    // 3: 正在解析响应内容；
    // 4: 响应内容解析完毕；

    var data = 'name=yang';
  
    //创建一个ajax对象
    var xhr = new XMLHttpRequest();
  
    //对ajax对象进行监听
    xhr.onreadystatechange = function (event) {
        if (xhr.readyState == 4) { //4表示解析完毕
            if (xhr.status == 200) { //200为正常返回
                console.log(xhr)
            }
        }
    };
  
    //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
    xhr.open('POST', 'url', true);
  	// 发送方式为GET，且避免缓存
  	// xhr.open('GET', 'url'++ Math.random(), true);
  
    xhr.send(data);
});

2.jQuery

在jQuery中使用ajax会简单很多，既处理了浏览器兼容问题，而且也对JS代码进行封装，没有原生JS那么臃肿，jQuery中的ajax方法常用的有$.load,$.post， $.get以及 $.ajax`

$.load(从服务器加载数据，并把返回的数据放入被选元素中)

<p></p>

1	$("p").load(URL,data,callback);

$.get(通过GET 请求从服务器上请求数据)

1	$.get(URL,callback);

$.post() (通过 POST 请求从服务器上请求数据)

1	$.post(URL,data,callback);

$.ajax(get，post请求皆可，比较通用)

$.ajax({
    url: "",
    // 请求方式（jQuery 1.9.0以前使用 method ）
    type: "POST",
    // 是否异步
    async: true,
    // 是否清理浏览器缓存（get请求加时间戳也可）
    cache： false,
    // 设置超时时间
    timeout: 5000,
    // post请求的发送到服务器的数据
    data: {},
    // 返回的数据格式,可选项：json/xml/html/script/jsonp/text
    dataType: 'json',
    // 将数据发送到服务器时，使用的内容类型
    contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
    // 同域请求为false， 跨域请求为true
    crossDomain: false,
    // 发送请求前的回调
    beforeSend: function () {},
    // 请求成功的回调
    success: function (data) {},
    // 请求失败的回调
    error: function (err) {},
    // 请求完成之后的回调（success 和 error之后均调用）
    complete: function () {}
});

参考：

11-07 更新

关于$.ajax参数：

complete

请求完成后回调函数，请求success 和 error之后均调用,jQuery 1.5开始， complete设置可以接受一个函数的数组。每个函数将被依次调用

contentType

默认值是”application/x-www-form-urlencoded; charset=UTF-8”，jQuery 1.6 开始，可以传递false，表明没有设置任何内容类型头信息

data （之前一直以为只有POST才会用data。。。）

发送到服务器的数据。它被转换成一个查询字符串,如果已经是一个字符串的话就不会转换。查询字符串将被追加到GET请求的URL后面

error

jQuery 1.5开始, 在error设置可以接受函数组成的数组。每个函数将被依次调用

method

HTTP 请求方法，jQuery 1.9.0 之前的版本，需要使用type选项

success

jQuery 1.5 成功设置可以接受一个函数数组。每个函数将被依次调用

done

一个可供选择的 success 回调选项的构造函数，从jQuery 3.0后success被其取代

fail

一种可供选择的 error 回调选项的构造函数，jQuery 3.0后.fail()方法取代了的过时的.error()方法

always

一种可供选择的 complete 回调选项的构造函数，jQuery 3.0后.always()方法取代了的过时的.complete()方法

then

包含了 .done() 和 .fail()方法的功能，可参考Promise规范（resolve，reject，then）

注意：jqXHR.success(), jqXHR.error(), 和 jqXHR.complete()回调~~从 jQuery 1.8开始被弃用过时。他们将最终被取消，您的代码应做好准备，~~ 从jQuery 3.0开始被删除，你可以使用jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。

jQuery执行之后回调在向promise规范靠拢，promise规范可以参考下列：