木子屋
 

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

作者: dnawo

日期: 2013-09-24 02:12 PM

分类: 脚本语言

内容: 由于受安全策略限制，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>

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: Javascri&#112;t跨站读取数据两种解决方法

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms