JavaScript基础笔记（十二）Ajax

Ajax

一、XMLHttpRequest对象

一）XHR用法

    var xhr = new XMLHttpRequest();
    //open()方法，参数一：发送方法，参数二：请求的URL，参数三：是否发送异步请求
    //调用open()方法不会真正发送请求，只是启动一个请求以备发送。
    xhr.open('get', 'test.txt', false);
    //send()方法接受一个参数，即作为请求主体要发送的数据，如果无数据也要传入null
    xhr.send(null);
    //在收到请求后响应的数据会自动填充到XHR对象的属性中
    /*
    * 相关属性介绍如下：
    * 1）responseText:服务器返回的文本
    * 2）responseXML:响应的XML
    * 3）status:响应的状态,200表示成功，此时responseText和responseXML
    * 都可以访问了,304表示访问的资源没有被修改,可以使用直接使用浏览器缓存。
    * 4）statusText:状态的说明
    *
    * */

当我们发送异步请求时可以检测xhr对象的readyState，以表示请求的状态属性其值可以是：

1）0：尚未调用open()方法

2）1：已经调用open()方法，但还没有调用send()方法

3）2：已经调用send()方法，但还没有接收到响应

4）3：已经接收到部分响应数据

5）4：已经接收到全部响应数据

readyState属性的值由一个变为另一个都会触发readystatechange事件。

注意：必须在open()调用之前定义readystatechange事件处理程序才能确保跨浏览器兼容问题。

    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };
    xhr.open("get", "example.txt", true);
    xhr.send(null);

这个例子在 onreadystatechange 事件处理程序中使用了 xhr 对象，没有使用
this 对象，原因是 onreadystatechange 事件处理程序的作用域问题。如果使用
this 对象，在有的浏览器中会导致函数执行失败，或者导致错误发生。因此，使用
实际的 XHR 对象实例变量是较为可靠的一种方式。

另外，在接收到响应之前还可以调用 abort()方法来取消异步请求，如下所示：
xhr.abort();
调用这个方法后， XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在
终止请求之后，还应该对 XHR 对象进行解引用操作。由于内存原因，不建议重用 XHR 对象。

二）HTTP头部信息

 Accept：浏览器能够处理的内容类型。
 Accept-Charset：浏览器能够显示的字符集。
 Accept-Encoding：浏览器能够处理的压缩编码。
 Accept-Language：浏览器当前设置的语言。
 Connection：浏览器与服务器之间连接的类型。
 Cookie：当前页面设置的任何 Cookie。
 Host：发出请求的页面所在的域 。
 Referer：发出请求的页面的 URI。注意， HTTP 规范将这个头部字段拼写错了，而为保证与规
范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）
 User-Agent：浏览器的用户代理字符串。

1）setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段
的名称和头部字段的值。要成功发送请求头部信息，必须在调用 open()方法之后且调用 send()方法
之前调用 setRequestHeader()

2）getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串

三）GET请求

使用 GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名
称和值都必须使用 encodeURIComponent()进行编码，然后才能放到 URL 的末尾；而且所有名-值对
儿都必须由和号（&）分隔

四）POST请求

默认情况下，服务器对 POST 请求和提交 Web 表单的请求并不会一视同仁。因此，服务器端必须有
程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用 XHR 来模仿表单提
交：首先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded，也就是表单
提交时的内容类型，其次是以适当的格式创建一个字符串

POST 数据的格式与查
询字符串格式相同。如果需要将页面中表单的数据进行序列化，然后再通过 XHR 发送到服务器，那么
就可以使用 serialize()函数来创建这个字符串

xhr.open("post", "postexample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

二、XMLRequest 2级

一）FormData

FormData用于序列化表单以及创建与表单相同的格式的数据（用于通过XHR传输）

    var data = new FormData();
    //append(name, value)分别对应表单中的键和值
    data.append("name", "Jerry");
    var data2 = new FormData(document.forms[0]);
    //创建了formData后可以将他传给send()方法

二）超时设定

XHR的timeout属性，可以设置超时时间，请求在等待多少秒无响应后就终止。超时时会触发ontimeout事件。