不得不说的同源政策：

　　同源策略，它是由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. Struts2 (一)
			
    1 三层架构 2 MVC框架的原理 3 什么是Struts2 Struts2是一个非常优秀的MVC框架,基于Model2设计模式. 是由传统的Struts1和WebWork两个经典的框架发展而来的.  ...
    
			
    2. 
						
  2. 解决ubuntu系统root用户下Chrome无法启动问题
			
    由于ubuntu16.04系统自带的是Firefox浏览器,需要安装Chrome浏览器,但是在root用户下安装后发现,Chrome无法正常启动.安装及问题解决具体如下: 1. ubuntu上Chro ...
    
			
    3. 
						
  3. 查询操作  -- Django从入门到精通系列教程
			
    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...
    
			
    4. 
						
  4. z3 巧解CTF逆向题
			
    z3 巧解逆向题 题目下载链接:http://reversing.kr/download.php?n=7 这次实验的题目为Reversing.kr网站中的一道题目. 题目要求: ReversingKr ...
    
			
    5. 
						
  5. java多线程之内存可见性-synchronized、volatile
			
    1.JMM:Java Memory Model(Java内存模型) 关于synchronized的两条规定: 1.线程解锁前,必须把共享变量的最新值刷新到主内存中 2.线程加锁时,将清空工作内存中共享 ...
    
			
    6. 
						
  6. Python基础篇(三)
			
    元组是序列的一种,与列表的区别是,元组是不能修改的. 元组一般是用圆括号括起来进行定义,如下: >>> (1,2,3)[1:2]     (2,) 如果元组中只有一个元素,元组的表示 ...
    
			
    7. 
						
  7. BZOJ 2024: [SHOI2009] 舞会 [容斥原理 高精度]
			
    题意:和上题基本一样,求至少k对a>b的方案数.不取模!!! 做k+1遍容斥就行了 高精度超强!!!几乎把所有的都用上了 然后,注意有负数,所以容斥的时候正负分别保存然后再一减就行了 这是我省选 ...
    
			
    8. 
						
  8. (python基础)时间辍time、时间元组localtime、时间格式化strftime
			
    可以直接将下方代码运行查看结果:#!/usr/bin/python# coding=utf-8import time # 引入time模块# 时间戳:# 每个时间戳都以自从1970年1月1日午夜(历元 ...
    
			
    9. 
						
  9. iPad Pro 10.5+Apple Pencil之专注文献阅读与笔记效率的App综述
			
    先谈谈我对笔记类App的几点要求--原则是取其精华,略其糟粕,毕竟开发者们还在,App就会不断地被改进: 增删快捷方便:如完美支持Apple Pencil,特定场景下强大的录音功能,单词或短句涂改即可 ...
    
			
    10. 
						
  10. CocosCreator游戏开发---菜鸟学习之路（一）
			
    PS(废话): 辞职后在家好久好久了,久到经济不允许了,接着就准备再次出去找工作了,然而工作哪有那么好找,特别是像我这种菜鸟.而且我还准备转行,准备去做游戏,技能等级接近于0,那工作就更难找了.既然如 ...
    
			
    11.