AJAX-白红宇

1.AJAX

是Asynchronous JavaScript and XML 的缩写，指的是通过JavaScript的异步通信，从服务器获取xml文档从中提取数据，再更新到网页的对应部分，而不用刷新整个网页

2.AJAX包括以下四个步骤

1. 创建XMLHttpRequest实例 //var xhr = new XMLHttpRequset();2.发出http请求 xhr.open('GET','http://www.example.com/page.php',true)3.接收服务器传回的数据4.更新网页数据复制代码

(注意： AJAX只能向同源网址(协议，域名，端口都相同)发出请求，如果发出跨域请求就会报错）

XMLHttpRequest对象简单用法

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){    //监听通信状态（readyState属性）的变化。  // 通信成功时，状态值为4  if (xhr.readyState === 4){    if (xhr.status === 200){      console.log(xhr.responseText);    } else {      console.error(xhr.statusText);    }  }};xhr.onerror = function (e) {  console.error(xhr.statusText);};xhr.open('GET', '/endpoint', true);xhr.send(null);一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数复制代码

3.XMLHttpRequest实例属性

1. XMLHttpRequest.readyState

返回值：整数，表示实例对象的当前状态，只读。```0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。1，表示open()方法已经调用，但是实例的send()方法还没有调用，    仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。3，表示正在接收服务器传来的数据体（body 部分）。    这时，如果实例的responseType属性等于text或者空字符串，    responseText属性就会包含已经收到的部分信息。4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。```通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会发生改变，这个值每一次变化，都会触发readyStateChange事件```var xhr = new XMLHttpRequest();if (xhr.readyState === 4) {  // 请求结束，处理服务器返回的数据} else {  // 显示提示“加载中……”}上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP请求已经成功。其他情况，都表示 HTTP 请求还在进行中。```复制代码

2.XMLHttpRequest.onreadystatechange

```XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。```复制代码

3.XMLHttpRequest.response

XMLHttpRequest.response属性表示服务器返回的数据体（即 HTTP 回应的 body部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。复制代码

4.XMLHttpRequest.responseType

XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text。复制代码

XMLHttpRequest.responseType属性可以等于以下值:

”“（空字符串）：等同于text，表示服务器返回文本数据。“arraybuffer”：ArrayBuffer 对象，表示服务器返回二进制数组。“blob”：Blob 对象，表示服务器返回二进制对象。“document”：Document 对象，表示服务器返回一个文档对象。“json”：JSON 对象。“text”：字符串。复制代码

5.XMLHttpRequest.responseText

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。复制代码

6.XMLHttpRequest.responseXML

XMLHttpRequest.responseXML属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null。复制代码

7.XMLHttpRequest.responseURL

XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址。复制代码

注意，这个属性的值与open()方法指定的请求网址不一定相同。如果服务器端发生跳转，这个属性返回最后实际返回数据的网址。另外，如果原始 URL 包括锚点（fragment），该属性会把锚点剥离

8.XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。复制代码

200, OK，访问正常301, Moved Permanently，永久移动302, Move temporarily，暂时移动304, Not Modified，未修改307, Temporary Redirect，暂时重定向401, Unauthorized，未授权403, Forbidden，禁止访问404, Not Found，未发现指定网址500, Internal Server Error，服务器发生错误复制代码

9 XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials属性是一个布尔值，表示跨域请求时，用户信息（比如 Cookie 和认证的 HTTP头信息）是否会包含在请求之中，默认为false，即向example.com发出跨域请求时，不会发送example.com设置在本机上的 Cookie（如果有的话）。如果需要跨域 AJAX 请求发送Cookie，需要withCredentials属性设为true。注意，同源的请求不需要设置这个属性复制代码

为了让这个属性生效，服务器必须显式返回Access-Control-Allow-Credentials这个头信息

Access-Control-Allow-Credentials: true复制代码

withCredentials属性打开的话，跨域请求不仅会发送 Cookie，还会设置远程主机指定的 Cookie。反之也成立，如果withCredentials属性没有打开，那么跨域的 AJAX 请求即使明确要求浏览器设置 Cookie，浏览器也会忽略。

注意，脚本总是遵守同源政策，无法从document.cookie或者 HTTP 回应的头信息之中，读取跨域的 Cookie，withCredentials属性不影响这一点。

10.XMLHttpRequest.upload

XMLHttpRequest 不仅可以发送请求，还可以发送文件，这就是 AJAX 文件上传。发送文件以后，通过XMLHttpRequest.upload属性可以得到一个对象，通过观察这个对象，可以得知上传的进展。主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout。

4.XMLHttpRequest 的实例方法

1.XMLHttpRequest.open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

void open(   string method,   string url,   optional boolean async,   optional string user,   optional string password);method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。url: 表示请求发送目标 URL。async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。user：表示用于认证的用户名，默认为空字符串。该参数可选。password：表示用于认证的密码，默认为空字符串。该参数可选。复制代码

2.XMLHttpRequest.send()

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。

send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数。

3.XMLHttpRequest.setRequestHeader()

XMLHttpRequest.setRequestHeader()方法用于设置浏览器发送的 HTTP 请求的头信息。该方法必须在open()之后、send()之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

4.XMLHttpRequest.overrideMimeType()

XMLHttpRequest.overrideMimeType()方法用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器进行不一样的处理。举例来说，服务器返回的数据类型是text/xml，由于种种原因浏览器解析不成功报错，这时就拿不到数据了。为了拿到原始数据，我们可以把 MIME 类型改成text/plain，这样浏览器就不会去自动解析，从而我们就可以拿到原始文本了。

注意，该方法必须在send()方法之前调用。

修改服务器返回的数据类型，不是正常情况下应该采取的方法。如果希望服务器返回指定的数据类型，可以用responseType属性告诉服务器，就像下面的例子。只有在服务器无法返回某种数据类型时，才使用overrideMimeType()方法。

5.XMLHttpRequest.getResponseHeader()

XMLHttpRequest.getResponseHeader()方法返回 HTTP 头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，返回null。该方法的参数不区分大小写

6.XMLHttpRequest.getAllResponseHeaders()

XMLHttpRequest.getAllResponseHeaders()方法返回一个字符串，表示服务器发来的所有 HTTP 头信息。格式为字符串，每个头信息之间使用CRLF分隔（回车+换行），如果没有收到服务器回应，该属性为null。如果发生网络错误，该属性为空字符串

5.XMLHttpRequest 实例的事件

1.readyStateChange 事件

readyState属性的值发生改变，就会触发 readyStateChange 事件

我们可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。

2.progress 事件

上传文件时，XMLHTTPRequest 实例对象本身和实例的upload属性，都有一个progress事件，会不断返回上传的进度。

3.load 事件、error 事件、abort 事件

load 事件表示服务器传来的数据接收完毕，error 事件表示请求出错，abort 事件表示请求被中断（比如用户取消请求）

4.loadend 事件

abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功

5.timeout 事件

服务器超过指定时间还没有返回结果，就会触发 timeout 事件