欢迎光临

木子屋

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

作者: dnawo

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

分类: 脚本语言

内容: 由于受安全策略限制，Javascript不被允许在两个网站(不同域名)之间跨站读取数据，例如a.com读取b.com的数据：
复制内容到剪贴板 程序代码<script type="text/javascript">
.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">
.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);
};
.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">
.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.797 ms

返回

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.797 ms

返回

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.832 ms

返回