Referer与XMLHttpRequest部分整理（以后继续更新）

还未学习完前端，最近正在私下加班学习，以下知识以后会继续补充！

Referer

  HTTP请求中，Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪个页面链接过来的，服务器因此可以获得一些信息用于处理。

  例如，在www.google.com 里有一个www.baidu.com 链接，那么点击这个www.baidu.com ，它的header 信息里就有： Referer=http://www.google.com

 

作用

1.防盗链

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

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

2.防止恶意请求

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

空Referer

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

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

Referer内容为空的情况有：

浏览器内直接输入URL

Windows桌面的超链接图标

浏览器内书签

第三方软件内容中的链接

防盗链

  当用户访问网页时，referer就是前一个网页的URL；如果是图片的话，通常指的就是图片所在的网页。当浏览器向服务器发送请求时，referer就自动携带在HTTP请求头了。

  一个HTML页面往往包含多种资源，这些资源通过标签如script、img、link等形式嵌套在HTML文档中，一个完整页面往往需要经过发送多条HTTP请求下载资源，然后才能正常展示。由于HTML本身并没有对嵌套资源的来源做限制，基于这样的机制，盗链就成为了一种手段。

防盗链的工作原理

  通过Referer或者签名，网站可以检测目标网页访问的来源网页，如果是资源文件，则可以追踪到显示它的网页地址 一旦检测到来源不是本站，即进行阻止或者返回指定的页面

绕过图片防盗链的方法：

  1，本网站

  2，无referer信息的情况。（服务器认为是从浏览器直接访问的图片URL，所以这种情况下能正常访问）

  3，授权的网址

  1和3不稳妥，只能在referer上动手脚

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

2.设置head头

3.设置referrerpolicy=“no-referrer”

4.用iframe来实现隐藏referer

5.客户端在请求时修改header头部

XMLHttpRequest

  使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。

 

js向服务器发起http请求的过程也叫做AJAX(Asynchronous JavaScript and XML)(阿贾克斯)

 

具体来说，AJAX 包括以下几个步骤。

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

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

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

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

然后，向远程主机发出一个HTTP请求

xhr.open('GET', 'example.php');

xhr.send();

接着，就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数

 xhr.onreadystatechange = function(){

　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {

　　　　　　alert( xhr.responseText );

　　　　} else {

　　　　　　alert( xhr.statusText );

　　　　}

　　};

上面的代码包含了老版本XMLHttpRequest对象的主要属性：

 xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。

 xhr.status：服务器返回的状态码，等于200表示一切正常。

 xhr.responseText：服务器返回的文本数据

 xhr.responseXML：服务器返回的XML格式的数据

 xhr.statusText：服务器返回的状态文本。

新版本的XMLHttpRequest对象，做出了大幅改进。

 可以设置HTTP请求的时限。

 可以使用FormData对象管理表单数据。

 可以上传文件。

 可以请求不同域名下的数据（跨域请求），CORS。

 可以获取服务器端的二进制数据。

 可以获得数据传输的进度信息。

1，HTTP请求的时限

xhr.timeout = 3000;

xhr.ontimeout = function(event){

  alert('请求超时！');

}

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。

2，FormData对象

AJAX操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个FormData对象，可以模拟表单。

//首先，新建一个FormData对象。

var formData = new FormData();

//然后，为它添加表单项。

formData.append('username', '张三');

formData.append('id', 123456);

//最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。

xhr.send(formData);

3，上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。

假定files是一个"选择文件"的表单元素（input[type="file"]），我们将它装入FormData对象。

 var formData = new FormData();

for (var i = 0; i < files.length;i++) {

  formData.append('files[]', files[i]);

}

xhr.send(formData);

4，跨域资源共享（CORS）

       新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做跨域资源共享。使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。

下面是XMLHttpRequest对象简单用法的完整例子。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (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 的实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

• 0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。

• 1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。

• 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。

• 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。

• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

var xhr = new XMLHttpRequest();

if (xhr.readyState === 4) {
  // 请求结束，处理服务器返回的数据
} else {
  // 显示提示“加载中……”
}

上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP 请求已经完成。其他情况，都表示 HTTP 请求还在进行中。

XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

另外，如果使用实例的abort()方法，终止 XMLHttpRequest 请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'http://example.com' , true );
xhr.onreadystatechange = function () {
  if (xhr.readyState !== 4 || xhr.status !== 200) {
    return;
  }
  console.log(xhr.responseText);
};
xhr.send();