分类导航

Json 发布时间：2022-04-22 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了JSONP的简单介绍，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

（1）使用

1.在@H_262_3@@H_262_3@客户端调用提供JSONP@H_262_3@支持的@H_262_3@URLservice@H_262_3@，获取@H_262_3@JSONP@H_262_3@格式数据。@H_262_3@@H_262_3@

比如客户想访问http://www.yiwuku.com/myservice.aspx?jsonp=callBACkFunction@H_262_3@@H_262_3@

假设客户期望返回JSON@H_262_3@数据：@H_262_3@["customername1","customername2"]@H_262_3@@H_262_3@

那么真正返回到@H_262_3@的ScriptTags:callbackFunction([“customername1","customername2"])

可能的调用方式：

<scripttype="text/javascript"src="http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction"@H_262_3@>@H_262_3@

</script>@H_262_3@
@H_262_3@@H_262_3@

2.在@H_262_3@@H_262_3@写callbackFunction函数的实现

functiononCustomerLoaded(result,methodName)

{

varhtml='<ul>';

for(vari=0;i<result.length;i++)

{

html+='<li>'+result[i]+'</li>';

}

html+='</ul>';

document.getElementById('divCustomers').innerHTML=html;

}

</script>

3.页面展示

<divid="divCustomers"></div>

4.最终PageCode

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd@H_262_3@">

<htmlxmlns=http://www.w3.org/1999/xhtml@H_262_3@">

<head>

<title>TopCustomerswith@H_262_3@CallBACk</title>

</head>

<body>

<divid="divCustomers"@H_262_3@>

</div>

<scripttype="text/javascript"@H_262_3@>

function@H_262_3@onCustomerLoaded(result,methodName){

'<ul>'@H_262_3@;

var@H_262_3@i=0;i<result.length;i++){

html+='</li>'@H_262_3@;

}

html+='</ul>'@H_262_3@;

document.getElementById('divCustomers'@H_262_3@).

}innerHTML=html;

</script>

<scripttype="text/javascript"@H_262_3@src=http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded@H_262_3@"></script>

</body>

</html>

来源：<@H_262_3@http://baike.baidu.com/link?url=E0DcevZsqTdNCpNqjLIF-IT0O5wM_3zpnyGytIoYBL7IODxfbfpZqYmb1ql9QIjw4glCxLuOYkV3qCFI2wDNcq>

@H_262_3@

（2）体现

JQuery下：@H_262_3@@H_262_3@

00001.

$.getJSON@H_262_3@

00002.

00003.

$(document).ready(function@H_262_3@(){

00004.

$.getJSON("@H_262_3@http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"@H_262_3@,

00005.

function@H_262_3@(data){

00006.

$.each(data.items,

00007.

function@H_262_3@(i,item){

00008.

$("<img/>"@H_262_3@).attr("src"@H_262_3@,item.media.m).appendTo("#images"@H_262_3@);

00009.

if@H_262_3@(i==3)returnfalse;

00010.

});

00011.

});

00012.

});

00013.

jsoncallBACk=?，其中？会自动替换为function(data)函数。@H_262_3@

00014.

2.$.ajax@H_262_3@

00015.

$.ajax({

00016.

dataType:'jsonp'@H_262_3@,

00017.

data:'id=10'@H_262_3@,

00018.

jsonp:'jsonp_callBACk'@H_262_3@,

00019.

url:'@H_262_3@http://www.yiwuku.com/getdata'@H_262_3@,

00020.

success:function@H_262_3@(){

00021.

//dostuff@H_262_3@

00022.

00023.

});

00024.

如何在服务器端实现对JSONP支持@H_262_3@

00025.

这仅仅需要把服务的JSON数据转换成想要的scripttags的形式就可以了，格式可以自已定义，毕竟这是个非官方的协议。@H_262_3@

00026.

可参考：ImplementJSONPinyourAsp.netApplication@H_262_3@

00027.

注：CallBACk仅仅是JSONP的简单实现，可以根据具体需要实现更复杂的功能，比如可以在@H_262_3@动态集成更多的变量数据来完成@H_262_3@分页功能。@H_262_3@

00028.

Java:@H_262_3@

00029.

returnrequest.getParameter("jsoncallBACk")+"("+JsonString+")";@H_262_3@

00030.

返回内容像：jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])@H_262_3@

00031.

扩展：@H_262_3@

1、AJAX跨域请求-JSONP获取JSON数据？

AsynchronousJavaScriptandXML(AjaX)是驱动新一代Web站点（流行术语为Web2.0站点）的关键技术。Ajax允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索。使用XMLhttp request函数获取数据，它是一种API，允许客户端JavaScript通过http连接到远程服务器。Ajax也是许多mashup的驱动力，它可将来自多个地方的内容集成为单一Web应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

理解同源策略限制@H_262_3@

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。@H_262_3@也就是说，受到请求的URL的域必须与当前Web页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从netscapeNavigator2.0版本开始就存在。

克服该限制的一个相对简单的方法是让Web页面向它源自的Web服务器请求数据，并且让Web服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前Web页面中创建新区域，并且使用GET请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在Web页面中插入动态脚本元素，该页面源指向其他域中的服务URL并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供Web页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加JavaScriptObjectNotation(JSON)可以改进该技术。

1、什么是JSONP？

要了解JSONP，不得不提一下JSON，那么什么是JSON？

JSONisasubsetoftheobjectliteralnotationofJavaScript.SinceJSONisasubsetofJavaScript,itcanbeusedintHelanguagewithnomussorfuss.

