XMLHttpRequest 对象和Referer复习

什么是XMLHttpRequest？

XMLHttpRequest是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XMLHttpRequest获取数据的目的是为了持续修改一个加载过的页面，XMLHttpRequest是Ajax设计的底层概念，XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。XMLHttpRequest使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。

创建XMLHttpRequest

var xhr = new XMLHttpRequest();

建立链接

使用open（）方法建立一个http的请求

xhr.open(method, url, async, username, password);
xhr.open('GET', 'http://www.example.com/page.php', true);//一个例子！

method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。

url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。

async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用

onreadystatechange 属性指定的回调函数，且同步模式用户体验差，在主线程上的同步请求在部分浏览器上不可用。

username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。

password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。

建立链接后使用send（）实际发送请求

xhr.send(null);

参数为请求主体发送的数据，为必填项，当不需要发送数据时，使用null。

xhr.send();
xhr.send(ArrayBuffer data);//类型化数组 => 加密
xhr.send(ArrayBufferView data);//ArrayBuffer的一部分
xhr.send(Blob data);二进制大对象
xhr.send(Document data);//文档格式  => html文档和xml格式文档
xhr.send(DOMString? data);//DOMString是UTF-16字符串
xhr.send(FormData data);//表单对象   FormData => 可以直接封装内容

ArrayBuffer，Blob，Document，DOMString，FormData，File都是XMLHttpRequest的数据类型。

XMLHttpRequest的实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。
0：表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
1：表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
2：表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
3：表示正在接收服务器传来的数据体（body 部分）。
4：表示服务器返回的数据已经完全接收，或者本次接收已经失败。// 最主要的是就是看4

XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange是一个监听属性

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。
readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。
另外，如果使用实例的abort()方法，终止 XMLHttpRequest请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

XMLHttpRequest.response

XMLHttpRequest.response表示服务器返回的数据体（即 HTTP 回应的 body 部分），它能是任何数据类型，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据，如果本次请求没有成功或者数据不完整，该属性等于null。但是，如果responseType属性等于text或空字符串，在请求没有结束之前（readyState等于3的阶段），response属性包含服务器已经返回的部分数据。

XMLHttpRequest.responseType

XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text。

XMLHttpRequest.responseType属性可以等于以下值。

""（空字符串）：等同于text，表示服务器返回文本数据。
"arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。
"blob"：Blob 对象，表示服务器返回二进制对象。
"document"：Document 对象，表示服务器返回一个文档对象。
"json"：JSON 对象。
"text"：字符串。

XMLHttpRequest.responseText

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据

• 默认值为空字符串 ""

• 只有当 responseType 为 text、""时，xhr 对象上才有此属性，此时才能调用 xhr.responseText ，否则抛错。

• 只有当请求成功时，才能拿到正确值。以下 2 种情况下值都为空字符串 ""：请求未完成、请求失败。

XMLHttpRequest.responseXML/JSON

XMLHttpRequest.responseXML属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null。

• 默认值为 null

• 只有当 responseType 为 text、""、document时，xhr 对象上才有此属性，此时才能调用 xhr.responseXML，否则抛错。

• 只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下 3 种情况下值都为 null ：请求未完成、请求失败、请求成功但返回数据无法被正确解析时。

XMLHttpRequest.responseURL

XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址。

responseXML属性

该属性包含接收的http响应的xml内容。当服务器以xml文档的格式返回响应数据时,responseXML属性值才不为null。

XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

在HTTP1.1协议下，HTTP状态码总共可分为5大类 例如：

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

XMLHttpRequest.statusText属性返回一个字符串，表示服务器发送的状态提示。不同于status属性，该属性包含整个状态信息，比如“OK”和“Not Found”。在请求发送之前（即调用open()方法之前），该属性的值是空字符串；如果服务器没有返回状态提示，该属性的值默认为“OK”。该属性为只读属性。

XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout

XMLHttpRequest.timeout属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

XMLHttpRequestEventTarget.ontimeout属性用于设置一个监听函数，如果发生 timeout 事件，就会执行这个监听函数。

XmlHttpRequest对象的基本方法有：

abort():

• 若请求已发出，则会终止请求，并将 readyState 置为 0。

• 调用后，应将 xhr 对象置为 null 以促进垃圾回收。由于内存原因，不建议重用 xhr 对象。

getAllResponseHeader():获取服务器的全部响应头。

