写在前面
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。
什么是跨域?
简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。
具体策略限制情况可看下表:
URL | 说明 | 允许通信 |
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://127.0.0.100/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 不允许 |
http://www.a.com/a.js http://www.b.com/b.js |
不同域名 | 不允许 |
什么是JSONP?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。
JSONP跨域的原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。
举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
- {"id":123,"name":"张三","age":17}
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
- foo({"id":123,"name":"张三","age":17});
当然,如果服务端考虑得更加充分,返回的数据可能如下:
- try{foo({"id":123,"name":"张三","age":17});}catch(e){}
以PHP为例,服务端的代码应该如下:
- $json = json_encode(array("id"=>123,"name"=>"张三","age"=>17));
- if(isset($_GET['callback'])){
- $json ='try{'. $_GET['callback'].'('. $json .')}catch(e){}';
- }
- echo $json;
这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo:
- <scripttype="text/javascript"src="http://www.a.com/user?id=123?callback=foo"></script>
便可以使用foo函数来调用返回的数据了。
在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp':
- $.ajax({
- dataType:'jsonp',
- url:'http://www.a.com/user?id=123',
- success:function(data){
- //处理data数据
- }
- });
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
- $.getJSON('http://www.a.com/user?id=123&callback=?',function(data){
- //处理data数据
- });
也可以简单地使用getScript方法:
- //此时也可以在函数外定义foo方法
- function foo(data){
- //处理data数据
- }
- $.getScript('http://www.a.com/user?id=123&callback=foo');
JSONP的应用
JSONP在开放API中可以起到非常重要的作用,开放API一般是运用于开发者的应用上,而这些应用往往是在开发者的服务器上而并非在新浪微博的服务器上,因此跨域请求数据成为前端开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。
相关推荐
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...
在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
**Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...
### JSONP实现Ajax跨域访问 #### 一、引言 JSONP(JSON with Padding)是一种用于解决跨域数据访问的技术。由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据...
JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术,尤其在jQuery中得到了广泛的应用。由于浏览器的同源策略限制,JavaScript通常无法在不同源之间进行Ajax请求。但JSONP巧妙地利用了HTML中`...
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...
本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域问题。 首先,理解JSONP的基本概念。JSONP是一种非官方的数据交换格式,它的核心思想是利用HTML中的`<script>`标签不受同源策略...
根据提供的文件信息,本文将详细介绍如何通过JSONP等方法解决Ajax跨域问题。 #### Ajax与同源策略 首先,我们需要了解为什么会出现跨域问题。浏览器出于安全考虑,实施了一项名为“同源策略”的安全机制。同源策略...
JSONP(JSON with Padding)是一种解决跨域请求的方法,即在客户端通过 script 标签请求服务器端的数据,然后服务器端将数据以 JSON 格式返回,并在返回数据中包含一个回调函数,以便客户端可以将数据处理。...
总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更安全,但需要服务器端的配合。在实际开发中,根据项目需求和浏览器兼容性选择...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...
为了解决这个问题,开发者通常采用JSONP(JSON with Padding)技术。本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一...
总之,JSONP是一种解决跨域问题的常用技术,尤其适用于旧版浏览器,因为它们不支持CORS(跨源资源共享)。不过,相比CORS,JSONP有一些限制,比如只支持GET请求,且无法处理HTTP错误状态。尽管如此,JSONP仍然是前端...
【AJAX跨域解决办法】 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下更新部分网页的技术。然而,由于浏览器的同源策略限制,AJAX请求通常只能发送到与当前页面同一源的...
JQuery的跨域解决方案主要依赖于JSONP(JSON with Padding)技术。JSONP是一种绕过同源策略的方式,它利用HTML中的`<script>`标签没有同源策略限制的特点。当jQuery使用`dataType: 'jsonp'`时,它实际上是在做以下几...
在解决跨域问题时,我们可以利用jQuery的`jsonp`模式。JSONP(JSON with Padding)是一种绕过同源策略的方法,它利用`<script>`标签可以跨域加载脚本的特性。 在描述中提到的"jquery ajax json 跨域不解释,代码很...
ajax跨域实例 Ajax 跨域操作是指在不同的域名、协议或端口之间进行 Ajax 请求的操作。由于浏览器的同源策略限制,跨域操作需要在前端和服务端指定共同规则,以便实现安全的数据交换。在本文中,我们将讨论两个 ...
ajax跨域请求,jquery.jsonp插件
### AJAX跨域问题详解 #### 一、引言 在Web开发中,由于浏览器的安全策略限制...随着现代Web技术的发展,CORS(跨源资源共享)等新的跨域通信方案也被广泛采用,开发者可以根据实际情况选择最合适的方案来解决问题。