这篇文章主要介绍了Ajax 跨域如何实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

ajax简介

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

下面步入正题

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

以上所述是小编给大家介绍的Ajax 跨域如何实现的相关知识,希望对大家有所帮助!

最新资讯
对新中考政策不当解读!学而思被杭州教育局通报批评

对新中考政策不当解读

责令杭州学而思培训学校对培训班次命名情况立即进行整
包围华为?美国没想到的后果是……

包围华为?美国没想到的

遭到美国等封杀的华为,将在今年超越苹果,跃升全球手机市
消息称苹果考虑彻底放弃自动驾驶汽车项目

消息称苹果考虑彻底放

投资研究公司Lynx Equity Strategies分析师贾哈拉·尼
精灵宝可梦Go开发商获2.45亿美元投资 估值40亿美元

精灵宝可梦Go开发商获

《精灵宝可梦GO》(Pokémon GO)游戏开发商Niantic今日
小米股价近腰斩背后的逻辑

小米股价近腰斩背后的

员工期权解禁、企业战略和组织相关变量、行业处在手机
格力电器:预计2018年营收2000亿元-2010亿元

格力电器:预计2018年营

格力电器发布公告称,预计2018年营业总收入2000亿元-201
最新文章
解决ajax异步请求返回的是字符串问题

解决ajax异步请求返回

这篇文章主要介绍了解决ajax异步请求返回的是字符串问
Ajax引擎 ajax请求步骤详细代码

Ajax引擎 ajax请求步

这篇文章主要为大家详细介绍了Ajax引擎 ajax请求步骤
Ajax实现表格中信息不刷新页面进行更新数据

Ajax实现表格中信息不

这篇文章主要为大家详细介绍了Ajax实现表格中的信息不
ajax实现页面的局部加载

ajax实现页面的局部加

这篇文章主要为大家详细介绍了ajax实现页面的局部加载
爬取今日头条Ajax请求

爬取今日头条Ajax请求

今天小编就为大家分享一篇关于爬取今日头条Ajax请求的
$.ajax中contentType: “application/json” 的用法详解

$.ajax中contentType:

这篇文章主要介绍了$.ajax中contentType: “applicati