跨域问题jsonp

不得不说的同源政策:

  同源策略,它是由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>

程序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     //自定义的回调函数result16     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方式访问远程服务。

				
时间: 2024-11-10 15:47:27

跨域问题jsonp的相关文章

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

AJAX的跨域与JSONP

AJAX的跨域与JSONP 什么是AJAX的跨域请求 出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的安全是指什么?想想如果没有这个限制的话,黑客可以做些什么).那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请求,这当然就是跨域了,不允许的.不过子域名不同(例如sub.a.com向www.a.com发送请求)甚至是同域名不同端口(例如a.com:80向a.com:8080

jQuery(三) javascript跨域问题(JSONP解决)

加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回来的值,这就是javascript跨域,其实简单点,之前我们做的ajax,都是在同域中访问,现在只是访问的服务器变成了另外的,不是同一台了.仅此而已.但是这样一变,之前的代码就不能用了. 二.解决javascript跨域问题 解决该问题,有很多种方式,我百度了一下,好像这就属于前端的范畴了,所以我决

解决Ajax 跨域问题 - JSONP原理解析

解决Ajax 跨域问题 - JSONP原理解析 为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一不相同就是跨域 同源策略主要为了保证浏览器的安全性 在同源策略下,浏览器**不允许**Ajax跨域获取服务器数据 http://www.example.com/detail.html 跨域请求: http://api.example.com/detail.html 域名不同 http://www.

ajax跨域请求--jsonp实例

ajax请求代码: //区域事件选择配送点 function changeDistrict(value){ if(value == 0){ $('#transport_node').empty(); $('#transport_node').append('<option value="0">请选择</option>'); return; } $('#transport_node').empty(); $('#transport_node').append('&

JS跨域:jsonp、跨域资源共享、iframe+window.name

JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有好多种, 一.跨域资源共享: 也就是设置服务端的header,可以指定哪些域名可以请求,也是最简单的跨域方式(自我感觉),并且可以支持post等等. //指定允许其他域名访问 'Access-Control-Allow-Origin:*'//或指定域 //响应类型 'Access-Control-A

ajax跨域之jsonp

跨域之jsonp jsonp跨域原理 script便签可以跨域,基于这个机制,可以在A域的页面中定义jsonp函数,script标签返回这个函数的调用 如下代码所示A域页面代码 <body> <div>正在获取数据--</div> <script>function jsonp(data) { document.querySelector('div').innerHTML = data; } </script> <!--向B域请求数据--&g

说一说javascript跨域和jsonp

同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据,浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”. 因为同源策略的存在,防止了跨域访问的安全问题,但同时也损失了方便获取资源的便利. 跨域的src属性 世事又非绝对,浏览器还是允许几个元素跨域访问

跨域的jsonP

1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问. 2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式 3.jsonp的get与post 本质是使用script标签的跨域特性. 4.jQuery的写法(一) $.ajax({ async:false, url: , type: "GET", dataType: 'jsonp', jsonp: 'jsoncallback', data: qsData, timeout: 500

跨域 - 自定义 jsonp实现跨域

问题:在现代浏览器中默认是不允许跨域. 办法:通过jsonp实现跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 有两个站点: 1.要获取数据的站点:http://localhost:1326/Default.aspx 1.1页获取页面的json数据 2.要显示获取结果的站点 数据源页面的源码 protectedvoid Page_Load(object sender,