首页 > 代码库 > jsonp的原理和实现
jsonp的原理和实现
什么是JSONP?
javascript高级程序设计中是这样介绍jsonp的:
jsonp是JSON with padding(填充式JSON或参数式JSON )的简写,是应用JSON的一种新方法,在后来的Web服务中非常流。jsonp看起来与json差不多,只不过是被包含在函数调用中的json。jsonp由回调函数和数据两部分组成。
简单点说,jsonp是一种跨域通信的手段,它的原理其实很简单:
- 首先是利用script标签的src属性来实现跨域。
- 通过将前端方法作为参数传递到服务端,然后由服务的注入参数之后再返回,实现服务器向客户端通信。
- 由于使用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 = http://www.mamicode.com/‘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
jsonp的原理和实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。