jsonp

Json 前端之家
前端之家收集整理的这篇文章主要介绍了jsonp，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

jsonp

编辑
JSONP(JSON with Padding)是 JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
中文名
jsonp
外文名
JSON with Padding
模式
使用
串，
这段返回的

目录

  1. 1使用
  2. 2体现

使用

编辑
1. 在客户端调用提供JSONP支持的URL Service，获取JSONP格式数据。
比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction
假设客户期望返回JSON数据：["customername1","customername2"]
那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])
可能的调用方式：
1
<scripttype= "text/javascript" src= "http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction" ></script>
2. 在客户端写callbackFunction函数的实现
1
2
3
4
5
6
7
8
9
10
11
12
>
function CustomerLoaded(result,methodName)
{
var html= '<ul>' ;
for ( i=0;i<result.length;i++)
{
html+= '<li>' +result[i]+ '</li>' ;
}
'</ul>' ;
document.getElementById( 'divCustomers' ).innerHTML=html;
}
</script>
3. 页面展示
< div id = "divCustomers" ></ div >
4. 最终Page Code
12
13
14
15
16
17
18
19
20
21
<!DOCTYPEhtmlPUBLIC "-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<htmlxmlns= "http://www.w3.org/1999/xhtml" >
<head>
<title>TopCustomers with Callback</title>
</head>
<body>
<divid= "divCustomers" >
</div>
>
onCustomerLoaded(result,methodName){
;
i=0;i<result.length;i++){
;
}
;
).innerHTML=html;
}
</script>
"http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded" ></script>
</body>
</html>
体现 JQuery下：
  1. $.getJSON
11
<script>
$(document).ready( (){
$.getJSON( "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?" ,
(data){
$.each(data.items,
(i,item){
$( "<img/>" ).attr( "src" "#images" );
if (i==3)returnfalse;
});
});
});
jsoncallback=?，其中 '？ '会自动替换为function(data)函数。
2. $.ajax
9
$.ajax({
dataType: 'jsonp' data: 'id=10' jsonp: 'jsonp_callback' url: 'http://www.yiwuku.com/getdata' success: (){
//dostuff
},
@H_866_502@ 如何在服务器端实现对JSONP支持
这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了，格式可以自已定义，毕竟这是个非官方的协议。
可参考：Implement JSONP in your Asp.net Application
注：Callback仅仅是JSONP的简单实现，可以根据具体需要实现更复杂的功能，比如可以在客户端动态集成更多的变量数据来完成 分页功能。
Java:
return request.getParameter("jsonpcallback")+"("+JsonString+")";
返回内容像：jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])
原文链接：https://www.f2er.com/json/288611.html

猜你在找的Json相关文章

jsonp
　　jsonp需要在页面中添加一个<script>元素，由该元素来从其他服务器加载json数据。...
jsonp跨域
<script> var testApi = "地址"; $.ajax({ url:testApi,//可以不是本地域名...
MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题，然后有个jsonp的解决方案，MVC中代码如下： public class JsonpR...
fastjson反序列化json对象时保留null值的key
最近开发中遇到调用第三方web_api的功能，后端在处理json数据时使用fastjson来做反序列化，...
JsonCpp 的使用
JSON全称为JavaScript ObjectNotation，它是一种轻量级的数据交换格式，易于阅读、编写、解...
jsonp
var newScript = document.createElement(‘script‘); newScript.setAtt...
jsonp 跨域
$.ajax({ url:"http://192.168.100.47:8080/ais-connect/data/newai...
JSONArray 去重
前台说 只能传给我这样的数据 [     {         "labelName":"皮肤颜...
FastJson的坑
1.list中放入同一个对象，会出现内存地址引用{"$ref":"#[0]"}，后台可以识...
fastJson转换对象与字符串
static class TempClass{ private String name; private int age; public String getName(...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作