AJAX基础实战
一. AJAX介绍
AJAX不是 JavaScript 的规范，全称为 Asynchronous JavaScript and XML，意思就是用 JavaScript 执行异步网络请求。
如果一个 Form 表单的提交是同步的，一旦用户点击 Submit 按钮，表单开始提交，服务器处理，然后返回浏览器，然后刷新页面，如果不幸由于网络太慢或者其他原因，就会出现异常，所以我们需要异步提交。
二. AJAX示例
在现代浏览器上写 AJAX 主要依靠 XMLHttpRequest 对象
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
// 新建XMLHttpRequest对象
// 通过检测window对象是否有 XMLHttpRequest 属性来确定浏览器是否支持标准的 XMLHttpRequest
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
// 状态发生变化时，函数被回调
request.onreadystatechange = function () {
if (request.readyState === 4) { // 成功完成
// 判断响应结果
if (request.status === 200) {
// 成功，通过 responseText 拿到响应的文本
return success(request.responseText);
} else {
// 失败，根据响应码判断失败原因
return fail(request.status);
}
}
}
// 发送请求
request.open('GET', '/api/categories');
request.send();
console.log('请求已发送，请等待响应...');
三. 安全限制
上面代码的 URL 使用的是相对路径。如果你把它改为 'http://www.sina.com.cn/'，再运行，肯定报错。这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致（域名、协议、端口）。
JavaScript请求外域的URL方法：
- 一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
- 二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器 '/proxy?url=http://www.sina.com.cn'，代理服务器再把结果返回，麻烦之处在于需要服务器端额外做开发。
- 第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源
<head>
<script src="http://example.com/abc.js"></script>
</head>四. CORS跨域策略
如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略 CORS了。CORS 全称 Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。
Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。
假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。
五. OPTIONS 请求
对于PUT、DELETE、application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受。
OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST服务器必须响应并明确指出允许的Method，浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。注意：由于以POST、PUT方式传送JSON格式的数据在REST中很常见，所以要跨域正确处理POST和PUT请求，服务器端必须正确响应OPTIONS请求。
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400- 参考资料
https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400