已复制
全屏展示
复制代码

AJAX基础实战


· 4 min read

一. 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


文章推荐