jsonp

发布时间：2020-12-16 19:46:52 所属栏目：百科来源：网络整理

导读：jsonp 编辑 JSONP(JSON with Padding)是 JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用

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. 在客户端调用提供JSONP支持的URL Service，获取JSONP格式数据。

比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction

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

那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])

可能的调用方式：

 
         <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下：

$.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

$.ajax({

 
         dataType: 
         'jsonp' 
          
         data: 
         'id=10' 
          
         jsonp: 
         'jsonp_callback' 
          
         url: 
         'http://www.yiwuku.com/getdata' 
          
         success: 
         (){ 
        

 
         
         //dostuff 
         
         
         }, 
         
         
          
  如何在服务器端实现对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"}]) 
  
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

jsonp

jsonp

目录

使用