当前位置:Web前端 > jquery> 正文

什么是jsonp格式

时间:2013-8-8类别:Web前端

什么是jsonp格式

什么是jsonp格式

json相信大家都用的多,jsonp也经常看到,其功能主要是 “用来跨域的”

 

一、JSONP定义


JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。

 

二、JSONP由来

要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。

 

三、JSONP原理


1、首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.

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

3、最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。

 

四、JSONP的客户端具体实现

 

不管jQuery也好,extjs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的。

(1)、新建一个lightResult.aspx的页面,用来生成一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串),函数名jsonpHandler与调用时指定的回调函数名相同,如果没有指定,则默认的是callback:

 

  •  
  • C# 代码   复制
  • 
    jsonpHandler({
        "code": "aaa",
        "price": 1780,
        "tickets": 5
    });
    		
  •    

    (2)、利用jQuery如何实现jsonp调用

     

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE>
     <html>
     <head>
         <title>Untitled Page</title>
          <script type="text/javascript" src=jquery.min.js"></script>
          <script type="text/javascript">
         jQuery(document).ready(function(){ 
            $.ajax({
                 type: "get",
                 async: false,
                 url: url?code=aaa,
                 dataType: "jsonp",
         
                 jsonpCallback:"jsonpHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                 success: function(json){
                     alert('您查询到信息:价格: ' + json.price + ' 元,还剩: ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('失败了!');
                 }
             });
         });
         </script>
         </head>
      <body>
      </body>
     </html>
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