脚本语言 订阅所有【脚本语言】的日志

Javascript跨站读取数据两种解决方法

编辑:dnawo 日期:2013-09-24

字体大小: 小 中 大
由于受安全策略限制，Javascript不被允许在两个网站(不同域名)之间跨站读取数据，例如a.com读取b.com的数据：

复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            dataType: "json",
            url: "http://www.b.com/data.ashx",
            data: "t=" + (new Date()).getTime(),
            success: function (data) {
                alert(data.msg);
            }
        });
    });
</script>



Javascript跨站读取数据两种解决方法

①.代理法

我们知道，Javascript客户端脚本不被允许跨站读取数据，而服务器端程序可以抓取任一网站页面的数据，所以，可以做一个代理页面，Javascript通过代理页面跨站读取数据。

www.a.com/index.htm：
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            dataType: "json",
            url: "Proxy.ashx",
            data: "encode=utf-8&method=get&data=&url=" + encodeURIComponent("http://www.b.com/data.ashx") + "&t=" + (new Date()).getTime(),
            success: function (data) {
                alert(data.msg);
            }
        });
    });
</script>

www.a.com/proxy.ashx：
复制内容到剪贴板程序代码 程序代码
public void ProcessRequest(HttpContext context)
{
    //1.接收参数
    HttpRequest Request = context.Request;
    HttpResponse Response = context.Response;
    string url = Request.QueryString["url"];
    string data = Request.QueryString["data"];
    string encode = Request.QueryString["encode"];
    string method = Request.QueryString["method"];

    //2.抓取并输出
    if (method.ToLower() == "post")
    {
        Response.Write(HttpHelper.Post(url, data, Encoding.GetEncoding(encode)));
    }
    else
    {
        Response.Write(HttpHelper.Get(url, data, Encoding.GetEncoding(encode)));
    }
}

www.b.com/data.ashx：
复制内容到剪贴板程序代码 程序代码
public void ProcessRequest(HttpContext context)
{
    context.Response.Write("{\"msg\":\"2013-09-24\"}");
}



②.<script>标签法

不知你是否留意，我们经常用<script>调用其他网站上的脚本来使用，例如：

复制内容到剪贴板程序代码 程序代码
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

也就是说，使用<script>调用的脚本不受安全策略限制，这也就为跨站读取数据创造了条件：

www.a.com/index.htm：
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
    todo = function (data) {
        alert(data.msg);
    };
</script>
<script type="text/javascript" src="http://www.b.com/data.ashx?callback=todo"></script>

www.b.com/data.ashx：
复制内容到剪贴板程序代码 程序代码
public void ProcessRequest(HttpContext context)
{
    context.Response.Write(context.Request.QueryString["callback"] + "({\"msg\":\"2013-09-24\"})");
}



jQuery封装了这种调用模式，jQuery的实现方式(注意dataType=jsonp)：

复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
    todo = function (data) {
        alert(data.msg);
    };

    $(document).ready(function () {
        $.ajax({
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "todo",
            url: "http://www.b.com/data.ashx",
            data: "t=" + (new Date()).getTime()
        });
    });
</script>

或

复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "todo",
            url: "http://www.b.com/data.ashx",
            data: "t=" + (new Date()).getTime(),
            success: function (data) {
                alert(data.msg);
            }
        });
    });
</script>


上一篇: 福州小米授权维修网点信联科技有限公司福州客服中心
下一篇: jQuery文件上传插件Uploadify使用示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 3890
发表评论
请登录后再发表评论！