JavaScript 笔记四：AJAX和跨域
都是本人理解，笔记大致概念，不详细也并非完全正确，所以仅供参考。
AJAX
一种可以在不重载页面的情况下，与服务器更新交换数据的技术。
如何创建
通用对象：XMLHttpRequest
IE5/6对象：ActiveXObject
var ajax = new XMLHttpRequest();
ajax.open('get', 'https://abc.com/get/test');
ajax.send();
基本属性和方法
ajax.readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
ajax.status
参见HTTP码，大致类别如下：
- 100+ ：已建立连接，继续请求
- 200+ ：相关
- 300+ ：重定向相关
- 400+ ：资源错误相关
- 500+ ：服务器错误相关
ajax.setRequestHeader()
向请求添加 HTTP 头
onreadystatechange 事件
每当 readyState 属性改变时，就会调用该函数，总共会被触发 4 次，分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
基本示例
此处仅做简单介绍：具体参考此处文档
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {
// IE5、6
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText) // 请求结果
}
};
ajax.open('get', 'https://abc.com/get/test',false);
ajax.send();
AJAX跨域
形成跨域的主要原因是因为同源策略，在同源策略下，站点与站点值之间需满足一下条件：
- 同协议
- 同域名
- 同端口
在同源策略下，非同源站点受以下限制：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 无法获得
- AJAX 请求不能发送
解决跨域的详细解决方案参照此篇文章，此处仅简单描述AJAX跨域的三种方案：
- JSONP
- WebSocket
- CORS
JSONP
其本质就是在网页插入script元素向服务器请求数据，服务器收到请求后将数据放在一个指定名称的回调函数中，然后JS再执行此回调函数。
WebSocket
WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，在请求时请求头会有Origin字段，而服务器可根据Origin字段来进行请求源的限制和许可，以此来决定是否返回数据。
CORS
通常情况下，WebSocket是用作其他的业务功能，而非解决AJAX跨域的方案，使用CORS才是解决AJAX跨域的首选方案，以下详细说明。
CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
CORS存在两种请求类型：
- 基本请求
- 非简单请求
只要同时满足以下两大条件，就属于简单请求。
- 请求方法是以下三种方法之一：HEAD、GET、POST
- HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain
简单请求
如WebSocket，在请求时请求头会有Origin字段，服务器可根据Origin字段来进行请求源的限制和许可，以此来决定是否返回数据。
非简单请求
请求前发出预检请求OPTIONS，此请求标识 Origin 会请求哪些 methods ，若同意后，则发出跨域请求。
与JSONP的比较
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
