Javascript Ajax总结——其他跨域技术之图像Ping和JSONP

在CORS出现之前，为实现跨域Ajax通信，开发人员利用DOM中能够执行跨域请求的功能，在不依赖XHR对象的情况下也能发送某种请求。
1、图像Ping
这里使用<img>标签。一个网页可以从任何网页中加载图像，不用担心跨域或不跨域。
动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单、单向的跨域通信的一种方式。
请求的数据：以查询字符串形式发送
响应的数据：可以是任意内容，但通常是像素图或204响应

1 var img = new Image();
2 img.onload = img.onerror = function(){
3     alert("Done!");
4 };
5 img.src = "http://www.example.com/test?name=Anna";


请求从设置src属性那一刻开始。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
两个主要缺点：
    a、只能发送GET请求；
    b、无法访问服务器的响应文本。
因此，图像Ping只能用于浏览器与服务器间的单向通信。

2、JSONP
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。
JSONP是被包含在函数调用中的JSON：
    callback({ "name": "Nicholas"});
JSONP由2部分组成：回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。数据是传入回调函数中的JSON数据。
JSONP请求：
    http://freegeoip.net/json/?callback=handleResponse
通过查询字符串来指定JSONP服务的回调参数是很常见的，像上面的URL所示，这里指定的回调函数的名字叫handleResponse()。

1 function handleResponse(response){
2     alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
3 }
4 var script = document.createElement("script");
5 script.src = "http://freegeoip.net/json/?callback=handleResponse";
6 document.body.insertBefore(script, document.body.firstChild);


<script>元素可以不受限制地从其他域加载资源。因为JSONP是有效的Javascript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。
JSONP非常简单易用，能够直接访问响应文本，支持在浏览器和服务器之间双向通信。
JSONP不足：
    JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP调用之外，没有办法追究；
    要确定JSONP请求是否失败不容易。虽然HTML5给<script>元素新增了一个onerror事件处理程序，但浏览器支持情况不好。为此，不得不使用计时器检测指定时间内是否接收到了响应。但这样也不能尽如人意，因为不是每个用户上网的速度和宽带都一样。

Javascript Ajax总结——其他跨域技术之图像Ping和JSONP

猜你喜欢