js_XMLHTTPRequest与referrer知识点整理(超详细)

目录

XMLHTTPRequest的对象

XMLHTTPRequest的实例属性

XMLHttpRequest.status,XMLHttpRequest.statusText

事件监听属性

XMLHttpRequest 的实例方法

XMLHttpRequest.open()

XMLHttpRequest.abort()

XMLHttpRequest 实例的事件

progress 事件

load 事件、error 事件、abort 事件

Referer

Referrer-policy

盗链

常见防盗链方法


XMLHTTPRequest的对象

AJAX ( Asynchronous JavaScript and XML) 

AJAX 包括以下几个步骤。

  1. 创建 XMLHttpRequest 实例

  2. 发出 HTTP 请求

  3. 接收服务器传回的数据

  4. 更新网页数据

AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON 格式的数据,XML 格式已经过时了,但是 AJAX 这个名字已经成了一个通用名词,字面含义已经消失了。

XMLHttpRequest对象是 AJAX 的主要接口,用于浏览器与服务器之间的通信。尽管名字里面有XMLHttp,它实际上可以使用多种协议(比如fileftp),发送任何格式的数据(包括字符串和二进制)

XMLHTTPRequest的实例属性

XMLHttpRequest.status,XMLHttpRequest.statusText

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

  • 200, OK,访问正常

  • 301, Moved Permanently,永久移动

  • 302, Moved temporarily,暂时移动

  • 304, Not Modified,未修改

  • 307, Temporary Redirect,暂时重定向

  • 401, Unauthorized,未授权

  • 403, Forbidden,禁止访问

  • 404, Not Found,未发现指定网址

  • 500, Internal Server Error,服务器发生错误

基本上,只有2xx和304的状态码,表示服务器返回是正常状态。

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

事件监听属性

XMLHttpRequest 对象可以对以下事件指定监听函数。

  • XMLHttpRequest.onloadstart:loadstart 事件(HTTP 请求发出)的监听函数

  • XMLHttpRequest.onprogress:progress事件(正在发送和加载数据)的监听函数

  • XMLHttpRequest.onabort:abort 事件(请求中止,比如用户调用了abort()方法)的监听函数

  • XMLHttpRequest.onerror:error 事件(请求失败)的监听函数

  • XMLHttpRequest.onload:load 事件(请求成功完成)的监听函数

  • XMLHttpRequest.ontimeout:timeout 事件(用户指定的时限超过了,请求还未完成)的监听函数

  • XMLHttpRequest.onloadend:loadend 事件(请求完成,不管成功或失败)的监听函数

XMLHttpRequest 的实例方法

XMLHttpRequest.open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

  • method:表示 HTTP 动词方法,比如GETPOSTPUTDELETEHEAD等。

  • url: 表示请求发送目标 URL。

  • async: 布尔值,表示请求是否为异步,默认为true。如果设为false,则send()方法只有等到收到服务器返回了结果,才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应,许多浏览器已经禁止在主线程使用,只允许 Worker 里面使用。所以,这个参数轻易不应该设为false

  • user:表示用于认证的用户名,默认为空字符串。该参数可选。

  • password:表示用于认证的密码,默认为空字符串。该参数可选。

XMLHttpRequest.abort()

XMLHttpRequest.abort()方法用来终止已经发出的 HTTP 请求。调用这个方法以后,readyState属性变为4status属性变为0

XMLHttpRequest 实例的事件

progress 事件

上传文件时,XMLHttpRequest 实例对象本身和实例的upload属性,都有一个progress事件,会不断返回上传的进度。

load 事件、error 事件、abort 事件

load 事件表示服务器传来的数据接收完毕,error 事件表示请求出错,abort 事件表示请求被中断(比如用户取消请求)。

Referer

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

Referrer-policy

Referrer-policy作用就是为了控制请求头中referer的内容

包含以下值:

  • no-referrer : 整个referee首部会被移除,访问来源信息不随着请求一起发送。

  • no-referrer-when-downgrade : 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下,引用页面的地址会被发送(HTTPS->HTTPS),但是在降级的情况下不会被发送 (HTTPS->HTTP).

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

  • origin-when-cross-origin: 对于同源的请求,会发送完整的URL作为引用地址,但是对于非同源请求仅发送文件的源。

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

  • strict-origin: 在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS),但是在降级的情况下不会发送 (HTTPS->HTTP)。

  • strict-origin-when-cross-origin: 对于同源的请求,会发送完整的URL作为引用地址;在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS);在降级的情况下不发送此首部 (HTTPS->HTTP)。

  • unsafe-url: 无论是同源请求还是非同源请求,都发送完整的 URL(移除参数信息之后)作为引用地址。(最不安全了)

盗链

盗链是指在自己的页面上展示一些并不在自己服务器上的一些内容, 获取别人的资源地址,绕过别人的资源展示页面,直接在自己的页面上向最终用户提供此内容。 一般被盗链的都是图片、 可执行文件、 音视频文件、压缩文件等资源。通过盗链的手段可以减轻自己服务器的负担

常见防盗链方法

防盗链一般有下面几种方式:

  1. 动态文件名,或者定期修改文件名称或路径

  2. 判定引用地址,一般是判断浏览器请求时HTTP头的Referer字段的值

  3. 使用登录验证,cookie

  4. 图片加水印

  5. ...

猜你喜欢

转载自blog.csdn.net/Jack_chao_/article/details/128888247