jsonp的原理和实现

什么是JSONP？

javascript高级程序设计中是这样介绍jsonp的:

jsonp是JSON with padding(填充式JSON或参数式JSON )的简写，是应用JSON的一种新方法，在后来的Web服务中非常流。jsonp看起来与json差不多，只不过是被包含在函数调用中的json。jsonp由回调函数和数据两部分组成。

简单点说，jsonp是一种跨域通信的手段，它的原理其实很简单：

1. 首先是利用script标签的src属性来实现跨域。
2. 通过将前端方法作为参数传递到服务端，然后由服务的注入参数之后再返回，实现服务器向客户端通信。
3. 由于使用script标签的src属性，因此只支持get方法。

下面详细讲解如何实现jsonp。

一.实现流程

1.设定一个script标签

 <script src="http://jsonp.js?callback=xxx"></script>

2.callback定义了一个函数名，而远程服务端通过调用指定的函数并参数参数来实现传递参数，将fn(response)传递回客户端。

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'(.json_encode($data).)';

 

3.客户端接收到返回的js脚本，开始解析和执行fn(response)

 

二.jsonp简单实现

 

1.在浏览器端:

首先全局注册一个callback回调函数，记住这个函数名字(比如:result)，这个函数接收一个参数，参数是服务端返回的数据，函数的具体内容时处理这个数据。

然后动态生成一个script标签，src为：请求资源的地址 + 获取函数的字段名 + 回调函数名，这里 获取函数字段名是要和服务端约定好的，是为了让服务端拿到回调函数名称。（比如：www.example.com?callbackName = result）

 

function result (data) {
  console.log(data.name)
}
var jsonp = document.createElement('script')
jsonp.src = 'www.example.com?callbackName=result'
document.getElementsByTagName('head')[0].appendChild(jsonp)

 

2.服务端

在接收到浏览器端script的请求之后，从url的query的callbackName获取到回调函数的名字，例子中是 result。

然后动态生成一段js片段去给这个函数传入参数执行这个函数。比如：

 

result({name:'Joy'})

3.执行

 

服务端返回这个script之后，浏览器端获取到script资源，然后会立即执行这个js，也就是上面那个片段，这样就能根据之前写好的回调函数处理这些数据了。

 

在一些第三方库往往都会封装jsonp的操作，比如jquery的$.getJSON