什么是跨域?
简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略"。而跨域就是通过某些手段来绕过"同源策略"限制,实现不同服务器之间通信的效果。
具体策略限制情况可看下表:
[表格.png]
什么是JSONP?
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON的一种"使用模式",通过这种模式可以实现数据的跨域获取。
JSONP跨域的原理
在"同源策略"下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。
举个例子,假如需要从服务器(http://justflyhigh.com/test.php?id=123)获取的数据如下:
1
{"id":123, "name":"张三", "age":17}
那么,使用JSONP方式请求(http://justflyhigh.com/test.php?id=123&callback=test)的数据将会是如下:
1
test({"id":123, "name":"张三", "age":17});
当然,如果服务端考虑的更加充分,返回的数据可能如下:
1
try{test({"id":123, "name":"张三", "age":17});}catch(e){ }
这时候我们只要定义一个test(data)函数,并创建一个script标签,使其的src属性为"http://justflyhigh.com/test.php?id=123&callback=test"即可调用返回的数据了。
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function test(data){
console.log(data);
}
var jsonp = document.createElement('script');
jsonp.type = 'text/javascript';
jsonp.src = 'http://justflyhigh.com/demo/test.php?id=123&callback=test';
document.getElementsByTagName('head')[0].appendChild(jsonp);
</script>
示例运行结果:
[结果.png]
分享到:
相关推荐
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
该资源为ASP.NET网站开发技术中使用Ajax进行跨域请求时利用JSONP方案解决浏览器同源策略限制的源码,比较简单,仅供参考
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理...
主要从三方面来通过jsonp来实现ajax跨域问题: 1.javascript方法 2.jquery $.ajax方法 3.jquery $.getJSON方法 不看会后悔的!
主要介绍了深入浅析Jsonp解决ajax跨域问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。接下来通过本文给大家介绍jsonp解决ajax跨域访问问题的思路,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
ajax 跨域 jsonp等方式
1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等
js跨域解决方案
基于ajax方式的跨域请求jsonp的前后台代码
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
基于jQuery的jsonp ajax跨域请求,
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有...如何解决ajax跨域 oJSONP方式 oCORS方式 o代理请求方式 如何分析ajax跨域 ohttp抓包的分析 o一些示例
PHP AJAX JSONP实现跨域请求使用范例
它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 JSONP就像是JSON+Padding一样(Padding这里我们理解为填充),...
php版跨域 ajax+jsonp例子源代码.zip
本文主要是介绍了JSONP跨域是如何实现的,并探讨下JSONP跨域的原理。以及采用JSONP跨域GET请求解决Ajax跨域访问问题,需要的朋友可以参考下