ajax跨域的实现

ajax跨域调用有两种方式，一种是iframe的方式，通过设置document.domain来实现，一种则是通过设置jsonp来实现。

 

一 、ajax 跨域调用的问题

本地建了三个站点,并设置了host文件模拟跨子域和跨全域

hello.com

blog.hello.com

world.com

 

hello.com下页面使用jquery的$.get调用blog.hello.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


要求：实现hello.com的页面 异步请求 blog.hello.com下的页面
实现方法：借助iframe，通过设置iframe的src属性，嵌入blog.hello.com下的一个页面，比如AjaxProxy.jsp,然后由该页面去请求Ajax
              AjaxProxy请求完毕后，通过parent对象把返回的数据回传给hello.com的主页面。因此，真正的异步请求还是发生在blog.hello.com的域名下

注意：通过这种方法实现的跨子域ajax请求，需要在hello.com的请求页面以及AjaxProxy.jsp页面中设置同样的域名，也就是document.domain = "coolkissbh.com";

注意：关于设置domain的问题，如果是跨全域，使用上面方法时候，firefox下会提示
        Illegal document.domain value" code: "1009的错误，

因此跨全域只能使用第二种方法处理返回的数据：

AjaxProxy.jsp将ajax返回的数据保存到一个全局变量中，hello.com通过setInterval定时去判断iframe的页面是否加载完成,如果加载完成，则获取AjaxProxy.jsp的全局变量值。然后再做其它处理。

     这里有个问题：我原来是打算在AjaxProxy.jsp的ajax请求完成后，调用parent的方法，同时将数据返回，但是在IE下，点击第一次时候
就会出现“permission denied”的错误,再次点击就正常了。在firefox下就没有问题，不知道是什么原因。

2，跨全域实现ajax
要求：实现hello.com的页面异步请求world.com下的页面
实现方法：上面提到跨全域不能通过设置domain方法来实现。但是可以使用script标签来实现，通过设置script标签的src属性为world.com域名
下的一个页面，同时将callback函数传到该页面中，例如：

Js代码 复制代码 收藏代码
  1. RequestAjax_CrossSite = function() {   
  2.             varobj = $("#crossSitePage");   
  3.             obj.attr("src", "http://coolkiss.com/CrossSite.jsp?callback=handleData3");   
  4.         }    
  5.         handleData3 = function(data) {   
  6.             $("#ResponseData").html(data);   
  7.         }  
[js] view plaincopyprint?
  1. RequestAjax_CrossSite = function() {  
  2.             varobj = $("#crossSitePage");  
  3.             obj.attr("src", "http://coolkiss.com/CrossSite.jsp?callback=handleData3");  
  4.         }   
  5.         handleData3 = function(data) {  
  6.             $("#ResponseData").html(data);  
  7.         }  

 

CrossSite.jsp返回一个字符串，将返回的数据回传给callback，执行回调函数，实现ajax，例如：

Js代码 复制代码 收藏代码
  1. Response.Clear();   
  2. Response.Write(string.Format("{0}('{1}')", Request["callback"], responseData));   
  3. Response.End();  
[js] view plaincopyprint?
  1. Response.Clear();  
  2. Response.Write(string.Format("{0}('{1}')", Request["callback"], responseData));  
  3. Response.End();  

 

注意：这种方法同样可以用于处理跨子域ajax的问题，但是就无法像jquery那样获取ajax调用的各个状态

 

3、通过jquery的jsonp实现跨域ajax，其实原理跟第二种方法是一样的，支持跨全域和子域

jquery 1.2 后添加了对跨域ajax的调用，也就是$.getJSON 函数
调用方法如下:

 下面是hello.com下的页面 

Js代码 复制代码 收藏代码
  1. //使用jsonp实现跨全域   
  2. RequestAjax_JSONP = function() {   
  3.      var obj = $("#crossSitePage");   
  4.      $.getJSON("http://coolkiss.com/CrossSite.jsp?callback=?&t=" + Math.random(), function(data) {   
  5.            //alert(data);   
  6.            $("#ResponseData").html(data.content);   
  7.         });   
  8.      }  
[js] view plaincopyprint?
  1. //使用jsonp实现跨全域  
  2. RequestAjax_JSONP = function() {  
  3.      var obj = $("#crossSitePage");  
  4.      $.getJSON("http://coolkiss.com/CrossSite.jsp?callback=?&t=" + Math.random(), function(data) {  
  5.            //alert(data);  
  6.            $("#ResponseData").html(data.content);  
  7.         });  
  8.      }  

 

world.com后台处理代码，将一个json对象传递给callback：

Js代码 复制代码 收藏代码
  1. public partial class CrossSite : System.Web.UI.Page   
  2. {   
  3.     protected void Page_Load(object sender, EventArgs e)   
  4.     {   
  5.         if (!IsPostBack)   
  6.         {   
  7.             LoadData_JSONP();   
  8.         }   
  9.     }   
  10.   
  11.     protected void LoadData_JSONP()   
  12.     {   
  13.         string responseData = "{content:\"hello world from world.com\"}";   
  14.         if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))   
  15.         {   
  16.             Response.Clear();   
  17.             Response.Write(string.Format("{0}({1})", Request["callback"], responseData));   
  18.             Response.End();   
  19.         }   
  20.     }   
  21. }  
[js] view plaincopyprint?
  1. public partial class CrossSite : System.Web.UI.Page  
  2. {  
  3.     protected void Page_Load(object sender, EventArgs e)  
  4.     {  
  5.         if (!IsPostBack)  
  6.         {  
  7.             LoadData_JSONP();  
  8.         }  
  9.     }  
  10.   
  11.     protected void LoadData_JSONP()  
  12.     {  
  13.         string responseData = "{content:\"hello world from world.com\"}";  
  14.         if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))  
  15.         {  
  16.             Response.Clear();  
  17.             Response.Write(string.Format("{0}({1})", Request["callback"], responseData));  
  18.             Response.End();  
  19.         }  
  20.     }  
  21. }  

 

callback=?  其中？会自动替换为function(data)函数。

posted @ 2012-06-29 10:41  猫200  阅读(482)  评论(0)  编辑  收藏  举报