不得不说的同源政策：

　　同源策略，它是由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. android 页面的切换
			
    startActivity后加:IntentHelper.jump(mContext, MyBalanceActivity.class);activity.overridePendingTransit ...
    
			
    2. 
						
  2. python-networkx学习（1）
			
    介绍: networkx是python的一个库,它为图的数据结构提供算法.生成器以及画图工具.近日在使用ryu进行最短路径获取,可以通过该库来简化工作量.该库采用函数方式进行调用相应的api,其参数类 ...
    
			
    3. 
						
  3. 童攀TP5企业网站实战笔记
			
    $this->assign('data',$data) ---恢复内容开始--- return view();   载入视图 {include file='public/head'} 包含文件  ...
    
			
    4. 
						
  4. cobbler自动化安装系统
			
    笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 在很久很久以前,使用kickstart实现自动化安装的时候,我一直认为装系统是多么高大上的活,直到cobbler的 ...
    
			
    5. 
						
  5. JS小练习1
			
    要求: 一.定义"改变颜色"的函数 二.定义"改变宽高"的函数 三.定义"隐藏内容"的函数 四.定义"显示内容"的函数  ...
    
			
    6. 
						
  6. python交互模式下tab键自动补全
			
    import rlcompleter,readline readline.parse_and_bind('tab:complete')
    
			
    7. 
						
  7. [Bug] 解决 Sql Server 数据库死锁问题
			
    SELECT request_session_id spid, OBJECT_NAME(resource_associated_entity_id) tableName FROM sys.dm_tra ...
    
			
    8. 
						
  8. github上最好的开源MMORPG - stendhal
			
    Stendhal is a fully fledged multiplayer online adventures game (MORPG). It is completely open source ...
    
			
    9. 
						
  9. Hadoop学习笔记三
			
    一.设置HDFS不进行权限检查 默认的HDFS上的文件类似于Linux中的文件,是有权限的.例如test用户创建的文件,root用户如果没有写权限,则不能进行删除. 有2种办法进行修改,修改文件的权限 ...
    
			
    10. 
						
  10. BZOJ 2809: [Apio2012]dispatching [斜堆]
			
    题意:主席树做法见上一题 我曾发过誓再也不写左偏树(期末考试前一天下午5个小时没写出棘手的操作) 于是我来写斜堆啦 从叶子往根合并,维护斜堆就行了 题目连拓扑序都给你了... 说一下斜堆的操作: 合并 ...
    
			
    11.