JavaScript中的XMLHttpRequest

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/27/JavaScript%E4%B8%AD%E7%9A%84XMLHttpRequest/

摘要

本文主要讲述了：

实例属性
原型方法

正文

实例属性

responseType

用于指定 HTTP 响应的类型

浏览器会根据responseType的值来尝试解析response

注意：如果服务器端实际返回的数据类型无法被成功解析，则XMLHttpRequest的response属性将变为null

取值范围：

空字符串，等效于text，默认值
arraybuffer
blob
json
text

原型方法

setRequestHeader

给XMLHttpRequest实例设置网络请求头

注意：

XMLHttpRequest.prototype.setRequestHeader()必须在XMLHttpRequest.prototype.open()之后，XMLHttpRequest.prototype.send()之前调用
出于安全原因，部分请求头只能由用户代理控制，而无法通过XMLHttpRequest.prototype.setRequestHeader()添加，例如：Cookie
若多次添加相同的请求头，则最后所有的值会以,作为间隔合并到一起
若未使用此方法设置Accept请求头，则当XMLHttpRequest.prototype.send()被调用时，Accept请求头的值将变为*/*

示例：

输入：

a.example.com/js/index.js

let xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.response);
  }
});
xhr.open('GET', 'http://a.example.com/data.json');
xhr.setRequestHeader('jsweibo', '123');
xhr.setRequestHeader('jsweibo', '456');
xhr.send();

输出：

1 2	Accept: / jsweibo: 123, 456

若为 Ajax 跨源请求且设置了自定义请求头，则此请求属于非简单请求。

浏览器会：

在发起正式请求之前先发起 CORS 预请求，Access-Control-Request-Method请求头的值为请求方法，Access-Control-Request-Headers请求头中必须包含自定义请求头的名称
若 CORS 预请求成功（根据 HTTP 状态码规范应该返回204），浏览器会判断请求方法是否存在于Access-Control-Allow-Methods响应头中，自定义请求头是否存在于Access-Control-Allow-Headers响应头中
若都存在，浏览器会发起正式请求

注意：GET、POST、HEAD为安全请求方法，只有非安全请求方法才需要出现在Access-Control-Allow-Methods中，例如：PUT、DELETE

示例：

nginx.conf

server {
    listen       80;
    server_name  a.example.com;
    location / {
        root   html/a.example.com;
        index  index.html index.htm;
    }
}

server {
    listen       80;
    server_name  b.example.com;
    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers Authorization;
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        root   html/b.example.com;
        index  index.html index.htm;
    }
}

a.example.com/js/index.js

let xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.response);
  }
});

// GET为安全请求方法，因此b.example.com不需要配置Access-Control-Allow-Methods响应头
xhr.open('GET', 'http://b.example.com/data.json');
xhr.setRequestHeader('Authorization', 'jsweibo');
xhr.send();