JSONP的原理

最新推荐文章于 2024-07-11 16:50:01 发布

逝水流痕

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量418

点赞数

分类专栏：前端入门文章标签： jsonp javascript

本文链接：https://blog.csdn.net/zxx2011082427/article/details/71189868

版权

前端入门专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天看面试题看到了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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JSONP的原理

今天看面试题看到了JSONP的实现，而且上次面试也被问到了，虽然回答出来了，但还是需要整理一下。本文先介绍JSONP的实现原理，介绍几个例子。关于JSON是什么，我会在下一篇介绍。WHYAjax直接请求一般文件存在跨域无权限访问的问题，而我们发现凡是拥有src属性的标签都拥有跨域能力，比如、、,于是可以判断，可以利用这些标签跨域访问数据，也就是在远程服务器上设法把数据装进js格式的
复制链接

扫一扫