JSONP的原理

来源：互联网发布：苏有朋斥周杰炒作知乎编辑：程序博客网时间：2024/05/18 03:42

今天看面试题看到了JSONP的实现，而且上次面试也被问到了，虽然回答出来了，但还是需要整理一下。

本文先介绍JSONP的实现原理，介绍几个例子。关于JSON是什么，我会在下一篇介绍。

WHY

Ajax直接请求一般文件存在跨域无权限访问的问题，而我们发现凡是拥有src属性的标签都拥有跨域能力，比如<script>、<img>、<iframe>,于是可以判断，可以利用这些标签跨域访问数据，也就是在远程服务器上设法把数据装进js格式的文件里，供客户端进一步处理。

HOW

JSONP实现原理：

1、首先在客户端注册一个callback（也就是写一个回调函数），然后把callback的名字传递给服务器

2、服务器先生成json数据，然后以js语法的方式，生成一个函数，函数名就是callback传递的回调函数名

3、然后服务器将json数据直接以入参的方式，放到function中，这样就生成了一段js语法的文档，返回给客户端。

4、客户端浏览器，解析script标签，并执行返回的js文件，动态执行回调函数。

Examples

下面我们逐步解释这个原理：

静态方式：

1、现在远程服务器remoteserver.com根目录下有一个remote.js文件代码如下（服务端代码）：

alert('我是远程文件’);

本地服务器localserver.com下有个jsonp.html页面代码如下（客户端代码）：

<!DOCTYPE html><html><head>     <title>"jsonp的实现方式"</title>     <script type="text/javascript" src="http://remoteserver.com/remote.js"></script></head> </html>

毫无疑问，页面会弹出一个提示窗，显示“我是远程文件”。

2、现在我们在jsonp.html里定义一个函数，然后从远程remote.js中传入数据进行调用。

<!DOCTYPE html><html><head>     <title>"jsonp的实现方式"</title>     <script type="text/javascript">          function  jsonCallback(data){               alert(data.result);          };     <script type="text/javascript" src="http://remoteserver.com/remote.js"></script></head> </html>

remote.js文件代码如下：

jsonCallback({“result”:”我是远程js带来的数据”})；

运行之后，页面成功弹出提示窗口。这样跨域远程获取数据的目的实现了，但是又有一个问题出现了，jsonp的服务者有很多服务对象，远程js怎么知道它应该调用的本地函数叫什么名字呢？

3、只要服务端提供的js脚本是动态生成的就行了，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

动态方式

<!DOCTYPE html><html><head>     <title>"jsonp的实现方式"</title>     <script type="text/javascript"></script>     function jsonCallback(data){          alert(data.result);     }     var url="http://remoteserver.com?callback=“jsonCallback";     var script=document.createElement("script");     script.setAttibute('src',url);     document.getElementByTagName('head')[0].appendChild("script");</head></html>

这样就可以了！！

是不是很简单。

参考：

http://kb.cnblogs.com/page/139725/

0 0