Ajax 跨域如何实现

2019-09-14 06:59:04王冬梅

2,跨全域实现ajax

要求:实现coolkissbh.com的页面异步请求coolkiss.com下的页面

实现方法:上面提到跨全域不能通过设置domain方法来实现。但是可以使用script标签来实现,通过设置script标签的src属性为coolkiss.com域名下的一个页面,同时将callback函数传到该页面中,例如:

RequestAjax_CrossSite = function() {
var obj = $("#crossSitePage");
obj.attr("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3");
}
handleData3 = function(data) {
$("#ResponseData").html(data);
}

CrossSite.aspx返回一个字符串,将返回的数据回传给callback,执行回调函数,实现ajax,例如:

Response.Clear();
Response.Write(string.Format("{0}('{1}')", Request["callback"], responseData));
Response.End();

注意:这种方法同样可以用于处理跨子域ajax的问题,但是就无法像jquery那样获取ajax调用的各个状态

3,通过jquery的jsonp实现跨域ajax,其实原理跟第二种方法是一样的,支持跨全域和子域

jquery 1.2 后添加了对跨域ajax的调用,也就是$.getJSON 函数

调用方法如下:

下面是coolkissbh.com下的页面

//使用jsonp实现跨全域
RequestAjax_JSONP = function() {
var obj = $("#crossSitePage");
$.getJSON("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + Math.random(), function(data) {
//alert(data);
$("#ResponseData").html(data.content);
});
}

coolkiss.com后台处理代码,将一个json对象传递给callback:

public partial class CrossSite : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData_JSONP();
}
}
protected void LoadData_JSONP()
{
string responseData = "{content:"hello world from coolkiss.com"}";
if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))
{
Response.Clear();
Response.Write(string.Format("{0}({1})", Request["callback"], responseData));
Response.End();
}
}
}

callback=? 其中?会自动替换为function(data)函数。

以上所述是小编给大家介绍的Ajax 跨域如何实现的相关知识,希望对大家有所帮助!