JSON和JSONP

　　JSONP和JSON好像啊，他们之间有什么联系吗？

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。

　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度

　　JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)， 我们先看下面的小例子然后再详细介绍。

跨域的简单原理

　　光看定义还不是很明白，那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码如下：

sample.html的代码：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml" >

3 <head>

4     <title>test</title>

5     <script type="text/javascript" src="test.js"></script>

6 </head>

7 <body>

8 </body>

9 </html>

test.js的代码：

1 alert("success");

　　打开sample.html后会跳出"success”这样的这样的信息框，这似乎并不能说明什么， 跨域问题到底怎么解决呢？好，现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。

　　OK，我们接下来应该改下sample.html里的代码，因为test.js文件在B程序上了，url也就变成了localhost:20002。

sample.html部分代码：

1 <script type="text/javascript" src="http://localhost:20002/test.js"></script>

　　请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了"success"的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。

　　<script>标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

JSONP的实现模式--CallBack

　　刚才的小例子讲解了跨域的原理，我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码，如何实现JSONP的javascript callback的形式。

程序A中sample的部分代码：

1 <script type="text/javascript">
2 //回调函数
3 function callback(data) { 
4     alert(data.message); 
5 } 
6 </script> 
7 <script type="text/javascript" src="http://localhost:20002/test.js"></script>

程序B中test.js的代码：

1 //调用callback函数，并以json数据形式作为阐述传递，完成回调
2 callback({message:"success"});

　　这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

　　将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。

　　一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

程序A中sample的部分代码：

1 <script type="text/javascript"> 
2     function callback(data) {  
3         alert(data.message);  
4     }  
5     //添加<script>标签的方法 
6     function addScriptTag(src){  
7     var script = document.createElement('script');  
8         script.setAttribute("type","text/javascript");  
9         script.src = src; 
10         document.body.appendChild(script);
11     } 
12 
13     window.onload = function(){ 
14         addScriptTag("http://localhost:20002/test.js"); 
15     } 
16 </script>

　　程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。

　　上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

　　q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：

 1 <script type="text/javascript"> 
2     //添加<script>标签的方法 
3     function addScriptTag(src){

 4         var script = document.createElement('script');

 5         script.setAttribute("type","text/javascript");

 6         script.src = src;

 7         document.body.appendChild(script);

 8     }

 9 

10     window.onload = function(){

11         //搜索apple，将自定义的回调函数名result传入callback参数中
12         addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");

13 
14     }

15     //自定义的回调函数result
16     function result(data) {

17         //我们就简单的获取apple搜索结果的第一条记录中url数据
18         alert(data.responseData.results[0].unescapedUrl);

19     }

20 </script>

像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup)：

Digg API：来自 Digg 的头条新闻：

　　http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?

Geonames API：邮编的位置信息：

　　http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr JSONP API：载入最新猫的图片：

　　http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：

　　http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

　　接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。

程序B的MyService.ashx代码：

 1     public class MyService : IHttpHandler  
2     {  
3         public void ProcessRequest(HttpContext context)  
4         {  
5             //获取回调函数名 
6             string callback = context.Request.QueryString["callback"];  
7             //json数据 
8             string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";  
9  
10             context.Response.ContentType = "application/json"; 
11             //输出：回调函数名(json数据)
12             context.Response.Write(callback + "(" + json + ")");
13         } 
14  
15         public bool IsReusable 
16         { 
17             get 
18             { 
19                 return false; 
20             } 
21         } 
22     }

程序A的sample代码中的调用：

 1 <script type="text/javascript"> 2     function addScriptTag(src){

 3         var script = document.createElement('script');

 4         script.setAttribute("type","text/javascript");

 5         script.src = src;

 6         document.body.appendChild(script);

 7     }

 8  9     window.onload = function(){

10         //调用远程服务11         addScriptTag("http://localhost:20002/MyService.ashx?callback=person");

12 13     }

14     //回调函数person15     function person(data) {

16         alert(data.name + " is a " + data.sex);

17     }

18 </script>　　

　　这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用JSONP的。

jQuery对JSONP的实现

