`
Reverie夜
  • 浏览: 21371 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类
最新评论

同源策略、跨域访问&JSONP

    博客分类:
  • WEB
 
阅读更多

       JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。(概念来自百度)

 

jsonp格式:

 

callback({"title":"content"})
 
使用方法:
<script type="text/javascript">
    function callback(result, methodName) {
        console.log(result);
    }
</script>
<script type="text/javascript" src="http://www.night.com/reverie?jsonp=callback"></script>
 

 

JQuery 的使用方法:

 

 

<script>
$(document).ready(function(){
    $.getJSON("http://night.com/reverie?callback=?",
        function(data){
            console.log(data);
    });
});
</script>
 

 

$.ajax 的使用方法:

 

<script>
    $.ajax({
        dataType:'jsonp',
        data:'',
        jsonp:'callback',
        url:'http://www.night.com/reverie',
        success:function(data){
    	    console.log(data);
        }
    });
</script>
 

 

 

 

 

分享到:
评论

相关推荐

    跨域访问解决方法-jsonp

    跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    ### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中,跨域问题是一项常见挑战,尤其是在涉及不同协议(如HTTP与HTTPS)的数据交互时。本文将深入探讨如何利用JSONP(JSON with Padding)技术来实现HTTP与...

    Ajax + Servlet 跨域访问(Jsonp技术)

    **Ajax + Servlet 跨域访问 (Jsonp技术)** 在Web开发中,浏览器的同源策略(Same-origin policy)限制了JavaScript对不同源(协议、域名、端口)的资源进行请求,这在一定程度上保障了安全性。然而,随着Web应用的...

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...

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

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

    同源策略和跨域解决方案.docx

    同源策略和跨域解决方案 同源策略是浏览器的一个安全功能,用来限制不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源...但是,同源策略也限制了跨域访问的自由,因此我们需要使用其他方法来解决跨域问题。

    ajax跨域CORS方案 JSONP跨域请求方案.zip

    它的原理是利用HTML的`&lt;script&gt;`标签不受同源策略限制的特性,通过动态创建`&lt;script&gt;`标签来加载服务器返回的JavaScript代码,这个代码通常是一个函数调用,参数是请求的数据。 1. **JSONP的工作流程**: - 客户端...

    JSONP实现Ajax跨域访问

    由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据的应用带来了一定的限制。JSONP作为一种解决方案,可以通过简单的脚本标签注入方式实现跨域数据的获取。 ####...

    JSONP解决跨域问题

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

    js跨域解决方案

    1. **JSONP(JSON with Padding)**:JSONP是一种早期的跨域解决方案,它依赖于`&lt;script&gt;`标签不受同源策略限制的特点。通过动态创建`&lt;script&gt;`标签,设置其`src`属性为提供服务的服务器接口,并由服务器返回一个包裹...

    JavaScript同源策略和跨域访问实例详解

    总结来说,JavaScript的同源策略限制了不同源之间的交互,但通过JSONP、CORS等技术,开发者可以安全地实现跨域访问,以满足现代Web应用的需求。在实现这些技术时,务必注意浏览器兼容性和安全措施,确保数据传输的...

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

    服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定的源进行跨域访问。客户端的AJAX请求设置`xhr.open('GET', url, true)`,然后发送请求。 2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于...

    jsonp跨域解决源代码

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了HTML的`&lt;script&gt;`标签可以不受同源策略限制的特性,实现JavaScript从不同源获取数据。在本例中,我们将探讨如何通过JSONP来解决JavaScript的跨域问题,...

    Ajax跨域访问(ASP.NET Web)

    Ajax跨域访问是Web开发中常见的需求,可以通过JSONP或CORS来实现。在ASP.NET Web中,可以方便地配置服务器以支持这些跨域解决方案。同时,需要注意安全问题,防止恶意网站利用跨域访问获取或篡改数据。

    ajax跨域访问

    本文介绍了AJAX跨域访问的基本概念、同源策略以及JSONP实现跨域访问的具体步骤。通过上述示例,我们可以了解到如何在实际项目中应用JSONP来解决跨域问题。虽然JSONP能够有效解决跨域问题,但它也存在一定的局限性,...

    js解决跨域访问问题

    跨域访问问题是Web开发中常见的技术难题之一,通过理解同源策略的原理和掌握JSONP、CORS等技术,可以有效地解决这一问题。开发人员应根据实际需求选择最合适的解决方案,确保应用程序能够稳定、高效地运行。

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...

Global site tag (gtag.js) - Google Analytics