JSONP是一种利用JavaScript层级开发中的回调函数实现跨域数据传输的技术。它的全称是“JSON with Padding”（用填充的JSON），为了简化称呼通常缩写为“JSONP”。在当前Web2.0高度互联的时代，各个网站往往需要从别的网站获取数据，由于安全性考虑，浏览器会禁止跨域数据传输，这时候JSONP技术就能派上用场。

一、JSONP的定义

JSONP是前后端联合完成跨域数据交互操作的一个最为常见且优秀的办法，在各个大型平台的数据传输中得到了广泛的应用。在Ajax中主要是借助JavaScript的script标签的异步下载来实现的。

二、JSONP的原理

JSONP的原理是通过script标签在客户端向服务器请求一份动态脚本，这份动态脚本通过回调函数将需要从服务端传输的数据作为参数传入客户端。因为script标签可以跨域请求数据，故可实现跨域数据请求。

三、JSONP的实现

1.创建一个回调函数

由于JSONP中的数据需要通过回调函数传入客户端，因此第一步就是要创建一个JSONP回调函数。回调函数可简单定义如下：

function callback(data){

//do something with data

}

2.创建script标签

接下来，通过JavaScript在页面中动态创建script标签，来向服务器请求数据:

var script = document.createElement("script");

script.src = "http://server.com?callback=callback";

document.body.appendChild(script);

值得一提的是，其中url的callback参数表示指定回调函数的名称。服务器需要将需要传输的数据以callback(data)的形式返回，其中data为需要传输的数据。通过指定callback参数可告诉服务器回调函数的名称。

3.服务器端的实现方式

服务器需要根据上述的callback参数值构建一个以该参数值为函数名的JavaScript代码来实现数据的返回。如下所示：

if(callback) {

responseStr = callback + "(" + data + ")";

}else{

responseStr = data;

}

response.write(responseStr);

四、JSONP的重点

1.在回调函数中执行数据处理逻辑

JSONP中是通过回调函数将数据传入客户端的，因此，在回调函数中需要对传入的数据进行处理。例如：

function callback(data){

var weather = data.weather;//前端需要这个字段

var temp = data.temperature;//前端需要这个字段

//do something with weather and temp

}

2.JSONP只接受get请求

通过script标签构造JSONP请求的方法只支持HTTP的GET请求，不支持POST等其他方式。

五、总结

JSONP技术可以通过script标签异步请求实现跨域数据传输，其优势在于解决了跨域数据请求的问题，可为数据传输提供良好的支持，实现起来也相当简单方便。但它也有其局限性，比如只能使用get请求，需要指定回调函数等。除此之外，还存在一些安全性问题，如可能被攻击者恶意篡改JSONP返回的数据等。但是这些缺点不应该成为我们采用JSONP时绕开它的障碍，这一技术在实际应用中还是相当值得推荐和使用的，能够以较高的效率实现数据的传输操作。