JavaScript复习笔记 （九）AJAX & 跨域

Asynchronous JavaScript and XML，用JS执行异步网络请求。

Web的运作原理：一次HTTP请求对应一个页面。
因此如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面。

AJAX请求是异步执行，通过回调函数获得响应。
主要依靠XMLHttpRequest对象实现

//现代浏览器
//var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
//针对低版本的IE
//var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象

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);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

• XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。
• 最后调用send()方法才真正发送请求。
• GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

浏览器的同源策略：

默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。

• 域名相同（www.example.com和example.com不同）
• 协议相同（http和https不同）
• 端口号相同（默认是:80端口，它和:8080就不同）。

JS跨域

1️⃣ 通过Flash插件发送HTTP请求（不建议）
2️⃣ 代理服务器转发 （ 需要服务器端额外做开发 ）
3️⃣ JSONP

• 只能用GET请求，并且要求返回JavaScript。
• 这种方式跨域实际上利用了浏览器允许跨域引用JavaScript资源

JSONP的原理是利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句。

JSONP调用是通过动态创建script并为src属性指定跨域URL实现的。因为是有效JS，响应会立即执行。

• 具体：
  1.在页面中准备好回调函数
  2.动态添加<script>节点（ 动态读取外域JavaScript资源）
  3.接收回调
• 缺点：
  1.不安全：JSONP是从不同的域拉取可执行代码。如果域不可信，则可能在响应中加入恶意内容。此时只能完全删除JSONP。
  2.不确定请求是否失败：使用计时器来决定是否放弃等待（但不准确）

4️⃣ CORS （ 浏览器支持HTML5 ）
全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源

简要原理：
Origin表示本域，也就是浏览器当前页面的域。
当JavaScript向外域发起请求，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，
如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。

假设本域是my.com，外域是sina.com，只要 响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。

【 跨域能否成功，取决于对方服务器是否设置了一个正确的Access-Control-Allow-Origin。 】

简单请求包括GET、HEAD和POST（POST的Content-Type类型
仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头，通常能满足90%的需求。
对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受。服务器必须响应并明确指出允许的Method。