首页 » Ajax » JSONP

JSONP

JSONP是JSON with padding的简写,是应用JSON的一种新方法,在后来的Web服务中非常流行。JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,就像下面这样。

callback({ "name": "Nicholas" });

JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的而数据就是传入回调函数中的JSON数据。下面就是一个典型的JSONP请求。

http://fregeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定个JSONP服务的回调参数是很常见的,就像下面的URL所示,这里指定的回调函数的名字叫handleResponse()。

JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL。这里的<script>元素与<img>元素类似,都有能力不受限制地从其它域加载资源。因为JSONP是有效的JavaScript代码,所以在请求完成后,即在JSONP响应加载到页面中以后,就会立即执行。来看一个例子。

function handleResponse(response){
    alert("你的 IP 地址是 " + response.ip + ", 地址是 " + response.city + ", " + response.region_name);
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

这个例子通过查询地理定位服务来显示你的IP地址和位置信息。

JSONP之所以在开发人员中极为流行,主要原因是它非常简单易用。与图像Ping相比,它的优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信。不过,JSONP也有两点不足。

首先,JSONP是从其它域中加载代码执行。如果其它域不安全,很可能会在响应中夹杂一些恶意代码,而此时除了完全放弃JSONP调用之外,没有办法追究。因此在使用不是你自己运维的Web服务时,一定得保证它安全可靠。

其次,要确定JSONP请求是否失败并不容易。虽然HTML5给<script>元素新增了一个onerror事件处理程序,但目前还没有得到任何浏览器的支持。为此,开发人员不得不使用用计时器检测指定事件内是否接收到了响应。但就算这样也不能尽如人意,毕竟不是每个用户上网的速度和宽带都一样。

此文章发表在 Ajax. 将 固定链接 加入收藏.