　　jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">    
 $.getJSON("http://localhost:20002/MyService.ashx?callback=?",
function(data){         alert(data.name + " is a a" + data.sex);     }); 
</script>

　　结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

　　当然，加入说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现(参数较多，详细可以参考http://api.jquery.com/jQuery.ajax)。先来看看如何实现吧：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">    $.ajax({         url:"http://localhost:20002/MyService.ashx?callback=?",            dataType:"jsonp",         jsonpCallback:"person",         success:function(data){             alert(data.name + " is a a" + data.sex);         }    }); </script>

　　没错，jsonpCallback就是可以指定我们自己的回调方法名person，远程服务接受callback参数的值就不再是自动生成的回调名，而是person。dataType是指定按照JSOPN方式访问远程服务。

　　利用jQuery可以很方便的实现JSONP来进行跨域访问。先暂时写到这吧。

转自：http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

JSONP--解决ajax跨域问题的更多相关文章

  1. 说说JSON和JSONP，浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  2. JSON和JSONP，浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  3. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

  4. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  5. 【转】Php+ajax+jsonp解决ajax跨域问题

    首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : &quo ...

  6. 如何解决ajax跨域请求？

    1.什么是跨域? a.域名不同 b.域名相同,端口不同 注:只有域名相同,端口相同时,才可以访问数据 可以使用jsonp解决ajax跨域请求的问题. 2.什么是jsonp? Jsonp其实就是一个跨域 ...

  7. 如何解决ajax跨域问题（转）

    由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...

  8. 看小白如何解决ajax跨域问题

    由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...

  9. 如何解决ajax跨域问题

    如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...

  10. 【前端_js】解决ajax跨域请求数据

    1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...

随机推荐

  1. javaSE练习2——流程控制_2.1

    一.企业发放的奖金根据利润提成.利润低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万之间时,高 ...

  2. WinSock Socket 池

    之前在WinSock2.0 API 中说到,像DisConnectEx 函数这样,它具有回收SOCKET的功能,而像AcceptEx这样的函数,它不会自己在内部创建新的SOCKET,需要外部传入SOC ...

  3. GIS中的坐标系定义与转换

    GIS中的坐标系定义与转换 青岛海洋地质研究所 戴勤奋 2002-3-27 14:22:47 ----------------------------------------------------- ...

  4. FragmentActivity的简单使用

    如图是效果图 当  点击下面 不同 的按钮 进入 不同的界面 其中 要一个 主布局当做容器 , 和3个不同的 布局来对应下面的3个按钮界面 主程序的 代码和布局如下 import android.su ...

  5. mybooklist 日志5.12

    这是一个很悲伤的日子. 今天,我不发朋友圈了.可手头的工作还是要做的,虽然说这是工作,也不能完全算. 在上班的时间做的事情,可以称得上工作,可这不是老板交给我做的事情.国有企业领导很两难,老板你是要辞 ...

  6. Selenium 2.0 以后不在必须Selenium server了

    does not require the Selenium Server to automate the browser.这个句话,解决了我很的疑惑,新版Selenium 可以直接操作浏览器了,还可以 ...

  7. 使用 richtextbox 输出程序运行信息

    private delegate void Refresh_CallBack(Color color,string text); private void ControlsRefresh(Color ...

  8. 缓存溢出Buffer Overflow

    缓存溢出(Buffer overflow),是指在存在缓存溢出安全漏洞的计算机中,攻击者可以用超出常规长度的字符数来填满一个域,通常是内存区地址.在某些情况下,这些过量的字符能够作为“可执行”代码来运 ...

  9. (原创)攻击方式学习之(3) - 缓冲区溢出(Buffer Overflow)

    堆栈溢出 堆栈溢出通常是所有的缓冲区溢出中最容易进行利用的.了解堆栈溢出之前,先了解以下几个概念: 缓冲区 简单说来是一块连续的计算机内存区域,可以保存相同数据类型的多个实例. 堆栈     堆 栈是 ...

  10. Flask入门之模板导入与块宏(六)

    1 模板包含include 主体结构(导入整个模板,直接渲染不可修改) {% include('模板名称') %} {% include('目录/模板名称') %} 功能: 其功能就是将另一个模板加载 ...