Chris Cheung

最新推荐文章于 2025-08-23 15:57:12 发布

转载最新推荐文章于 2025-08-23 15:57:12 发布 · 291 阅读

文章标签：

#callback #ajax #jsonp #function #jquery #iframe

javaee 专栏收录该内容

787 篇文章

订阅专栏

======================================================
注：本文源代码点此下载
======================================================

前两天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)函数。

源代码

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/