面试-JS Web API

• 手写一个简易的Ajax
• 跨域的常用实现方式
  
  GET请求

// 创建一个 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 初始化一个 GET 请求
// 第三个参数 true 表示异步,一般都为 true
xhr.open('GET', '/data/test.json', true);  
// 设置事件处理函数，当 readyState 发生变化时会触发
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);  // 成功时打印返回的数据
    }
};

// 发送请求
xhr.send();

POST请求

xhr.readyState

readyState 是 XMLHttpRequest 对象的属性，它代表了请求的当前状态。readyState 的取值范围是 0 到 4，每个状态代表不同的阶段：

0 - UNSENT：还未调用 open() 方法。
1 - OPENED：已经调用 open() 方法，但还未调用 send() 方法。
2 - HEADERS_RECEIVED：调用了 send() 方法，服务器已经返回响应头。
3 - LOADING：正在下载响应体。
4 - DONE：响应体下载完成，可以处理响应。

我们只关注 4

xhr.status

301 永久重定向 302 临时重定向 304 资源未改变
404 请求地址有错误 403 客户端无权限

跨域

• 同源策略
  Ajax请求时，浏览器要求当前网页和server必须同源（安全）。
  同源就是：协议、域名、端口三者一致。