jQuery的ajax跨域實現

今天有人問我跨域ajax請求是否能夠發送，以前沒接觸過此類問題，沒答上，後來查了下，如下備忘。

我在本地建了三個站點,並設置了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 沒報錯，可是不會作出請求

 

2、ajax跨域實現方法

一、跨子域實現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下就沒有問題，不知道是什麼緣由。

//跨子域
        var intID;
        document.domain = "coolkissbh.com";
        RequestAjax = function () {
            var obj = $("#crossDomain");

            obj.attr("src", "http://blog.coolkissbh.com/AjaxProxy.aspx?t=" + Math.random());

        }

        handleData = function () {
            if (window.frames['crossDomain'].document.readyState == "complete") {
                alert(window.frames['crossDomain'].ajaxReturnData);
                clearInterval(intID);
            }
        }

        handleData2 = function (data) {
            alert(data);
        }

 

 

2，跨全域實現ajax
要求：實現coolkissbh.com的頁面異步請求coolkiss.com下的頁面
實現方法：上面提到跨全域不能經過設置domain方法來實現。可是可使用script標籤來實現，經過設置script標籤的src屬性爲coolkiss.com域名
下的一個頁面，同時將callback函數傳到該頁面中，例如：
        

//跨全域
        RequestAjax_CrossSite = function () {
            var obj = $("#crossSitePage");
            obj.attr("src", "http://blog.coolkissbh.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)函數。

 

出處：http://www.cnblogs.com/ajunForNet/p/4167848.html