JSONP(JSONwithPadding)是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallBACk的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、JSONP有什么用？

由于同源策略的限制，Xmlhttp request只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3、如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

HTML代码（任一@H_262_3@@H_262_3@）：

HTML代码

1.@H_262_3@<Meta@H_262_3@content@H_262_3@="text/html;charset=utf-8"@H_262_3@http-equiv@H_262_3@="Content-Type"@H_262_3@/>@H_262_3@

2.@H_262_3@<script@H_262_3@type@H_262_3@="text/javascript"@H_262_3@>@H_262_3@

3.functionjsonpCallBACk(result){

4.//alert(result);

5.for(variinresult){

6.alert(i+":"+result[i]);//循环输出a:1,b:2,etc.

7.}

8.}

9.varJSONP@H_262_3@=document@H_262_3@.createElement("script");

10.JSONP.type@H_262_3@="text/javascript"@H_262_3@;

11.JSONP.src@H_262_3@="http://crossdomain.com/services.PHP?callBACk=jsonpCallBACk"@H_262_3@;

12.document.getElementsByTagName("head")[0].appendChild(JSONp);

13.@H_262_3@</script>@H_262_3@

或者

HTML代码

>@H_262_3@

3.functionjsonpCallBACk(result){

4.alert(result.a);

5.alert(result.b );

6.alert(result.c);

7.for(variinresult){

8.alert(i+":"+result[i]);//循环输出a:1,etc.

9.}

10.}

11.@H_262_3@</script>@H_262_3@

12.@H_262_3@"text/javascript"@H_262_3@src@H_262_3@="http://crossdomain.com/services.PHP?callBACk=jsonpCallBACk"@H_262_3@></script>@H_262_3@

JavaScript的链接，必须在function的下面。

服务端PHP 代码（services.PHP）：

PHP 代码

1.<?PHP

3.@H_262_3@//服务端返回JSON数据@H_262_3@

4.$arr=array@H_262_3@('a'@H_262_3@=>1,'b'@H_262_3@=>2,255)">'c'=>3,255)">'d'=>4,255)">'e'=>5);

5.$result=json_encode($arr);

6.@H_262_3@//echo$_GET['callBACk'].'("Hello,World!")';@H_262_3@

7.@H_262_3@//echo$_GET['callBACk']."($result)";@H_262_3@

8.@H_262_3@//动态执行回调函数@H_262_3@

9.$callBACk=$_GET['callBACk'@H_262_3@];

10.echo$callBACk."($result)"@H_262_3@;

如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。

$.getJSON
$.ajax
$.get

客户端JS代码在jQuery中的实现方式1：

Js代码

1.<scripttype="jquery.js"@H_262_3@></script>

2.<scripttype="text/javascript"@H_262_3@>

3.$.getJSON("http://crossdomain.com/services.PHP?callBACk=?"@H_262_3@,

4.function@H_262_3@(result){

5.for@H_262_3@(var@H_262_3@iin@H_262_3@result){

6.alert(i+":"@H_262_3@+result[i]);//循环输出a:1,etc.@H_262_3@

7.}

8.});

9.</script>

客户端JS代码在jQuery中的实现方式2：

Js代码

1.<scripttype="text/javascript"@H_262_3@>

3.$.ajax({

4.url:"http://crossdomain.com/services.PHP"@H_262_3@,

5.dataType::rgb(0,

6.data:''@H_262_3@,

7.jsonp:'callBACk'@H_262_3@,

8.success:function@H_262_3@(result){

9.in@H_262_3@result){

10.alert(i+:rgb(0,etc.@H_262_3@

11.}

12.},

13.timeout:3000

14.});

15.</script>

客户端JS代码在jQuery中的实现方式3：

Js代码

1.<scripttype="text/javascript"@H_262_3@>

3.$.get('http://crossdomain.com/services.PHP?callBACk=?'@H_262_3@,{name:encodeURIComponent('tester'@H_262_3@)},function@H_262_3@(json){in@H_262_3@json)alert(i+":"@H_262_3@+json[i]);},255)">'jsonp');

4.</script>

其中jsonCallBACk是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
http://crossdomain.com/services.PHP?callBACk=jsonpCallBACk
这个url是跨域服务器取json数据的接口，参数为回调函数的名字，返回的格式为

Js代码

1.jsonpCallBACk({msg:'thisisjsondata'@H_262_3@})

Jsonp原理：
首先在客户端注册一个callBACk,然后把callBACk的名字传给服务器。

此时，服务器先生成json数据。
然后以javascript语法的方式，生成一个function,function名字就是传递上来的参数jsonp.

最后将json数据直接以入参的方式，放置到function中，这样就生成了一段js语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的javascript文档，此时数据作为参数，传入到了客户端预先定义好的callBACk函数里.（动态执行回调函数）

@H_450_737@

使用JSON的优点在于：

·比XML轻了很多，没有那么多冗余的东西。

·JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。

·在JavaScript中处理JSON很简单。

·其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

·JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。

·如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

主要提示：@H_262_3@

JSONP是构建mashup的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。

第一，也是最重要的一点，没有关于JSONP调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到404错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的jQuery版本可能有终止JSONP请求的特性）。

JSONP的另一个主要缺陷是被不信任的服务使用时会很危险。因为JSONP服务返回打包在函数调用中的JSON响应，而函数调用是由浏览器执行的，这使宿主Web应用程序更容易受到各类攻击。如果打算使用JSONP服务，了解它能造成的威胁非常重要。