不得不说的同源政策：

　　同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

　这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？没错，我们现在可以进入正题，来了解下什么是JSONP了。

1 <!DOCTYPE html5>
2 <html>
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");

我们回上去再看看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数据填充进回调函数。




　　一般情况下，我们希望这个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>





上面的例子是最简单的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服务调用了，是不是很简单，下面我们来了解下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方式访问远程服务。


												


											
跨域问题jsonp的更多相关文章
	

    
						
  1. jQuery(三) javascript跨域问题(JSONP解决)
		
    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
    
		
    2. 
						
  2. 浏览器同源策略，跨域请求jsonp
		
    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
    
		
    3. 
						
  3. 跨域Ajax -- jsonp和cors
		
    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...
    
		
    4. 
						
  4. jquery跨域解决方案JSONP
		
    1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...
    
		
    5. 
						
  5. Ajax跨域：Jsonp实例--百度搜索框下拉提示
		
    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
    
		
    6. 
						
  6. JS跨域：jsonp、跨域资源共享、iframe+window.name
		
    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
    
		
    7. 
						
  7. 【记录】ajax跨域问题jsonp正确的使用方式
		
    最近遇到ajax请求跨域问题,解决方案用jsonp,现记录如下: //跨域请求jsonp封装 function doJsonPostCallBack(type, url, data,async, ca ...
    
		
    8. 
						
  8. cors跨域和jsonp劫持漏洞   和    同源策略和跨域请求解决方案
		
    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
    
		
    9. 
						
  9. 前端跨域解决方案: JSONP的通俗解说和实践
		
     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
    
		
    10. 
						
  10. 跨域的jsonP
		
    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. keytool 错误：java.to.FileNotFoundException:
			
    老是报如题的错误: 后来才知道是因为当前的目录下没有写的权限,所以需要指定一个路径来存放android.key: keytool -genkey -alias android.key -keyalg  ...
    
			
    2. 
						
  2. 如何用Python爬虫实现百度图片自动下载？
			
    Github:https://github.com/nnngu/LearningNotes 制作爬虫的步骤 制作一个爬虫一般分以下几个步骤: 分析需求 分析网页源代码,配合开发者工具 编写正则表达式或 ...
    
			
    3. 
						
  3. python 调用 R，使用rpy2
			
    python 与 R 是当今数据分析的两大主流语言.作为一个统计系的学生,我最早接触的是R,后来才接触的python.python是通用编程语言,科学计算.数据分析是其重要的组成部分,但并非全部:而R ...
    
			
    4. 
						
  4. 一个特殊的List去重问题的解决方案
			
    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7039842.html 场景描述:公司新活动,需要在活动页面显示指定利率的四种投资项目,并且 ...
    
			
    5. 
						
  5. dl在不同浏览器下显示不同
			
    dl在chrome浏览器和在火狐浏览器下的默认样式是不一样的,解决方法将dl换成ol或ul样式就正常了.
    
			
    6. 
						
  6. Redis .Net 基本类型使用之南
			
    前言 最近需要使用redis,看了一些文档,也在博客园里面看了很多文章,这里就记录下Redis常用类型的操作. String string是redis基本类型,一般通过Get,Set 命令进行操作,这 ...
    
			
    7. 
						
  7. iOS-strong和copy【详细解读】
			
    strong和copy是常用到的修饰符,那么什么时候用strong,什么时候用copy,先上一段代码再说(以下代码直接在ViewController中写): 先定义两个数组 ///strong @pr ...
    
			
    8. 
						
  8. 解决AspNet Zero Core 5.0.1无法运行的问题
			
    最近在研究AspNet Zero Core 5.0.1时发现VS点击调试后就自动退出了,从ABP QQ群里得知作者加入了licensecode校验.经过一个周左右断断续续的折腾,算是破解了吧.原本想把 ...
    
			
    9. 
						
  9. jQuery源码逐行分析学习01(jQuery的框架结构简化)
			
    最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...
    
			
    10. 
						
  10. BZOJ 1115: [POI2009]石子游戏Kam [阶梯NIM]
			
    传送门 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏.问先手是否必胜 ...
    
			
    11.