浅析跨域的方法之一 JSONP

概念:

  什么叫跨域?

  同源策略:它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。

       所谓同源是指,域名,协议,端口相同。

       同源的脚本才会被执行。

  例如在www.aaa.com/index.aspx里希望获得www.bbb.com/Map.ashx返回的数据,正常的ajax无法获取。

  跨域即绕过同源策略取得数据。

  

  但是凡事都有特例,想想我们常写的
    <img src="http://www.baidu.com/img/bd_logo1.png" />

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

  可以很轻松获取到所需的东西,这不就是跨域的一种方式吗?

  而jsonp重点就是借助script标签来完成跨域了。

原理:

  1、www.aaa.com/index.aspx下的head里写:

  <script type=‘text/javascript‘>
    function Show(name){
      alert("I‘m " + name);
    }
  </script>
  <script type=‘text/javascript‘ src="www.bbb.com/test.js"></script>

  2、www.bbb.com/test.js里面写:

  

  Show("jerry");

  这样运行www.aaa.com/index.aspx时,会弹出"I‘m jerry"没什么疑问。

正是运用这个原理,我们可以做更多的事情,获取跨域数据,执行回调函数。

例1:

  在第一个页面head中写如下几句:

<script type="text/javascript">
    function myFn(jsonObj){
        alert("welcome, " + jsonObj.name);
    }
</script>
<script type="text/javascript" src="www.bbb.com/Map.ashx?callback=myFn"></script>

  在www.bbb.com/Map.ashx中写下:

string callback=context.Request.QueryString["callback"];
string json="{‘name‘:‘jerry‘}";  //服务端处理后要传回的数据
context.Response.Write(callback + "(" + json + ")");  //结果为myFn({‘name‘:‘jerry‘})

  其实很好理解,首先定义了函数myFn,然后跨域的script标签通过QueryString传了一个叫做callback的参数,值为myFn。

  这时服务端获取到其callback参数的值,并通过字符串拼接的方式输出 myFn({‘name‘:‘jerry‘})

  这句话直接在第一个页面中运行了。这样不仅跨域得到了数据,还在获得数据之后执行了回调函数。

  值得注意的是第一个页面中地址栏传值的参数名要和服务端获取的参数名相同。

  

时间: 2024-11-13 06:45:59

浅析跨域的方法之一 JSONP的相关文章

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

跨域通信方法总结

本文总结了5种较常见的跨域通信方法,如下: 1)jsonp 2)CORS(Cross OriginResource Sharing,跨源资源共享) 3)主域相同可以设置document.domain 4)利用window.name实现跨域 5)利用window.name实现跨域 jsonp 讲解jsonp之前先看一个例子:假设域A.com上有一个页面a.html,代码如下: var dosomething= function(data){ alert('我是A.com域上的页面,可以被跨域的re

jQuery跨域问题解决方法

跨域访问时web前端开发者经常遇到的问题,那么什么是跨域呢? 跨域的慨念: 只要协议,域名,端口任何一个不同,都被当作是不同的域.例如在A网站中,我们希望通过AJAX获得B网站中特定的内容,此时A网站和B位置不在同一个域,那么就出现了跨域访问问题.可以理解为两个域名之间不能跨国域名来发送请求或是请求数据,否则就是不安全的. 解决跨域访问的方法: 1.代理: 2.在服务器端设置相应的响应头: 3.JSONP. 接下来,我详细的介绍一下jQuery中的JSONP是如何解决跨域访问的. JSONP(J

跨域解决方法

跨域解决方法: 1.利用后端 ①设置头信息 ②后端代理 2.flash代理 3.jsonp 在js中找到一个代理 ①能够访问网络资源,并且不会有跨域问题 ②获取到资源数据可以给js使用 var oScript = document.createElement('script'); oScript.src = 'data.php'; document.body.appendChild(oScript); IE解决$.ajax() 跨域 $.support.cors = true;

浏览器拦截跨域请求处理方法

解决跨域的解决办法有多种,比如jsonp,或者apache 或者nigix里面配置,或者后端的php或者java中配置 cross orgion. 在网上搜了一圈,发现处理方式都差不多,但是我们得清楚这些到底怎么用. 先看下这段代码: <?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-poli

ajax 跨域解决方法

最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax本身是不支持跨域的,这是由于javascript的同源策略所导致.但是我们可以通过其他方法来解决ajax的跨域问题. 1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法 $.ajax({ type : "get", async:false, url : "http://w

js实现跨域的方法

由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别:    JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件).如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval).    方法一:利用script标签请求(<script src="htt

AJAX四种跨域处理方法

同源策略 同源策略 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制.具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名.同一主机名.同一端口号下的数据.因此,请求不同协议名.不同主机名.不同端口号下的文件,违背同源策略,无法请求成果,需要进行跨域处理.同源策略限制的具体行为:(1)Cookie.LocalStorage.IndexDB无法读取:(2)DOM无法获得:(3)AJAX请求不能发送. 什么是跨域? 两个页面之

Ajax跨域通信方法?

1. Jsonp.document.domain+iframe.window.name.window.postMessage.服务器上设置代理页面. 1. Jsonp(json with padding) 是 Json 的一种"使用模式",可以让网页从别的网站获取资料,即跨域读取数据,Jsonp的原理是动态插入script标签. 2. 为什么我们从不同的域(网站)访问数据需要一个特殊的技术(jsonp)呢?这是因为同源策略.协议,域名,端口相同,它是一种安全协议,指一段脚本只能读取来自