介绍JSONP之前,先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写,是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本,因此可通过许多途径进行JSON消息的传递。
1. JSONP定义
JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。
2.JSONP由来
要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。
3. JSONP原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.
然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。
最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。
其实 JSONP是个很简单的一个东西。主要是利用了 <script/>标签对javascript文档的动态解析来实现。(其实也可以用eval函数) 。
4.下面分别用js和jquery实现代码如下:
test.jsp中的js代码:
js:
- <script type="text/javascript">
- function jsonpCallback(result){
- alert(result[1].name);
- }
- </script>
- <script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>
或jquery代码:
- <script type="text/javascript">
- $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){
- alert(json[0].name);
- });
- </script>
jsonp.jsp代码:
- <%
- String callback = request.getParameter("callback");
- out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
- out.print(callback);
- %>
当然,后台可以用action或servlet等实现。
分享到:
相关推荐
jsonp 使用例子,json 调用的从 alert 开始,到调用远程的jsonp服务,到实现自己的 jsonp 服务。
本地实现的最简单jsonp例子,本地模拟,适合初学者,让初学者更加容易理解jsonp的概念,本来想0分下载的,貌似csdn强制最低2分才能下载
php版跨域 ajax+jsonp例子源代码.zip
跨域_jsonp_原理,了解json的原理,等于我们掌握json的技术有帮助
java web版 跨域 ajax+jsonp例子源代码.zip
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的...
使用Jquery中的Aajx方法利用Jsonp方式访问豆瓣公开的api接口,跨域获取书籍信息。
交接jsonp,轻松实现跨域方法的调用,很值得学习的东西
使用 JSONP 完成 HTTP 和 HTTPS 之间的跨域访问 知识点一: 什么是 JSONP ...通过了解 JSONP 的工作原理、使用场景、优点和缺点,我们可以更好地使用 JSONP 实现跨域访问,提高应用程序的安全性和性能。
Jsonp和java操作
NULL 博文链接:https://bijian1013.iteye.com/blog/2179338
主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
jsonp的原理 jsonp的使用,使用jsonp解决js跨域问题!
JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理
JSONP原理以及示例.rar
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。
JSONP简单调用实例。ASP.NET和纯HTML。jQuery的$.ajax的调用!jsonP说白了,就是在json字符串外面包上一个:参数名称+左右括弧!只是包了个:jsonpCallback() 而已! 相关文章:...
对应我的文章json和jsonp格式数据返回