js_xmlhttprequest与referrer

最新推荐文章于 2023-02-14 11:59:23 发布

神仙鱼～

最新推荐文章于 2023-02-14 11:59:23 发布

阅读量119

点赞数

文章标签： javascript 前端服务器 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_55641973/article/details/128839727

版权

AJAX是一种技术方案，依赖于浏览器的XMLHttpRequest对象实现异步HTTP请求，用于更新网页部分内容而不刷新整个页面。它包括创建实例、发出请求、接收响应和更新数据四个步骤。AJAX只能同源请求，但可通过CORS实现跨域。Referrer-policy用于控制请求头中referer信息的发送策略。

摘要由CSDN通过智能技术生成

ajax是一种技术方案，它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

AJAX 包括以下几个步骤。

1. 创建 XMLHttpRequest 实例

2. 发出 HTTP 请求

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

4. 更新网页数据

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

var xhr = new XMLHttpRequest();

可使用`open()`方法指定建立 HTTP 连接。

xhr.open('GET', 'http://www.example.com/page.php', true);参数`true`，表示请求是异步。

指定回调函数，监听通信状态（`readyState`属性）的变化。

xhr.onreadystatechange = handleStateChange;

function handleStateChange() {

一旦`XMLHttpRequest`实例的状态发生变化，就会调用监听函数`handleStateChange`

最后使用`send()`方法，实际发出请求。

xhr.send(null);

上面代码中，`send()`的参数为`null`，表示发送请求的时候，不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错（详见《同源政策》和《CORS 通信》两章）。

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

```javascript

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.onreadystatechange

### XMLHttpRequest.response

### XMLHttpRequest.responseType

### XMLHttpRequest.responseText

### XMLHttpRequest.responseXML

### XMLHttpRequest.responseURL

### XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout

### XMLHttpRequest.withCredentials

### XMLHttpRequest.upload

## XMLHttpRequest 的实例方法

### XMLHttpRequest.open()

### XMLHttpRequest.send()

### XMLHttpRequest.setRequestHeader()

### XMLHttpRequest.getResponseHeader()

### XMLHttpRequest.getAllResponseHeaders()

### XMLHttpRequest.abort()

## XMLHttpRequest 实例的事件

### readyStateChange 事件

### progress 事件

### load 事件、error 事件、abort 事件

### loadend 事件

### timeout 事件

referer

Referer其实应该是英文单词Referrer，不过编写标准的人拼错了，所以人们也就延用了referer。

HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的。

比如在一个网页里面插入一个超链接，链接到其他的网页，那么当点击这个超链接从而链接到另外一个页面的时候，相当于浏览器向web服务器发送了一个 http请求，对于另外一个页面而言，这个referer就是上一个页面的URL，而对于从地址栏里面直接输入URL或者是刷新网页的方式，则referer = null，通过设置这个referer可以防止盗链的问题。

referer的作用

防盗链

盗链是指在自己的页面上展示一些并不在自己服务器上的一些内容，获取别人的资源地址，绕过别人的资源展示页面，直接在自己的页面上向最终用户提供此内容。通过Referer或者签名，网站可以检测目标网页访问的来源网页，如果是资源文件，则可以追踪到显示它的网页地址一旦检测到来源不是本站，即进行阻止或者返回指定的页面