ajax跨域的实现
来源:互联网 发布:ui和淘宝美工的区别 编辑:程序博客网 时间:2024/06/06 05:10
一 、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 itscontrol. 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函数传到该页面中,例如:
varobj = $("#crossSitePage");
obj.attr("src", "http://coolkiss.com/CrossSite.jsp?callback=handleData3");
}
handleData3 = function(data) {
$("#ResponseData").html(data);
}
CrossSite.jsp返回一个字符串,将返回的数据回传给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 函数
调用方法如下:
下面是hello.com下的页面
//使用jsonp实现跨全域RequestAjax_JSONP = function() {
var obj = $("#crossSitePage");
$.getJSON("http://coolkiss.com/CrossSite.jsp?callback=?&t=" + Math.random(), function(data) {
//alert(data);
$("#ResponseData").html(data.content);
});
}
world.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 world.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跨域的实现
- ajax跨域的实现
- ajax跨域的实现
- DedeCMS digg Ajax 跨域的实现
- ajax实现跨域访问的问题
- JQuery实现的AJAX跨域问题
- Ajax跨域调用WCF的实现
- AJAX跨域访问的实现
- JSONP--实现跨域的ajax技术
- 简单的实现Ajax跨域请求
- CORS实现AJAX跨域的分析以及Spring实现
- Ajax实现跨域请求
- ajax+springMVC实现跨域
- ajax实现跨域问题
- AJAX实现跨域请求
- ajax实现跨域请求
- ajax jsonp实现跨域
- javascript和ajax的跨域访问实现
- 立体匹配算法_RankTransform
- linux内核链表
- 解决安装Oracle数据库报0x7c92e514内存不能为written的错
- Qt学习之路(1):前言
- 系统权限
- ajax跨域的实现
- PyQt开发讲解
- ios学习笔记(6)UITableView初探
- java中的内部类
- 8.当形参,返回值类型是JavaBean式的复合类,List集合,数组等时:客户端主类
- 关于oracle数据库中job的总结
- 最受欢迎的ASP.NET的CMS下载
- Linux下chkconfig命令
- Hibernate4实战 之 第四部分:关系映射