跨域

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_30429201

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/justSmile2/p/9720292.html

本文介绍了四种常见的跨域请求处理方式：使用Flash插件、通过同源域名下的代理服务器转发、利用JSONP进行GET请求和使用CORS实现跨域资源共享。每种方法都有其适用场景和限制。

方式：

一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。

二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：

'/proxy?url=http://www.sina.com.cn'

代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。

三 JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：

<script src="http://example.com/abc.js"></script>

JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：foo('data');
如果在页面中先准备好foo()函数，然后给页面动态加一个<script>节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。

<html>

<head>
    <meta charset='utf-8' />
</head>
<script>
    // refreshPrice 对应就好
function refreshPrice(data){
    var p=document.getElementById("test-jsonp");
    p.innerHTML="当前价格："+
    data['0000001'].name+':'+data['0000001'].price
}

function getPrice(){    
    var price=document.createElement('script');
    var head=document.getElementsByTagName("head")[0];
    price.src= 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
    head.appendChild(price);
}
</script>


<body>
    <p id="test-jsonp">here</p>
    <button type='button' οnclick='getPrice()'>refresh</button>
</body>

</html>