今天有人问我跨域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

jQuery的ajax跨域实现的更多相关文章

  1. JQuery的Ajax跨域请求的

    JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...

  2. PHP+JQuery实现ajax跨域

    jQuery实现ajax跨域 1.dataType:'jsonp'2.type: 'get'3.把要传的参数以url方式传出去  url:'http://gameapi.feiliu.com/lqzg ...

  3. JQuery实现ajax跨域

    AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

  4. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  5. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  6. [转载]JQuery的Ajax跨域请求的解决方案

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  7. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  8. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  9. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

随机推荐

  1. 20145219 《Java程序设计》第04周学习总结

    20145219 <Java程序设计>第04周学习总结 教材学习内容总结 继承 继承就是避免多个类间重复定义共同行为. 面向对象中,子类继承父类,就是把程序中相同的代码部分提升为父类. R ...

  2. NOIP Mayan游戏

    描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定的步数内消 ...

  3. spring data redis的使用jar包版本冲突问题

    spring data redis 与spring 版本之间会有不兼容,要求spring 最低版本为4.2.6,这里推荐的一个版本 spring 4.3.2  spring data redis 1. ...

  4. 制作基于Buildbot的自动化测试系统Docker镜像

    Buildbot in Docker 前言 最近使用Buildbot做了一个自动测试的框架,为了部署方便,可以把测试框架做成Docker镜像,方便部署.这里记录下过程,供大家参考. 项目介绍 项目是一 ...

  5. Makefile文件应用——complicated项目

    学习资料 本文主要参考资料:驾驭Makefile(李云).pdf Complicated项目 需求: (1)object文件放到objs目录下 (2)可执行文件放到exes目录下 (3)增加头文件依赖 ...

  6. Winform与WPF异步修改控件属性

    Winform方式:     if (this.InvokeRequired)             {                 this.Invoke(                   ...

  7. 绝对布局absoluteLayout

    绝对布局absoluteLayout 一.简介 二.实例 绝对布局我们是指定的横纵坐标,所以可以这样直接拖 绝对布局实际中用的少

  8. Div层弹出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. shell read

    #!/bin/bash read -p "Enter your account:" acct #提示用户输入用户名read -s -p "Enter your passw ...

  10. Confluence 6 测试电子邮件设置

    一个 Confluence 的管理员可以通过下面的步骤测试电子邮件服务器的配置: 按照上面的步骤中描述得方法设置一个电子邮件服务器. 单击 发送测试邮件(Send Test Email)来检查你设置的 ...