`
yangyangmilan
  • 浏览: 29856 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jsonp 解决跨域问题

阅读更多

跨域问题

当一个页面向其他域名发送ajax请求时,取不到数据。

这是同源策略所决定的。

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

 

解决方法:JSONP

JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

 

简单原理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

     <title>test</title>

     <script type="text/javascript" src="test.js"></script>

 </head>

 <body>

 </body>

 </html>

我们发现<script type="text/javascript" src="test.js"></script>是不受跨域限制的。

test.js换成 http://www.acb.com/test.js 也能返回数据,只要这个js真实存在。

所以只要把  http://www.acb.com/test.js 替换成了 http://xxx.html 、 http://xxx.jsp 、 http://xxx.php 、 http://xxx.action

都能返回数据,当然返回的数据要符合一定的格式。

 

返回数据格式

callback(jsonObject)

callback 是 回调的 js 方法名

jsonObject是 符合json格式数据对象,用于作为回调方法的参数使用。

例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

     <title>test</title>

     <script type="text/javascript">

function methodA(data){

alert(data.message);

}

     </script>

     <script type="text/javascript" src="http://www.abc.com/test.action"></script>

 </head>

 <body>

 </body>

 </html>

 

http://www.abc.com/test.action 返回的数据格式必须

methodA({

   "message":"someMessage";

})

相当于返回一段 js 代码,直接触发methodA方法。

 

其他说明

1.有时候其他告诉别人必须回调哪个方法,可以在<script type="text/javascript" src="http://www.abc.com/test.action?callback=methodA"></script>

通过callback=methodA 告诉对方返回的数据的时候 把 methodA 包在最外面。

2.当自己不确定对方返回的json格式时候,可以用

for(var i in data){  

        alert(data[i]);  

}  

循环json在查看到底返回了什么数据

3.JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

4.jquery提供了功能更为完善的jsonp请求方法。

 

 

分享到:
评论

相关推荐

    JSONP三种方式解决跨域问题

    1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    跨域访问解决方法-jsonp

    总结,JSONP是一种简单且广泛使用的跨域解决方案,尤其适用于那些不支持CORS的旧版本浏览器。然而,考虑到安全性和灵活性,CORS在现代Web开发中已成为更推荐的选择。理解JSONP的工作原理和使用方法对于任何Web开发者...

    jsonp解决跨域.docx

    JsonP 是一种解决跨域请求的技术,它可以跨域请求数据,解决了 JavaScript 的跨域问题。JsonP 的优点是可以跨域请求数据,减少服务器的负载,但是它也存在安全问题和服务器端实现的限制。JsonP 的使用场景非常广泛,...

    jsonp解决跨域_js_方案_web_跨域_

    标题中的“jsonp解决跨域”指的是JavaScript对象标记...随着技术的发展,CORS和其他现代技术逐渐成为主流,提供了更强大、更安全的跨域解决方案。然而,理解和掌握jsonp的原理对理解Web开发中的跨域问题仍然很有帮助。

    使用jsonp完美解决跨域问题

    这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:’JSONP’。 代码如下: $.ajax({  url: “http://…….”,  type: ‘GET’,  dataType: ‘JSONP’,//here  success:...

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    JSONP(JSON with Padding)是一种解决跨域请求的方法,即在客户端通过 script 标签请求服务器端的数据,然后服务器端将数据以 JSON 格式返回,并在返回数据中包含一个回调函数,以便客户端可以将数据处理。...

    解决ajax跨域问题

    通过上述介绍可以看出,JSONP是一种简单而有效的跨域解决方案,尤其适用于只支持GET请求的场景。然而,JSONP也有一些局限性,比如不支持POST请求,且安全性相对较低。随着技术的发展,现在更多地推荐使用CORS(Cross...

    php版 解决跨域问题CORS ajax+get,post+jsonp例子源代码.zip

    然而,在某些场景下,如API调用,我们需要突破这一限制,这就需要跨域解决方案。 PHP作为服务器端语言,可以通过设置HTTP响应头来允许特定的源进行跨域请求。例如,我们可以使用`header()`函数添加`Access-Control-...

    使用Jsonp方式跨域获取json

    综上所述,JSONP是解决跨域问题的一种传统手段,虽然现在有CORS等更安全的解决方案,但在某些情况下,尤其是需要兼容老版本浏览器或者无需POST请求时,JSONP仍然是一个实用的选择。在实际项目中,了解和掌握JSONP的...

    jsonp跨域解决源代码

    总结,JSONP是一种有效的跨域解决方案,尤其适用于API接口的数据获取。通过客户端定义回调函数和服务器端动态生成包裹JSON数据的JavaScript代码,可以绕过同源策略的限制。然而,考虑到其局限性和安全性,对于更复杂...

    解决跨域封装的jsonp.js文件

    解决跨域封装的jsonp

    html通过 ajax jsonp跨域请求接收和传送数据

    AJAX+CORS适用于现代浏览器,提供了更灵活、安全的跨域解决方案,但需要服务器端的支持。而JSONP则适用于所有支持`&lt;script&gt;`标签的浏览器,包括一些较旧版本,但只支持GET请求,且安全性较低,因为服务器可以注入...

    跨域访问禁止以及使用JSONP实现跨域的示例

    在Web开发中,跨域访问是一个常见的问题,它源于浏览器的同源策略(Same-Origin Policy)。同源策略是为了保障安全,防止恶意网站通过脚本访问并操控其他网站的数据。但这种策略也限制了Web应用程序获取不同源的数据...

    springboot+jsonp解决前端跨域问题小结

    总结来说,Spring Boot结合JSONP解决跨域问题的关键点在于理解同源策略和JSONP的工作原理。在后端合理配置JSONP请求处理,并在前端正确设置请求参数,即可实现跨域请求数据的获取。这一技术实现简单,兼容性好,但也...

    jsonp和跨域1

    1.3.3 jQuery-JSONP跨域 jQuery提供了JSONP的支持,通过$.ajax方法的dataType参数设置为"jsonp",可以轻松发起JSONP请求。jQuery会自动生成一个唯一的回调函数名,并将其作为参数传递给服务器,服务器返回的数据应以...

    javascript插件 解决双向跨域问题

    解决跨域问题的常见方法包括JSONP(JSON with Padding)、CORS(Cross-Origin Resource Sharing)和代理服务器等。JSONP适用于GET请求,但不支持POST等其他HTTP方法,也不提供安全性。CORS是现代浏览器支持的一种更...

    浅析JSONP解决Ajax跨域访问问题的思路详解

    JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。接下来通过本文给大家介绍jsonp解决ajax跨域访问问题的思路,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧

    java版 解决跨域问题CORS ajax+jsonp例子源代码.zip

    这个压缩包包含了一些相关的资源和讨论,帮助开发者理解和实践这两种跨域解决方案。 描述中的“java web版 跨域 ajax+jsonp例子源代码.zip”进一步强调这是基于Java Web的示例,用于解决JavaScript通过AJAX进行跨域...

    完美解决iframe跨域问题

    但这种方法需要服务器端的配合,对于纯客户端的iframe跨域解决方案不适用。 **三、window.name跨域通信详解** 1. **原理**:`window.name`不受同源策略限制,可以在任何页面中读写,即使页面被刷新或导航至其他URL...

Global site tag (gtag.js) - Google Analytics