<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）
暂无评论。