XMLHttpRequest 对象与referrer

2023-09-28 03:56:20

XMLHttpRequest 对象
什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
XMLHttpRequest 对象用于在后台与服务器交换数据。
• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据
所有现代的浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 请求以及 GET 请求的能力。
XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。
XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

open()方法指定建立 HTTP 连接的一些细节。

xhr.open('GET', 'http://www.example.com/page.php', true);

"GET"以什么传输方式与服务器网址建立连接，'http://www.example.com/page.php’表示指定连接的服务器网址，“true”表示请求是异步的，同理反知“flase”。

xhr.onreadystatechange = handleStateChange;function handleStateChange() {// ...
}

上述函数一旦XMLHttpRequest 对象发生变化就会调用handleStateChange()函数，然后使用send（）方法发出请求。

xhr.send(null);

send()的参数为null，表示发送请求的时候不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。同时null可以是body，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不是必须的话，这个参数就为 null。

下面是实例代码演示

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){// 通信成功时，状态值为4if (xhr.readyState === 4){if (xhr.status === 200){console.log(xhr.responseText);} else {console.error(xhr.statusText);}}
};xhr.onerror = function (e) {console.error(xhr.statusText);
};xhr.open('GET', '/endpoint', true);
xhr.send(null);

XMLHttpRequest的对象属性
1.onreadystatechang: 状态改变时会触发这个事件处理器，指向一个javascript函数
2.status: 服务器的http状态代码
3.statusText: http状态码的相应文本
4.responseText: 服务器的响应，通常为一个字符串
5.responseXML: 服务器的响应，通常为一个XML,可以解析为一个DOM对象
6.readyState: 请求状态
(1)readyState属性:
readyState属性值为0时，表示未初始化，此时已经创建了一个XMLHttpRequest对象，但是还没有初始化。
readyState属性值为1时，表示发送状态，调用了open()方法，并已经准备好把一个请求发送到服务器。
readyState属性值为3时，表示正在接收状态，已经接收到http响应头部信息，但是消息体部分还没完全接收结束。
readyState属性值为4时，表示接收完全状态，即响应信息已被完全接收。

(2)onreadystatechange属性：
该属性是readyState属性值改变时的事件触发器,用来制定当readyState属性值改变时的处理事件。在使用时，常常以事件处理器函数名称赋予onreadystatechange的方式，来为XMLHttpRequest指定事件触发器，而在事件处理函数中通过判断readyState状态值做出相应的处理。

(3)responseText属性：
该属性包含接收到的http响应的文本内容，当readyState的值为０，１，２时，该属性值作为一个空字符串，当readyState的值为３时，该属性值包含客户端中未完场的响应信息。当readyState值为４时，该属性值包含完整的相应信息。

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

(5)status属性：
status属性描述了htpp状态代码
在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版本

(6)statusText属性：
该属性描述了http状态代码文本，仅当readyState值为３或４时该属性才有效，当readyState值小于3时，试图存取status的值将会引发一个异常。

XmlHttpRequest对象的基本方法

1.abort():停止发送当前请求
2.getAllResponseHeader():获取服务器的全部响应头
3.getResponseHeader("headerLabel”):根据响应头的名字，获取对应的响应头
4.open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名、密 码，则 提供对应的信息。
5.send(content):发送请求。其中content是请求参数
6.setRequestHeader(“label”,”value”):在发送请求之前，先设置请求头

Referrer介绍

当一个用户点击当前页面中的一个链接，然后跳转到目标页面时，目标页面会收到一个信息，即用户是从哪个源链接跳转过来的。也就是说，当你发起一个http请求，请求头中的 referrer字段就说明了你是从哪个页面发起该请求的。ajax请求的referer是当前页面,所以请求就是在当前页面发起的，是这个请求是哪个页面发出的,referer就是哪个页面的。

作用
判断网站来源,可以相应的做一些校验,比如只允许某网站的请求,那么就可以通过获取referer,加以判断即可.

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作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址；在降级的情况下不发送首部 。

Referrer-Policy更改方法
可以有以下方法：

  1. 通过Referrer-Policy HTTP header设置：
Referrer-Policy: origin
  1. 通过元素改变Referrer Policy，直接修改名为referrer的内容
<meta name="referrer" content="origin">
  1. 给 , , ,