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或者签名,网站可以检测目标网页访问的来源网页,如果是资源文件,则可以追踪到显示它的网页地址 一旦检测到来源不是本站,即进行阻止或者返回指定的页面
防止恶意请求
通过Referer或者签名,网站可以检测目标网页访问的来源网页,如果是资源文件,则可以追踪到显示它的网页地址 一旦检测到来源不是本站,即进行阻止或者返回指定的页. .
空Referer
浏览器内直接输入URL
Windows桌面的超链接图标
浏览器内书签
第三方软件内容中的链接
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(移除参数信息之后)作为引用地址。