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

没有更多推荐了,返回首页