Ajax 中怎么實現(xiàn)跨域

Ajax 中怎么實現(xiàn)跨域，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

一 、ajax 跨域調(diào)用會有什么問題

coolkissbh.com下頁面使用jquery的$.get調(diào)用blog.coolkissbh.com頁面

跨域請求，IE 7和8下報 access denied錯誤
IE 6.0 則彈出 this page is accessing information that is not under its control. this poses a security risk.do you want to continue?提示框

firefox 沒報錯，但是不會做出請求

二、ajax跨域?qū)崿F(xiàn)方法

1、跨子域?qū)崿F(xiàn)ajax

要求：實現(xiàn)coolkissbh.com的頁面 異步請求 blog.coolkissbh.com下的頁面

實現(xiàn)方法：借助iframe，通過設(shè)置iframe的src屬性，嵌入blog.coolkissbh.com下的一個頁面，比如AjaxProxy.aspx,然后由該頁面去請求Ajax

AjaxProxy請求完畢后，通過parent對象把返回的數(shù)據(jù)回傳給coolkissbh.com的主頁面。因此，真正的異步請求還是發(fā)生在blog.coolkissbh.com的域名下

注意：通過這種方法實現(xiàn)的跨子域ajax請求，需要在coolkissbh.com的請求頁面以及AjaxProxy.aspx頁面中設(shè)置同樣的域名，也就是
document.domain = "coolkissbh.com";

注意：關(guān)于設(shè)置domain的問題，如果是跨全域，使用上面方法時候，firefox下會提示
Illegal document.domain value" code: "1009的錯誤，因此跨全域只能使用第二種方法

處理返回的數(shù)據(jù)：

AjaxProxy.aspx將ajax返回的數(shù)據(jù)保存到一個全局變量中，coolkissbh.com通過setInterval定時去判斷iframe的頁面是否加載完成，如果加載完成，則獲取AjaxProxy.aspx的全局變量值。然后再做其它處理。

這里有個問題：我原來是打算在AjaxProxy.aspx的ajax請求完成后，調(diào)用parent的方法，同時將數(shù)據(jù)返回，但是在IE下，點擊第一次時候就會出現(xiàn)“permission denied”的錯誤,再次點擊就正常了。在firefox下就沒有問題，不知道是什么原因。

2，跨全域?qū)崿F(xiàn)ajax

要求：實現(xiàn)coolkissbh.com的頁面異步請求coolkiss.com下的頁面

實現(xiàn)方法：上面提到跨全域不能通過設(shè)置domain方法來實現(xiàn)。但是可以使用script標(biāo)簽來實現(xiàn)，通過設(shè)置script標(biāo)簽的src屬性為coolkiss.com域名下的一個頁面，同時將callback函數(shù)傳到該頁面中，例如：

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

CrossSite.aspx返回一個字符串，將返回的數(shù)據(jù)回傳給callback，執(zhí)行回調(diào)函數(shù)，實現(xiàn)ajax，例如：

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

注意：這種方法同樣可以用于處理跨子域ajax的問題，但是就無法像jquery那樣獲取ajax調(diào)用的各個狀態(tài)

3，通過jquery的jsonp實現(xiàn)跨域ajax，其實原理跟第二種方法是一樣的，支持跨全域和子域

jquery 1.2 后添加了對跨域ajax的調(diào)用，也就是$.getJSON 函數(shù)

調(diào)用方法如下:

下面是coolkissbh.com下的頁面

//使用jsonp實現(xiàn)跨全域
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();
}
}
}

關(guān)于Ajax 中怎么實現(xiàn)跨域問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。