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