加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

jsonp学习一认识jsonp

发布时间:2020-12-16 19:34:44 所属栏目:百科 来源:网络整理
导读:为什么要用jsonp? 由于 同源策略 ,大致理解就是 http://www.aa.com不能和http://www.bb.com进行数据沟通。 例如: $.ajax({url:“http://www.google.com/search?q=jquery“,success:function(json){alert(json.count)}}); 上面的代码是向谷歌发送一个搜索请

为什么要用jsonp?

由于同源策略,大致理解就是http://www.aa.com不能和http://www.bb.com进行数据沟通。

例如:

$.ajax({
url:“http://www.google.com/search?q=jquery“,success:function(json){
alert(json.count)
}
});

上面的代码是向谷歌发送一个搜索请求,关键字是JQuery,将处理后的结果返回到我自己的服务器上面来,很显然是不能实现的。

什么是jsonp?

JSONP(JSON with Padding)是Json的一种“使用模式”,用于解决浏览器跨域数据访问问题


jsonp原理?

从远程服务器引入js脚本是可行的,不受同源策略的影响。


jsonp获取远程服务器数据流程

如图,在本地上的一个jsp页面中,加入了<script>标签,并指定了要访问的接口并传递了参数callback,http://server.example.com/Users/1234?callback=parseResponse,这个URL请求会进行处理,返回json数据。


例如远程服务器servlet中这样生成js脚本:

protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
//接收参数,根据条件获取JSON数据
StringjsonData=getDataAsJson(req.getParameter("symbol"));
//获取回调函数名
Stringcallback=req.getParameter("callback");
//拼接动态JS代码
Stringoutput=callback+"("+jsonData+");
resp.setContentType("text/javascript");
PrintWriterout=resp.getWriter();
out.println(output);
//输出为jsonpFunc({"symbol":"IBM","price":"91.42"});
}

然后将js脚本加载到本地的jsp页面中。

执行下面的回调函数,处理返回的json数据。

varparseResponse=function(data){
alert(data.result);
};

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读