這次帶給大家Ajax跨域的實作方法，Ajax跨域實現的注意事項有哪些，下面就是實戰案例，一起來看一下。
AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），指一種創建互動式網頁應用程式的網頁開發技術。
AJAX = 非同步 JavaScript和XML（標準通用標記語言的子集）。
AJAX 是一種用於建立快速動態網頁的技術。
透過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
下面步入正題
前兩天xz問我知不知道ajax怎麼實現跨域調用，因為我沒聽過這個概念，所以也知道怎麼實現。 xz說ajax跨域呼叫有幾種方式，一種是iframe的方式，透過設定document.domain來實現，一種則是透過設定jsonp來實現。這兩天查了一下資料，也寫了幾個demo，下面備忘一下。
我在本地建了三個站點,並設定了host檔案模擬跨子網域和跨全局
coolkissbh.com
blog.coolkissbh.com
coolkiss.com
一、ajax 跨域呼叫會有什麼問題
coolkissbh.com下頁使用jquery的$. get調用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跨域實現方法
1、跨子網域實作ajax
要求：實作coolkissbh.com的頁面非同步請求blog.coolkissbh.com下的頁面
實作方法：借助iframe，透過設定iframe的src屬性，嵌入blog.coolkissbh.com下的一個頁面，例如AjaxProxy.aspx,然後由該頁面去請求Ajax
AjaxProxy請求完畢後，透過parent物件把回傳的資料回傳給coolkissbh.com的主頁面。因此，真正的非同步請求還是發生在blog.coolkissbh.com的網域下
注意：透過此方法實現的跨子網域ajax請求，需要在coolkissbh.com的請求頁面以及AjaxProxy.aspx頁面中設定同樣的域名，也就是
document.domain = "coolkissbh.com";
注意：關於設定domain的問題，如果是跨全局，使用上面方法時候，firefox下會提示
Illegal document.domain value" code: "1009的錯誤，因此跨全局只能使用第二種方法
處理傳回的資料：
AjaxProxy.aspx將ajax傳回的數據儲存到一個全域變數中，coolkissbh.com透過setInterval定時去判斷iframe的頁面是否載入完成，如果載入完成，則取得AjaxProxy.aspx的全域變數值。然後再做其它處理。
這裡有個問題：我原來是打算在AjaxProxy.aspx的ajax請求完成後，調用parent的方法，同時將資料返回，但是在IE下，點擊第一次時候就會出現「permission denied”的錯誤,再次點擊就正常了。在firefox下就沒有問題，不知道是什麼原因。
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)函數。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Ajax跨域的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
