Ajax

TL;DR

GET 请求：

let request = new XMLHttpRequest();
request.open('GET', 'http://www.example.com/page.php', true);
request.responseType = 'text';
request.onreadystatechange = function () {
    if(request.readyState === 4 && request.status === 200) {
        console.log(request.responseText);
    }
};
request.send();

POST 请求：

let request = new XMLHttpRequest();
request.open('POST', 'http://www.example.com/page.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.responseType = 'text';
request.onreadystatechange = function () {
    if(request.readyState === 4 && request.status === 200) {
        console.log(request.responseText);
    }
};
request.send(data);

Ajax 即 “Asynchronous JavaScript and XML”(非同步的 JavaScript 与 XML技术)，Ajax 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。其核心也就是 XMLHttpRequest 对象

Ajax 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面。

现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了，但是 AJAX 这个名字已经成了一个通用名词，字面含义已经消失了。

1. 发送请求

1.1 创建对象

1	`let request = new XMLHttpRequest();`

1.2 向服务器发送请求

1 2	`request.open('GET', 'http://www.example.com/page.php', true); //设定发送请求的请求类型、url、是否为异步请求 request.send();`

参数细节：

open(method;url;async)

method: GET / POST
url: 指定的服务器地址
async：true（异步，default）/ false（同步）data

send（data）

data：如果不带参数 data，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

相对 GET 请求，在发送 POST 请求时，需要额外使用 setRequestHeader() 方法设置 HTTP 请求头，例如：

1	`xmlhttp.setRequestHeader("content-type","text/xml;charset=utf-8");`

setRequestHeader(header,value)

header: 规定头的名称
value: 规定头的值

1.3 服务器的响应

获取服务器响应信息一般使用 responseText 和 responseXML 属性

XMLHttpRequest.responseText 属性返回从服务器接收到的字符串，该属性为只读。
XMLHttpRequest.responseXML 属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。
XMLHttpRequest.responseURL 属性是字符串，表示发送数据的服务器的网址。

2. 处理响应

2.1 XMLHttpRequest.readyState

2.1.1 readyState 和 status的区别

readyState 状态值，表示 XMLHttpRequest 实例对象的当前状态。XMLHttpRequest.readyState 可以返回该值。整个响应周期一共有五个整数值：

0，表示 XMLHttpRequest 实例已经生成，但是实例的 open() 方法还没有被调用。

1，表示open()方法已经调用，但是实例的 send() 方法还没有调用，仍然可以使用实例的setRequestHeader() 方法，设定 HTTP 请求的头信息。

2，表示实例的 send() 方法已经调用，并且服务器返回的头信息和状态码已经收到。

3，LOADING。表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的 responseType 属性等于 text 或者空字符串，responseText 属性就会包含已经收到的部分信息。

4，完成响应。表示服务器返回的数据已经完全接收，或者本次接收已经失败。

status 表示服务器回应的 HTTP 状态码，一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。XMLHttpRequest.statue 可以返回该值。常见的状态码有：

100 客户端应当继续发送请求。
200 响应成功。
202 服务器已接受请求，但尚未处理。
204 服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。
205 服务器成功处理了请求，且没有返回任何内容。
301 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。
400 语义有误，当前请求无法被服务器理解。或者，请求参数有误。
401 当前请求需要用户验证。
403 服务器已经理解请求，但是拒绝执行它。
404 请求失败，请求所希望得到的资源未被在服务器上发现。
500 服务器发生错误

2.2 XMLHttpRequest.onreadystatechange

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

我们可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。

一般当状态变为4的时候，表示服务器响应完成，这时如果获得的 statue 值为 202 ，回调函数就可以处理服务器传送回来的数据。

3. Ajax 的缺点

3.1 同源策略导致不能跨域

同源策略导致 Ajax 不能实现跨域。

浏览器的同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。为了保护本地数据不被JavaScript代码获取回来的数据污染，同源策略拦截了所请求数据的接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

当两个URL的协议，或端口，或主机（域名）不同时，都不构成同源，此时无法进行资源交流，浏览器会在控制台中报一个异常，提示拒绝访问，即无法实现跨域。

查看源图像

3.2 实现跨域

想要跨越就要用到 JSONP 或 CORS 。

总结

请问 Ajax 的原理是什么？

Ajax 就是异步的 JS 和 XML 的缩写，目前我们一般用 JSON 代替 XML。
Ajax 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面。
该技术最核心概念是 XMLHttpRequest 对象，该对象可发起 HTTP 请求，我们可以监听其 readystate 和 status 的变化获得响应。
Ajax 的优点是无刷新请求。
Ajax 缺点是被浏览器限制不能跨域。
想要跨越需要使用 JSONP 或 CORS 。

JavaScript

跨域上一篇

this和call/apply/bind 下一篇