HTTP 头部解析【红宝书 P713-P714】

1. 每个 HTTP 请求和响应都会携带一些头部字段,这些字段可能会对开发者有用.

2. 默认情况,XHR 请求会发送一些常见字段:

【1】Accept:浏览器可以处理的内容类型.

【2】Accept-Charset:浏览器可以显示的字符集

【3】Accept-Encoding:浏览器可以处理的压缩编码格式 

【4】Connection:浏览器与服务器连接类型

【5】Accept-Language:浏览器使用的语言

【6】Host:发送请求的页面的域名

【7】Cookie:页面中设置的Cookie

【8】Referer:发送请求的页面的URI

【9】User-Agent:浏览器用户代理字符串

下面是一个个人向 json-server 服务器发送 XHR 请求的示例:

Request Headers:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Cookie: Webstorm-bf00c0e6=36b945d7-5d09-4525-b9ce-14800daaf4d0
Host: localhost:3000
If-None-Match: W//"73f-71V+7jQgFOPkmUv67NROh1acCqM"
Referer: http:/localhost:3000/
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Mobile Safari/537.36

3. 如果希望发送额外字段,可以使用 setRequestHeader() 方法,为保证请求头部被发送,必须在 open() 之后、send() 之前调用 setRequestHeader(),并且自定义头部不要和浏览器正常发送的头部重名,否则会影响浏览器正常响应.

4. 可以使用 getResponseHeader() 方法从 XHR 对象获取响应头部,如果想取得所有响应头部,可以使用 getAllResponseHeaders() 方法,以下是获取所有响应头部代码以及返回结果.

/* xmlhttprequest 不是 node 内置,因此需要 npm install xmlhttprequest,并手动导入 */
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.responseText);
      let all = xhr.getAllResponseHeaders();
      console.log(all);
    } else {
      console.log("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "http://localhost:3000/posts", true);
xhr.send(null);
x-powered-by: Express
vary: Origin, Accept-Encoding
access-control-allow-credentials: true
cache-control: no-cache
pragma: no-cache
expires: -1
x-content-type-options: nosniff
content-type: application/json; charset=utf-8
content-length: 77
etag: W/"4d-49G7XbVRP2NKipc5uj9Z4hcUq3Y"
date: Fri, 01 Oct 2021 05:59:55 GMT
connection: close

 

上一篇:01_ajax


下一篇:AJAX学习(基础学习笔记)