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 没报错，但是不会做出请求

 

二、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下就没有问题，不知道是什么原因。

//跨子域
        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