jsonp原理和使用简介

最新推荐文章于 2024-08-14 15:45:18 发布

victorviz

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量122

点赞数

js 前端 jsonp jquery

jsonp相关

背景：js现在作为主流的连接前后端的工具，最常用的数据格式是json。如果前端页面和服务器在同一个域名下面，数据传输没有问题，但假如你的后台服务和前端代码是部署在不同的域名下，由于js的安全限制，你是不能获取数据的。于是聪明的前端开发人员使用了一种跨域数据交互协议,就是jsonp。

jsonp来源

我们知道,js的跨域调用是可以的，那么我们如果让服务端返回的不仅仅是一段数据，而是一段代码，那么这段代码肯定是可以执行的。这个就是jsonp的基本原理。

看下面一段代码：

            
 
 
  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    var localHandler = function(data){
        alert('在这里显示传回来的函数：' + data.result);
    };
    </script>
    <script type="text/javascript" src="http://不同域下的服务器地址/remote.js"></script>
</head>
<body>

</body>
</html>

我们假设remote.js是远程的js文件，并具内容是：localHandler({"result":"这是服务端要返回的数据"});,那么这个文件会被调用，数据也就传过来了。

使用
现在主流的框架都支持jsonp了，较常用的jqeury可以这样使用:

            
  
  
   
   
    var url = 'http://我的服务器的地址:port/quesetion/hello?callback=?';
    $.getJSON(url, function(data) {
        var content = data[0];
        alert(content):
        
    }
    
   服务器返回的数据是：
        Question q = dataService.randomQuestion(null);//这个不用管，只是我的代码
        String callBack = req.getParameter("callback");
        System.out.println("callback="+ callBack);
        response.setContentType(RESPONSE_JSON_CONTENTTYPE);
        PrintWriter writer = response.getWriter();
        StringBuilder sb = new StringBuilder();
        sb.append(callBack + "([");//这里需要作为一个函数包装起来
        sb.append(q.toString());
        sb.append("])");
        writer.write(sb.toString());
        return null;

victorviz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp原理和使用简介

js 前端 jsonp jqueryjsonp相关背景：js现在作为主流的连接前后端的工具，最常用的数据格式是json。如果前端页面和服务器在同一个域名下面，数据传输没有问题，但假如你的后台服务和前端代码是部署在不同的域名下，由于js的安全限制，你是不能获取数据的。于是聪明的前端开发人员使用了一种跨域数据交互协议,就是jsonp。jsonp来源我们知道,js
复制链接

扫一扫