Ajax 跨域如何?_AJAX相關

ajax簡介

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。

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)函數。

以上所述是小編給大家介紹的Ajax 跨域如何?的相關知識，希望對大家有所協助！