浅析跨域的方法之一 JSONP

标签：style   blog   http   io   color   os   使用   java   sp   

概念：

　　什么叫跨域？

　　同源策略：它是由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‘})

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

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

浅析跨域的方法之一 JSONP

标签：style   blog   http   io   color   os   使用   java   sp   

原文地址：http://www.cnblogs.com/dengshaojun/p/4063301.html