Ajax及其应用

---

1. 什么是Ajax？  

---

        Asynchronous JavaScript and XML，异步的JS和XML，它是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新。

---

2. Ajax工作原理

---

        Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。

        Ajax的工作原理就是通过XML HttpRequest对象来对服务器发送一个异步的请求，从服务器中获得数据，然后用Javascript来操作DOM从而更新局部页面。这样的操作可以在不重新加载整个页面的情况下，对网页的部分进行更新。

        通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。

Ajax工作原理的几个流程步骤

（1）创建一个Ajax对象，即XML HttpRequest对象

（2）创建一个新的HTTP请求，指定该请求的方法和URL以及验证信息

（3）设置响应HTTP请求状态变化的函数

（4）向服务器发送信息

（5）获取异步调用返回数据 

（6）使用JavaSciript和DOM实现局部刷新

---

3. XMLHttpRequest对象的属性、方法和事件

---

XMLHttpRequest方法：

1. open(method，url，ansync)：

用于创建HTTP请求，但请求未发送，

参数：

method，请求类型，例如GET,POST等

url，URL地址，表示要向其发送请求的URL

async，可选的布尔参数，表示是否异步，一般默认为true

2. seed(body)

用于发送HTTP请求，默认为异步，此方法会在请求发送后立即返回，其接受一个可选的参数作为请求主体，如果请求方法是GET或者HEAD则请求主体设置为null

可选的参数：body

body可以为：ArrayBuffer，Blob，Document，DOMString，FormData

body会影响请求头部的content-type默认值，如果使用了xhr.setRequestHeader()手动设置，则默认值会被覆盖

3. abort()

如果该请求已被发出，则该方法将终止该请求，当一个请求被终止后，它的readyState将被设置为0

4. overrideMimeType(mimetype：srting)

该方法是指定一个MIME类型用于替代服务器指定的类型，使服务器响应信息中传输的数据按照该指定的MIME类型处理

参数：mimeType：一个DOMSrting指定的具体的MIME类型去代替有服务器指定的MIME类型，如果服务器没有指定类型，则默认为.XMLHttpRequest"text/xml"

5. setRequestHeader(header：string，value：string)

是设置HTTP请求头部的方法，此方法必须在open()和send()之间调用，如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头

参数header：属性名称，value：属性的值

6. getResponseHeader(name：string)

参数：name，一个字符串，表示要返回的报文项名称

返回包含指定响应头文本的字符串，如果返回的响应头有多个一样的名称，则放回的值会是用逗号和空格将值分隔的字符串

7. getAllResponseHeaders()

返回所有的响应头

无参数

---

XMLHttpRequest属性：

1. readyState

返回一个XMLHttpRequest代理当前所处的状态，五种可能的值：

0：UNSENT（初始状态，未打开）此时xhr创建成功但open()方法未被调用

1：OPENED（已打开，未发送）open()已经被调用成功，send()未被调用

2：HEADERS_RECEIVED（已获取响应头）send()方法已经被调用，响应头和响应状态已经返回

3：LOADING（正在下载响应体）响应体正在下载，此时xhr.response可能已经有了响应数据

4：DONE（整个传输过程结束）整个数据传输过程结束，不管请求是否成功

2. status

返回响应中的数字状态码，如200,302,400等

3. statusText

返回请求中由服务器返回的一个DOMString类型的文本信息，包含了返回状态对应的文本信息，例如"OK"或者是"Not Found"

4. response

返回响应的正文，返回类型取决于responseType

5. responseType

可在send()之前设置，用于指定返回的响应数据类型

6. responseText

在一个请求被发送后，从服务器端返回文本，默认值为空字符串""

只有当responseType为text，""时才xhr对象才有此属性，此时才能调用，否则出错

请求成功才能获取正确的值，当请求未完成或者失败是，值都为空字符串""

7. responseXML

默认值为null

返回一个包含请求检索的HTML或者XML的Document，如果请求未成功、尚未发送、或者检索数据无法正确解析时，为null

默认当做"txt/xml"来解析

当responseType为document时，且xhr对象请求已异步执行时，响应被当做"text/html"来解析

对于其他任何数据为null

8. upload

返回一个XMLHttpRequestUpload对象，用来表示上传的进度，可以通过对其绑定事件来追踪它的进度

可被绑定在upload对象上的事件监听器如下：onloadstart，onprogress，onabort，onerror，onload，ontimeout，onloadend

9. timeout

一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数，默认值为0，意味着没有超时，计时从onloadstart事件触发开始，onloadend事件触发结束，不能为同步请求设置timeout否则抛错

在IE中只能在调用open()方法后send()方法之前设置

10. withCredentials

属性为一个布尔类型，默认值为false，用于跨域请求时将cookie加入到request header

11.responseURL

返回响应的序列化URL，如果URL为空则返回空字符串

---

XMLHttpRequest事件：

1. onloadstart

调用send()方法后立即触发，若send()未被调用则不会触发

2. onprogress

xhr.upload.onprogress在上传阶段(send()之后，xhr.readystate=2)之前触发，每50ms触发一次，下载阶段(xhr.onprogress在xhr.readystate=3时)触发每50ms触发一次

3. onabort

当一个请求终止时，事件触发

4. ontimeout

当进度由于预定的事件到期而终止时，会触发

5. onerror

请求遇到错误时会触发该事件

6. onload

当请求成功完成时触发，xhr.readystate=4

7. onloadend

请求结束时触发，包括成功和失败

8. onreadystatechange

当xhr.State改变时触发，但该值由非0值变为0时，不触发

---

4. 以JSONPlaceHolder为数据服务，编写的案例

GET请求：

var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
        xhr.send();
        xhr.onreadystatechange = function() {
            if (this.readyState === 4) {
                console.log(this.responseText);
            }
        }

POST请求：

var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("userId=114514");
        xhr.onreadystatechange = function() {
            if (this.readyState === 4) {
                console.log(this.responseText); //返回新增的数据.
            }
        }