JSONP(转)

1 什么是Jsonp?

JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。

由于同源策略,一般来说位于server1.example.com的网页无法与不是 server1.example.com的服务器沟通,而HTML的 < script >元素是一个例外。利用 < script >元素的这个开放策略,网页可以得到从其他来源动态产生的JSON数据,而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运行而不是用JSON解析器解析。

2 Jsonp基本原理

为了理解这种模式的原理,先想像有一个回传JSON文件的URL,而JavaScript 程序可以用XMLHttpRequest跟这个URL要数据。假设我们的URL是http://tools.42du.cn/jsonp/student/3 。假设iFat3的st_no是3,当浏览器通过URL传递iFat3的st_id,也就是抓取http://tools.42du.cn/jsonp/student/3,得到:

{"st_no":3,"st_name":"iFat3","st_desc":"iFat3是学校的超级学渣"}

这个JSON数据可能是依据传过去URL的查询参数动态产生的。

这个时候,把 < script >元素的src属性设成一个回传JSON的URL是可以想像的,这也代表从HTML页面通过script元素抓取 JSON是可能的。

然而,一份JSON文件并不是一个JavaScript程序。为了让浏览器可以在 < script >元素运行,从src里URL 回传的必须是可运行的JavaScript。在JSONP的使用模式里,该URL回传的是由函数调用包起来的动态生成JSON,这就是JSONP的“填充(padding)”或是“前辍(prefix)”的由来。

惯例上浏览器提供回调函数的名称当作送至服务器的请求中命名查询参数的一部分,例如:

 <script type="text/javascript"
    src="http://tools.42du.cn/jsonp/student/3?callback=callback>
 </script>

服务器会在传给浏览器前将JSON数据填充到回调函数(callback)中。浏览器得到的回应已不是单纯的数据叙述而是一个脚本。在本例中,浏览器得到的是:

/**/callback({"st_no":3,"st_name":"iFat3","st_desc":"iFat3是学校的超级学渣"});

3 服务端生成Jsonp

本例中的Jsonp利用的是Spring Framework的JSonp处理部分生成,详细内容请阅读官方文档。链接见相关资料中的spring部分,本人强烈建意您在实际开发过程中,先阅读官方文档,再进行代码编写。

3.1 模型(model)对象

Student模型对象的get和set方法未列出。

public class Student extends BaseBean implements Serializable {
    private Integer st_no;
    private String st_name;
    private String st_desc;
}

3.2 spring的Jsonp处理

@ControllerAdvice
@RequestMapping("/jsonp")
public class StudentJsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    private List<Student> students = new ArrayList<Student>();
    public StudentJsonpAdvice() {
        super("callback");
        initData();
    }
    @RequestMapping(value="/student/all",method= RequestMethod.GET)
    @ResponseBody
    public List<Student> list(){
        return students;
    }
    @RequestMapping(value="/student/{st_no}",method= RequestMethod.GET)
    @ResponseBody
    public Student info(@PathVariable Integer st_no){
        if(st_no != null) {
            if(st_no > 0 && st_no <4) {
                return students.get(st_no -1);
            }
            return students.get(0);
        }
        return null;
    }
    private void initData() {
        Student st1 = new Student(1,"王美丽","王美丽是学校的校花");
        Student st2 = new Student(2,"毛三胖","毛三胖是学校的学霸");
        Student st3= new Student(3,"iFat3","iFat3是学校的超级学渣");
        students.add(st1);
        students.add(st2);
        students.add(st3);
    }
}

4 客户端取得Jsonp数据

利用JQuery的ajax方法取得所有学生的数据,并利用回调函数(callback)将数据插入到页面中。更多JQuery的ajax方法参见相关资料中的JQuery部分。

function callback(data) {
        $(data).each(function(i,item){
            $("#stu_ul").append("<li>"+item.st_name+"</li>");
        });
    }
    $(document).ready(function () {
        $.ajax({
            type:"get",
            dataType:"jsonp",
            url:"http://tools.42du.cn/jsonp/student/all",
            jsonpCallback:"callback"
        });
    })

5 相关资料

Spring处理Jsonp文档

JQuery Ajax官方文档

维基Jsonp条目

菜鸟Jsonp教程

JSON中文介绍

学生列表Jsonp地址

学生信息Jsonp地址

时间: 2024-10-15 19:49:58

JSONP(转)的相关文章

原生jsonp跨域

<script> // jsonp跨域原生写法 var script = document.createElement('script'); script.src = 'http://192.168.7.16/kuayu/test02.php?callback=aa'; document.body.appendChild(script); //aa('后台数据') function aa(res) { alert(res.website); } </script>

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

jsonp跨域

1 (function(window, document, undefined) { 2 'use strict'; 3 var jsonp = function(url, data, callback) { 4 var fnSuffix = Math.random().toString().replace('.', ''); 5 var cbFuncName = 'my_json_' + fnSuffix; 6 window[cbFuncName] = callback; 7 var quer

jsonp

由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Padding),其实就是被包裹在函数调用中的JSON. callback({"name": "Kate"}); 1. JSONP原理 通过script标签进行跨域操作,载入的请求js文件中的内容会执行我们在url中指定的函数,并且,传入的参数,就是我们请求的数据. 2. J

JSON JSONP ajax

JSON 是一种数据格式 不是数据类型 也不是编程语言  JSON: JavaScript对象表示法 (JavaScript Object  Nonation)  与XML类似 比xml更小 更快 更易解析 JSONP :JSON+Padding (内填充)   把JSON当作内容添加到一个盒子里    用于 跨域              callback参数 什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码

说一说javascript跨域和jsonp

同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据,浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”. 因为同源策略的存在,防止了跨域访问的安全问题,但同时也损失了方便获取资源的便利. 跨域的src属性 世事又非绝对,浏览器还是允许几个元素跨域访问

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

jsonp的使用

假设我们已经了解什么是同源策略,以及什么是浏览器的同源策略的限制. 现在我们需要在a.demo.com下的某个页面one.html 里加载不同域b.demo.com下的json数据. 我们都知道用<script>或者<img>标签的src属性是可以跨域从某个站点加载数据的,jsonp就是根据这个原理来实现. 我们同样也知道,当浏览器加载完<script>标签的内容之后,它会立即执行.所以为了不让浏览器报错,这些内容应该是一些变量的定义或者是函数的调用之类的东西. 但是,

Jquery调用从ashx文件返回的jsonp格式的数据处理实例

开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点,保存位置选择D:\Website1;添加新项,选择一般处理程序,命名cmdHandler.ashx;添加新项,选择HTML页,命名为testAshx.htm;网上下载jquery-1.4.min.js拷贝到web站点中 项目相关网站源码和运行截图如下: 1.testAshx.htm代码如下: <!

谈谈怎么使用JSONP

JSONP是什么,其实它是目前主流的实现跨域通信的解决方案. 因为我们都知道,在我们使用ajax去发起HTTP请求的时候,是不可以跨域的.也就是不能在不同域名下.端口等去请求.如果我们强行这么做的话,它是会报错. 这里举个例子. function createXHR() { var xhr = new XMLHttpRequest(); return xhr; } function ajax(url) { var xhr = createXHR(); xhr.onreadystatechange