做双十一,需要在主会场页面,嵌入我们产品的JS豆腐块。而这个豆腐块需要调用我们后端的数据接口,涉及跨域访问。

 

方案1:

在js中,我们虽然不能直接用XMLHttpRequest请求不同域上的数据时,但是在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。

jquery的jsonp形式:



服务器端如下:
protected void Page_Load(object sender, EventArgs e)
{
string callback = Request.QueryString["jsoncallback"];

string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

Response.Clear();
Response.Write(result);
Response.End();
}

客户端:
$.ajax({
async: false,
url: "http://192.168.0.5/Web/web1.aspx",
type: "GET",
dataType: 'jsonp',
//jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象.
jsonp: 'jsoncallback',
//要传递的参数,没有传参时,也一定要写上
data: null,
timeout: 5000,
//返回Json类型
contentType: "application/json;utf-8",
//服务器段返回的对象包含name,data属性.
success: function (result) {
alert(result.date);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
实际上,在我们执行这段js时,js向服务器发出了这样一个请求:
http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

而服务器也相应的返回了如下对象:
jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})
此时就实现了跨域范文数据的要求.


 



ie只能通过script的readystatechange属性,其它浏览器是script的load事件。
js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
// callback在此处执行
js.onload = js.onreadystatechange = null;
}
};


方案2 

通过修改document.domain来跨子域



估计不行,因为我们修改不了糯米主页的domain


方案3

使用window.name来进行跨域 (这个主要解决的跳转页面前后数据关联)