getResponseHeader("headerLabel”):根据响应头的名字，获取对应的响应头。

open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名，密码，则提供对应的信息。

send(content):发送请求。其中content是请求参数。

setRequestHeader(“label”,”value”):在发送请求之前，先设置请求头。

xhr的事件回调

请求正常时，事件触发顺序

1. 触发 xhr.onreadystatechange (之后每次 readyState 变化时，都会触发一次)

2. 触发 xhr.onloadstart //上传阶段开始：

3. 触发 xhr.upload.onloadstart

4. 触发 xhr.upload.onprogress

5. 触发 xhr.upload.onload

6. 触发 xhr.upload.onloadend //上传结束，下载阶段开始：

7. 触发 xhr.onprogress

8. 触发 xhr.onload

9. 触发 xhr.onloadend

发生 abort / timeout / error 时事件触发顺序

1.触发 xhr.onreadystatechange 事件，此时 readystate 为 4

2.如果上传阶段还没有结束，则依次触发以下事件：

1.xhr.upload.onprogress

2.xhr.upload.[onabort或ontimeout或onerror]

3.xhr.upload.onloadend

3.触发 xhr.onprogress 事件

4.触发 xhr.[onabort或ontimeout或onerror] 事件

5.触发 xhr.onloadend 事件

Referer

referer请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer（注：正确英语拼写应该是referrer，由于早期HTTP规范的拼写错误，为了保持向后兼容就一直延续下来）请求头识别访问来源，可能会以此统计分析、日志记录以及缓存优化等

作用

1.防盗链

只允许我本身的网站访问本身的图片服务器，假如域名是www.google.com，那么图片服务器每次取到Referer来判断一下域名是不是www.google.com，如果是就继续访问，不是就拦截。

将这个http请求发给服务器后，如果服务器要求必须是某个地址或者某几个地址才能访问，而你发送的referer不符合他的要求，就会拦截或者跳转到他要求的地址，然后再通过这个地址进行访问。

2.防止恶意请求

对于某些风险较高的文件类型，可使用Referer使得该类型文件只能来自我所指定的网站。

3.空Referer（(Referer="" || Referer=null)：）

有时，Referer内容为空，根据Referer的定义，它的作用是指示一个请求是从哪里链接过来，那么当一个请求并不是由链接触发产生的，那么自然也就不需要指定这个请求的链接来源。

比如，直接在浏览器的地址栏中输入一个资源的URL地址，那么这种请求是不会包含 Referer 字段的，因为这是一个“凭空产生”的 HTTP 请求，并不是从一个地方链接过去的。

Referrer-policy

No Referrer：任何情况下都不发送 Referrer 信息；

No Referrer When Downgrade：仅当发生协议降级（如 HTTPS 页面引入 HTTP 资源，从 HTTPS 页面跳到 HTTP 等）时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的；

Origin ：在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 https://example.com/ 作为引用地址。

Origin When Cross-origin：同源才会发送完整的url，非同源仅发送文件的源；

Unsafe URL：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息。正如其名，这是最宽松而最不安全的策略；

same-origin: 对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。

strict-origin： 在同等安全级别的情况下，发送文件的源作为引用地址，但是在降级的情况下不发送 。

strict-origin-when-cross-origin： 对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址；在降级的情况下不发送首部 。

利用https网站盗链http资源网站，refer不会发送

利用openssl生成自签名证书

let https = require("https");
let fs = require("fs");
let url = require("url");
let path = require("path");


var options = {
  hostname: "localhost",
  port: 8000,
  path: "/",
  method: "GET",
  rejectUnauthorized: false,
  key: fs.readFileSync("./keys/client.key"),
  cert: fs.readFileSync("./keys/client.crt"),
  ca: [fs.readFileSync("../ca/ca.crt")],
};

// 创建服务器
https.createServer(options, function (req, res) {

  let staticPath = path.join(__dirname, "src");
  let pathObj = url.parse(req.url, true);

  if (pathObj.pathname === "/") {
    pathObj.pathname += "index.html";
  }
  //  读取静态目录里面的文件，然后发送出去
  let filePath = path.join(staticPath, pathObj.pathname);
  fs.readFile(filePath, "binary", function (err, content) {
    if (err) {
      res.writeHead(404, "Not Found");
      res.end("<h1>404 Not Found</h1>");
    } else {
      res.writeHead(200, "Not Found");
      res.write(content, "binary");
      res.end();
    }
  });

}).listen(8080);

index.html

<div id="container">
    <img src="http://localhost:9999">
</div>

由于我们使用了自签名的证书，访问页面时可能会看到浏览器的证书警告，可能需要手动点击信任当前证书，或者手动点击链接确认访问该页面。例如Chrome 提醒“您的连接不是私密连接”，并禁止你访问。你可以直接在当前页面输入 thisisunsafe，不是在地址栏输入，而是直接敲击键盘输入，页面会自动刷新进入网页。