XMLHttpRequest和referer

XMLHttpRequest的基本使用

XMLHttpRequest 是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源。

1.使用xhr发起GET请求

步骤

创建 xhr 对象

调用 xhr.open() 函数

调用 xhr.send() 函数

监听 xhr.onreadystatechange 事件

// 1. 创建 XHR 对象

var xhr = new XMLHttpRequest()

// 2. 调用 open 函数

xhr.open('GET', 'url')

// 3. 调用 send 函数

xhr.send()

// 4. 监听 onreadystatechange 事件

xhr.onreadystatechange = function () {

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

// 获取服务器响应的数据

console.log(xhr.responseText)

}

}

了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以 下状态的一个：

2.使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

//...省略不不要的代码

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

//...省略不不要的代码

这种在 URL 地址后面拼接的参数，叫做查询字符串。

var xhr = new XMLHttpRequest()

xhr.open('GET', 'url')

xhr.send()

xhr.onreadystatechange = function () {

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

console.log(xhr.responseText)

}

}

查询字符串

查询字符串?

定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以

这个形式，可以将想要发送给服务器的数据添加到 URL 中。

GET请求携带参数的本质

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

$.get('url', { name: 'xiao', age: 18 }, function () { })

// 等价于

$.get('url?name=xiao&age=18', function () { })

Referrer的重要性

HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索的关键词等，都是通过分析这个referrer信息来获取的。

window.open方式打开新窗口

示例：

1	<a href="#" οnclick="window.open('http://www.google.com')">访问Google</a>

点击此链接会在新窗口打开Google网站，我们在地址栏中输入以下js代码就可以看到发送的referrer了。

1	javascript:alert(document.referrer)

如果是同个域名下通过此方式跳转的，那么我们可以通过访问windoww.opener对象去获取丢失的referrer信息。

<script type="text/javascript"> var referrer = document.referrer; if (!referrer) { try { if (window.opener) { // IE下如果跨域则抛出权限异常 // Safari和Chrome下window.opener.location没有任何属性 referrer = window.opener.location.href; } } catch (e) {} } </script>

跨域的话则没辙了

http请求中有一个referer报文头，用来表示当前流量的来源参考页，即当前页面是从哪个页面跳转过来的，可以通过document.referrer来获取该信息，但会有一些原因，导致js获取到的referrer是空字符串，如下：

1、使用window.location跳转，会导致IE下返回空字符串

2、使用window.open方式打开新窗口，会导致IE下返回空字符串

3、鼠标拖拽打开新窗口

4、点击flash内部链接

1. https跳转到http，浏览器是不会发送referrer的

referer是由客户端的浏览器发送到服务器上，且在客户端可以通过document.referrer来获取，也就是说referer的发送实际上是一个浏览器行为，发送与否的决定权是在浏览器手里，但是HTTP协议对什么情况下，浏览器该发送，什么情况下不该发送有着严格的规定。

下面几种情况下，可以控制浏览器是否发送referer:

1,当网站使用refresh字段进行跳转的时候，大多数浏览器不发送referer;

2,从用户从一个HTTPS的网站点击链接到另一个HTTP的网站时，不发送referer;

3,html5中，a标签的rel = “noreferrer”, 可以让浏览器不发送referer;

4,使用Data URI scheme链接的，浏览器也不发送referer;

5,使用Content Security Policy, 也可以让浏览器不发送referer;

6,在html头部中使用meta标签来控制不让浏览器发送referer;

百度是在全站HTTPS化之后，不支持referer的，实际上在百度HTTPS化之后一段时间内，三方的流量统计工具还是可以统计到搜索关键词的，原因在于百度采取了跳转页的方式进行搜索关键词传递，如下图:

例如，在百度中搜索”hitoy”, 点击http://www.hitoy.org/的链接，实际上是首先跳转到了”http://www.baidu.com/link?url=Fot1lcApQEG5o0t_-GOBHrMi-b_3BXDx4VlTvSRJH_7&wd=hitoy&eqid=e4916744000070260000000255910e8e”这页面上，这个页面通过js和refresh方式跳转到”http://www.hitoy.org/”这个页面,内容如下:

<metacontent="always"name="referrer"><script>try{if(window.opener&&window.opener.bds&&window.opener.bds.pdc&&window.opener.bds.pdc.sendLinkLog){window.opener.bds.pdc.sendLinkLog();}}catch(e){};window.location.replace("https://www.hitoy.org/")</script><noscript><METAhttp-equiv="refresh"content="0;URL='https://www.hitoy.org/'"></noscript>

当浏览器支持js时候，通过window.location.replace来跳转，不支持的时候，通过refresh进行跳转。注意name=”referrer”的alway字段，可以让浏览器总是发送referer，关于Meta referrer的介绍，可以点击这里。

新的跳转页面url发生了两点变化:

1, HTTP变成HTTPS了;

2, wd字段为空了。

这样以来，即使跳转页面中的meta

referrer字段为alway，关键词的字段也不会被第三方监控到了, 当然，其它的字段url,eqid第三方仍可监控

采用HTTPS，并且取消关键词显示的Google直接在跳转页面中给referrer设置了origin的属性，这样一来第三方也只能监控到来源网站。

一般情况下，从HTTPS站到HTTP站点的跳转，浏览器默认不发送referrer，可以通过大概两种办法让浏览器传送referrer:

1，在A站的head中加入<meta name="referrer" content="always">

2，B站也采用HTTPS

当然如果A站强制规定不发送referrer，B站又没有对A站的控制权，就像上文中提到的一样，我们是无法控制让第三方统计工具统计到百度搜索来源关键词的。