专栏名称: 程序员的那些事
最有影响力的程序员自媒体,关注程序员相关话题:IT技术、IT职场、在线课程、学习资源等。
目录
相关文章推荐
51好读  ›  专栏  ›  程序员的那些事

第三方 JS 开发:前后端接口协议

程序员的那些事  · 公众号  · 程序员  · 2017-06-07 20:09

正文

请到「今天看啥」查看全文



  1. 如果XML发起的请求不是一个简单请求,那么浏览器会便会先发起一次 CORS 预检请求来检查自己是否有权限。所以为了避免多余的请求,一定要确保自己的请求是简单请求


  2. 如果想要在请求返回时由服务器种上第三方cookie,那么需要给XHR实例设置其withCredentials属性为true。在IE8-9中,微软给出过一个类似的标准实现:XDomainRequest接口(以下简称XDR)。这个接口虽然也能够实现跨域请求,但是它有一些限制。限制之一就是IE会剥离所有的cookie之后再发给服务器端,同时IE也会忽略所有的服务器端返回中的Set-Cookie指令。简而言之就是不支持cookie

从CORS的支持程度来说其实它已经几乎被所有的主流浏览器支持了,除了IE<10。随着浏览器的更新换代,相信不久之后CORS将会成为跨域请求的终极选择。不过目前为止,如果你的第三方Javascript还需要支持IE<10,那么你需要考虑一些其他方案。

JSONP协议

提到跨域请求一般大家先想到的是JSONP,其本质是利用浏览器可以加载不同域名下的Javascript文件。服务器端根据URL上的参数动态的生成不同的Javascript文件返回。这样浏览器端便可以接收到服务端的返回结果了。


例如一个典型的JSONP请求接口地址如下:

http://test.com/jsonp?callback=callback&id=0067ED


服务器端则会返回如下Javascript文件,其中包含了数据:


callback && callback({    id: '0067ED',    username: 'mmzhou'    // ......});


浏览器在接收到返回之后会自动运行这段JS,然后调用全局的callback方法。这个callback方法是由调用方的JS事先事先准备好的,这样来接收到返回的参数。通过JSONP协议服务器端可以传给浏览器大量的数据。通常请求下一般都会使用JSONP来实现拉取数据、获取配置等等才做。但有的时候我们仅仅需要向后端发送数据,并且不关心返回结果是什么,甚至不在乎有没有成功。

ping

这种只需要发送数据且不在乎返回结果的请求类型,我们在这篇文章中称之为ping。也有很多人喜欢称之为beacon。

小图片

ping协议其实是一种很古老的跨域方法。它的本质是利用了浏览器可以获取不同域名下图片的原理,把请求参数放在了图片地址的URL参数中发给后端。因为是图片的请求,所以网页上的JS是不能得到返回图片是什么样的。它的大致JS代码如下:


浏览器通过Image接口实例化之后的赋值其src属性为请求接口的URL地址,并把请求参数放在URL地址中。可以看到图片实例不需要插入到页面DOM树中,避免了返回图片展示出来被用户看到。


后端在接到请求之后返回204请求(表示执行成功,但是没有数据)或者是一张1x1像素的gif图片。204与gif图片的区别在于你是否想要知道请求响应是否成功。因为204返回会在部分浏览器下导致onerror的回调,这就会让JS分不清是请求发送失败还是成功。

页面关闭时发送数据

ping请求是很轻的,因为它只需要创建一个Image实例即可。但是它也有一个缺陷。我们先假设第三方Javascript需要实现一个功能:在页面关闭时发送请求给服务器端记录页面已经被关闭。一般的做法是在onload或者beforeOnload事件中发送ping请求。绝大多数浏览器会延迟卸载以保证图片的载入(数据发送成功),但并不是所有浏览器都是如此。而且浏览器会忽略在onload事件回调中产生的异步XHR请求 。所以要确保请求发送成功是很难的。


如果浏览器支持CORS,那么发送同步的XHR请求是可以 block 浏览器的UI主线程,同样也可以block浏览器关闭直到服务器端返回结果。但是如果服务器端响应慢,耗时超过250ms以上(普通人能够感知到了),这就会带来很差的用户体验。同时在浏览器UI主线程中的同步XHR请求已经在标准中被列为deprecated,之后浏览器将可能会不再支持(尽管这是一个漫长的过程)。







请到「今天看啥」查看全文