传统的网页(不使用 AJAX)如果需要更新内容,一 、ajax 跨域调用会有什么问题

2019-11-19 作者:首页   |   浏览(130)

Ajax 跨域如何实现,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 跨域如何实现的相关知识,希望对大家有所帮助!

跨域如何实现,ajax跨域 ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术...

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

JS跨域解决方案

1、同源策略:

       同源策略是浏览器上为安全性考虑实施的非常重要的安全策略

   【1】同源:

    URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源

   【2】同源策略

       浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。(从一个域上加载的脚本不允许访问另外一个域的文档属性)

     例子:

       比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。
        在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容
       另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

2、Ajax跨域

Ajax (XMLHttpRequest)请求受到同源策略的限制。
    Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。
    因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。
    举个例子:
        假设某网站引用了其它站点的javascript,这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。
        或者某网站因为存在漏洞导致XSS注入了javascript脚本,这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点,这样就可以源源不断收集信息。
        如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。
   这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交。(实际上下面提到了CORS已经放宽了限制)

   随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。

【1】JSONP

        JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的,那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。
       JSONP就是利用<script>标签的跨域能力实现跨域数据的访问,请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数,服务器端动态生成的脚本会产生数据,并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时,callback函数就被调用。

第一个站点的测试页面(

 

    <script src="http://localhost:8081/test_data.js">  
        <script>  
            function test_handler(data) {  
                console.log(data);  
            }  
    </script>  

 

服务器端的Javascript脚本(
test_handler('{"data": "something"}');
为了动态实现JSONP请求,可以使用Javascript动态插入<script>标签:

 

    <script type="text/javascript">  
            // this shows dynamic script insertion  
            var script = document.createElement('script');  
            script.setAttribute('src', url);  
            // load the script  
            document.getElementsByTagName('head')[0].appendChild(script);   
    </script>  

 

JSONP协议封装了上述步骤,jQuery中统一实现在AJAX中(其中data type为JSONP):

为了支持JSONP协议,服务器端必须提供特别的支持[2],另外JSONP只支持GET请求。

 

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

1、跨子域实现ajax

【2】Proxy 

    使用代理方式跨域更加直接,因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了
    使用本方法跨域步骤如下:
    (1). 把访问其它域的请求替换为本域的请求
    (2). 本域的请求是服务器端的动态脚本负责转发实际的请求
              各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发,如Apache httpd + mod_proxy。
    Eg.
    为了通过Ajax从
    然后利用Apache Web服务器的Reverse Proxy功能做如下配置:ProxyPass /api

上述博文地址:

=========================================================================

参考博客:

 

 

3、js跨域:

js跨域指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同

下表给出了相对:

图片 1

要解决跨域的问题,我们可以使用以下几种方法:

一、通过jsonp跨域

在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。【总结:Jsonp利用引入不同域上的JS脚本文件来实现跨域】

例:有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是,那么a.html中的代码就可以这样:

图片 2

我们看到获取数据的地址后面还有一个callback参数,按惯例是用这个参数名,但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的,就得按照提供数据的那一方的规定格式来操作了。

因为是当做一个js文件来引入的,所以返回的必须是一个能执行的js文件,所以这个页面的php代码可能是这样的:

图片 3

最终那个页面输出的结果是:

图片 4

所以通过得到的js文件,就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据,这样我们就跨域获得了我们需要的数据。

这样jsonp的原理就很清楚了,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了,而不用特意的手动的书写那些script标签。如果你的页面使用jquery,那么通过它封装的方法就能很方便的来进行jsonp操作了。

图片 5

原理是一样的,只不过我们不需要手动的插入script标签以及定义回调函数。jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

2、通过修改document.domain来跨子域

浏览器都有一个同源策略,其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明,不同的框架之间(父子或同辈),是能够获取到彼此的window对象的,但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外,还有些浏览器比如ie6也可以使用top、parent等少数几个属性),总之,你可以当做是只能获取到一个几乎无用的window对象。比如,有一个页面,它的地址是  , 在这个页面里面有一个iframe,它的src是, 很显然,这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的:

  图片 6

这个时候,document.domain就可以派上用场了,我们只要把 和 这两个页面的document.domain都设成相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

在页面 中设置document.domain:

图片 7

在页面 中也设置document.domain,而且这也是必须的,虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值:

图片 8

这样我们就可以通过js访问到iframe中的各种属性和对象了。

不过如果你想在 页面中通过ajax直接请求 页面,即使你设置了相同的document.domain也还是不行的,所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互,除了使用jsonp的方法外,还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的,然后就是通过我们刚刚讲得修改document.domain的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发送ajax请求,然后收到的数据我们也可以获得了。

3、使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

比如:有一个页面a.html,它里面有这样的代码:

图片 9

再看看b.html页面的代码:

图片 10

a.html页面载入后3秒,跳转到了b.html页面,结果为:

图片 11

我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话,那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然,如果有需要,其中的任何一个页面都可以对window.name的值进行修改。注意,window.name的值只能是字符串的形式,这个字符串的大小最大能允许2M左右甚至更大的一个容量,具体取决于不同的浏览器,但一般是够用了。

上面的例子中,我们用到的页面a.html和b.html是处于同一个域的,但是即使a.html与b.html处于不同的域中,上述结论同样是适用的,这也正是利用window.name进行跨域的原理。

下面就来看一看具体是怎么样通过window.name来跨域获取数据的。还是举例说明。

比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。

data.html页面里的代码很简单,就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码:

图片 12

那么在a.html页面中,我们怎么把data.html页面载入进来呢?显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面,因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色,由iframe去获取data.html的数据,然后a.html再去得到iframe获取到的数据。

充当中间人的iframe想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟a.html页面同一个域才行,不然根据前面讲的同源策略,a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

看下a.html页面的代码:

图片 13

上面的代码只是最简单的原理演示代码,你可以对使用js封装上面的过程,比如动态的创建iframe,动态的注册各种事件等等,当然为了安全,获取完数据后,还可以销毁作为代理的iframe。网上也有很多类似的现成代码,有兴趣的可以去找一下。

通过window.name来进行跨域,就是这样子的。

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法。下面看一个简单的示例,有两个页面

图片 14

 

图片 15

我们运行a页面后得到的结果:

图片 16

我们看到b页面成功的收到了消息。

使用postMessage来跨域传送数据还是比较直观和方便的,但是缺点是IE6、IE7不支持,所以用不用还得根据实际需要来决定。

结语:

除了以上几种方法外,还有flash、在服务器上设置代理页面等跨域方式,这里就不做介绍了。

以上四种方法,可以根据项目的实际情况来进行选择应用,个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。

 

学习博客:

 

coolkissbh.com

要求:实现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", "");
        }
        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调用的各个状态

blog.coolkissbh.com

3,通过jquery的jsonp实现跨域ajax,其实原理跟第二种方法是一样的,支持跨全域和子域
jquery 1.2 后添加了对跨域ajax的调用,也就是$.getJSON 函数
调用方法如下:
 下面是coolkissbh.com下的页面

coolkiss.com

       //使用jsonp实现跨全域
RequestAjax_JSONP = function() {
     var obj = $("#crossSitePage");
     $.getJSON("" + 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)函数。

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。
然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。本文就这个问题,概括了跨域所需要的一些技术。
下面我们分两种情况讨论跨域技术:首先讨论不同子域的跨域技术,然后讨论完全不同域的跨域技术。
(一)不同子域的跨域技术。
我们分两个问题来分别讨论:第一个问题是如何跨不同子域进行JavaScript调用;第二个问题是如何向不同子域提交Ajax请求。
先来解决第一个问题,假设example.com域下有两个不同子域:abc.example.com和def.example.com。现在假设在def.example.com下面有一个页面,里面定义了一个JavaScript函数:
function funcInDef() {
.....
}
我们想在abc.example.com下的某个页面里调用上面的函数。再假设我们要讨论的abc.example.com下面的这个页面是以iframe形式嵌入在def.example.com下面那个页面里的,这样我们可能试图在iframe里做如下调用:
window.top.funcInDef();
好,我们注意到,这个调用是被前面讲到的“同源策略”所禁止的,JavaScript引擎会直接抛出一个异常。
为了实现上述调用,我们可以通过修改两个页面的domain属性的方法做到。例如,我们可以将上面在abc.example.com和def.example.com下的两个页面的顶端都加上如下的JavaScript代码片段:
<script type="text/javascript">
document.domain = "example.com";
</script>
这样,两个页面就变为同域了,前面的调用也可以正常执行了。
这里需要注意的一点是,一个页面的document.domain属性只能设置成一个更顶级的域名(除了一级域名),但不能设置成比当前域名更深层的子域名。例如,abc.example.com的页面只能将它的domain设置成example.com,不能设置成sub.abc.example.com,当然也不能设置成一级域名com。
上面的例子讨论的是两个页面属于iframe嵌套关系的情况,当两个页面是打开与被打开的关系时,原理也完全一样。
下面我们来解决第二个问题:如何向不同子域提交Ajax请求。
通常情况下,我们会用与下面类似的代码来创建一个XMLHttpRequest对象:
factories = [
function() { return new XMLHttpRequest(); },
function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
];
function newRequest() {
for(var i = 0; i < factories.length; i++) {
try{
var factory = factories[i];
return factory();
} catch(e) {}
}
return null;
}
上面的代码中引用ActiveXObject,是为了兼容IE6系列浏览器。每次我们调用newRequest函数,就获得了一个刚刚创建的Ajax对象,然后用这个Ajax对象来发送HTTP请求。例如,下面的代码向abc.example.com发送了一个GET请求:
var request = newRequest();
request.open("GET", "" );
request.send(null);
假设上面的代码包含在一个abc.example.com域名下的页面里,则这个GET请求可以正常发送成功,没有任何问题。然而,如果现在要向def.example.com发送请求,则出现跨域问题,JavaScript引擎抛出异常。
解决的办法是,在def.example.com域下放置一个跨域文件,假设叫crossdomain.html;然后将前面的newRequest函数的定义移到这个跨域文件中;最后像之前修改document.domain值的做法一样,在crossdomain.html文件和abc.example.com域下调用Ajax的页面顶端,都加上:
<script type="text/javascript">
document.domain = "example.com";
</script>
为了使用跨域文件,我们在abc.example.com域下调用Ajax的页面中嵌入一个隐藏的指向跨域文件的iframe,例如:
<iframe name="xd_iframe" style="display:none" src=";
这时abc.example.com域下的页面和跨域文件crossdomain.html都在同一个域(example.com)下,我们可以在abc.example.com域下的页面中去调用crossdomain.html中的newRequest函数:
var request = window.frames["xd_iframe"].newRequest();
这样获得的request对象,就可以向
(二)完全不同域的跨域技术。
如果顶级域名都不相同,例如example1.com和example2.com之间想通过JavaScript在前端通信,则所需要的技术更复杂些。
在讲解不同域的跨域技术之前,我们首先明确一点,下面要讲的技术也同样适用于前面跨不同子域的情况,因为跨不同子域只是跨域问题的一个特例。当然,在恰当的情况下使用恰当的技术,能够保证更优的效率和更高的稳定性。
简言之,根据不同的跨域需求,跨域技术可以归为下面几类:
JSONP跨域GET请求
通过iframe实现跨域
flash跨域HTTP请求
window.postMessage
下面详细介绍各种技术。

  1. JSONP。
    利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax请求的问题。JSONP的工作原理如下所述:
    假设在
    var eleScript= document.createElement("script");
    eleScript.type = "text/javascript";
    eleScript.src = "";
    document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
    当GET请求从
    JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
    JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
  2. 通过iframe实现跨域。
    iframe跨域的方式,功能强于JSONP,它不仅能用来跨域完成HTTP请求,还能在前端跨域实现JavaScript调用。因此,完全不同域的跨域问题,通常采用iframe的方式来解决。
    与JSONP技术通过创建<script>节点向不同的域提交GET请求的工作方式类似,我们也可以通过在
    为了解决这个问题,我们需要在example1.com下放置一个跨域文件,比如路径是

    第一个选择是,它可以在iframe中做一个302跳转,跳转到跨域文件
    另一个选择是,它可以在返回的页面中再嵌入一个iframe,指向跨域文件,同时也是将返回结果经过URL编码之后作为参数缀在跨域文件URL后面。
    在跨域文件中,包含一段JavaScript代码,这段代码完成的功能,是从URL中提取结果参数,经过一定处理后调用原来的
    根据前面的叙述,有了跨域文件之后,我们就可以实现通过iframe方式在不同域之间进行JavaScript调用。这个调用过程可以完全跟HTTP请求无关,例如有些站点可以支持动态地调整在页面中嵌入的第三方iframe的高度,这其实是通过在第三方iframe里面检测自己页面的高度变化,然后通过跨域方式的函数调用将这个变化告知父窗口来完成的。
    既然利用iframe可以实现跨域JavaScript调用,那么跨域提交POST请求等其它类型的HTTP请求就不是难事。例如我们可以跨域调用目标域的JavaScript代码在目标域下提交Ajax请求(GET/POST/etc.),然后将返回的结果再跨域传原来的域。
    使用iframe跨域,优点是功能强大,支持各种浏览器,几乎可以完成任何跨域想做的事情;缺点是实现复杂,要处理很多浏览器兼容问题,并且传输的数据不宜过大,过大了可能会超过浏览器对URL长度的限制,要考虑对数据进行分段传输等。
  3. 利用flash实现跨域HTTP请求
    据称,flash在浏览器中的普及率高达90%以上。
    flash代码和JavaScript代码之间可以互相调用,并且flash的“安全沙箱”机制与JavaScript的安全机制并不尽相同,因此,我们可以利用flash来实现跨域提交HTTP请求(支持GET/POST等)。
    例如,我们用浏览器访问
    这个请求能否被成功发送,取决于在example3.com的根路径下是否放置了一个crossdomain.xml以及这个crossdomain.xml的配置如何。flash的“安全沙箱”会保证:仅当example3.com服务器在根路径下确实放置了crossdomain.xml文件并且在这个文件中配置了允许接受来自example2.com的flash的请求时,这个请求才能真正成功。下面是一个crossdomain.xml文件内容的例子:
    <?xml version="1.0"?>
    <cross-domain-policy>
    <allow-access-from domain="example2.com" />
    </cross-domain-policy>
  4. window.postMessage
    window.postMessage是HTML标准的下一个版本HTML5支持的一个新特性。受当前互联网技术突飞猛进的影响,浏览器跨域通信的需求越来越强烈,HTML标准终于把跨域通信考虑进去了。但目前HTML5仍然只是一个draft。
    window.postMessage是一个安全的实现直接跨域通信的方法。但是目前并不是所有浏览器都能支持,只有Firefox 3、Safari 4和IE8可以支持这个调用。
    使用它向其它窗口发送消息的调用方式大概如下:
    otherWindow.postMessage(message, targetOrigin);
    在接收的窗口,需要设置一个事件处理函数来接收发过来的消息:
    window.addEventListener("message", receiveMessage, false);function receiveMessage(event){ if (event.origin!== "") return;}消息包含三个属性:data、origin(携带发送窗口所在域的真实信息)和source(代表发送窗口的handle)。
    安全性考虑:使用window.postMessage,必需要使用消息的origin和source属性来验证发送者的身份,否则会造成XSS漏洞。
    window.postMessage在功能上同iframe实现的跨域功能同样强大,并且使用简单,效率更高,但缺点是它目前在浏览器兼容方面有待提高。

一 、ajax 跨域调用会有什么问题

总结完所有的跨域方式之后,我们要时刻铭记,虽然跨域技术能给你带来更多的功能,催生出更灵活和更加平台化的产品,但是功能的放开也总是意味着安全的风险。在实现跨域技术的每个步骤和细节,都要时刻在头脑中考虑到对安全带来的影响,避免成为XSS攻击的漏洞。

javascript出于安全方面的考虑,是不允许跨域调用其他页面的对象的。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。没有记错的话前三届D2论坛上每次都有人提这个东西,这里把涉及到跨域的一些问题简单地整理一下:
首先什么是跨域,简单地理解就是因为javascript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:
URL 说明 是否允许通信

同一域名下不同文件夹 允许

同一域名下 允许

同一域名,不同端口 不允许

同一域名,不同协议 不允许

域名和域名对应ip 不允许

主域相同,子域不同 不允许

不同域名 不允许
特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过URL的首部来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
接下来简单地总结一下在“前台”一般处理跨域的办法,后台proxy这种方案牵涉到后台的配置,这里就不阐述了,有兴趣的可以看看YAHOO的这篇文章: ?
JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls。
1、document.domain+iframe的设置

coolkissbh.com下页面使用jquery的$.get调用blog.coolkissbh.com页面

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。具体的做法是可以在

‘f2e.me’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况,如果你异想天开的把script.f2e.me的domian设为alibaba.com那显然是会报错地!代码如下:
www.f2e.me上的a.html
        document.domain = 'f2e.me';
var ifr = document.createElement('iframe');
ifr.src = '';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var x = ifr.contentDocument;
alert(x.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
}
script.f2e.me上的b.html
document.domain = 'f2e.me';
2、动态创建script
虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function,根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考yui的 Get Utility
这里判断script节点加载完毕还是蛮有意思的:ie只能通过script的readystatechange属性,Safari 3.x以上支持的是script的load事件,而firefox和oprea则要通过onload来解决。另外这种办法只能传递js类型的数据,不是很方便。以下是部分判断script加载完毕的方法。
……
// ie支持script的readystatechange属性
// IE supports the readystatechange event for script and css nodes
if (ua.ie) {
n.onreadystatechange = function() {
var rs = this.readyState;
if ("loaded" === rs || "complete" === rs) {
n.onreadystatechange = null;
f(id, url);
}
};
……
// // Safari 3.x supports the load event for script nodes (DOM2)
……
n.addEventListener("load", function() {
f(id, url);
});
……
// FireFox and Opera support onload (but not DOM2 in FF) handlers for
// script nodes.  Opera, but not FF, supports the onload event for link
// nodes.
} else {
n.onload = function() {
f(id, url);
};
}
3、利用iframe和location.hash
这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url:
先是f2e.me下的文件cs1.html文件:
function startRequest(){
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
ifr.src = '';
document.body.appendChild(ifr);
}
function checkHash() {
try {
var data = location.hash ? location.hash.substring(1):'';
if(console.log){
console.log('Now the data is '+data);
}
}catch(e){};
}
setInterval(checkHash, 2000);
space007.com域名下的cs2.html:
(function(){
//模拟一个简单的参数处理操作
switch(location.hash){
case '#paramdo':
callBack();
break;
case '#paramset':
//do something……
break;
}
function callBack(){
try {
            parent.location.hash = 'somedata';
        } catch (e) {
        //ie的安全机制无法修改parent.location.hash,所以要利用一个中间在space007域下的代理iframe
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = '';
        document.body.appendChild(ifrproxy);
        }
}
})();
f2e.me下的域名cs3.html
//因为parent.parent和自身属于同一个域,所以ie下可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
实例请点击  hash实现完全跨域
当然这样做也存在很多缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等……
4、利用flash
这是从YUI3的IO组件中看到的办法,具体可见:
flash这个方案不是很明白,各位自己慢慢琢磨了,呵呵。你可以看在Adobe Developer Connection看到更多的跨域代理文件规范:
ross-Domain Policy File Specifications.

 

HTTP Headers Blacklist.

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,
所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显然开发量比较大,但限制也最少,很多widget开放平台server端(如sohu博客开放平台)其实就么搞的.不在本次讨论范围.
        要讨论的是浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.
真实案例:
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
   async:false,
   url: ,
   type: "GET",
   dataType: 'jsonp',
   jsonp: 'jsoncallback',
   data: qsData,
   timeout: 5000,
   beforeSend: function(){
   //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
   },
   success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
    if(json.actionErrors.length!=0){
           alert(json.actionErrors);
     }
       genDynamicContent(qsData,type,json);
   },
    complete: function(XMLHttpRequest, textStatus){
    $.unblockUI({ fadeOut: 10 });
   },
   error: function(xhr){
    //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
    //请求出错处理
    alert("请求出错(请检查相关度网络状况.)");
   }
});
注意:$.getJSON(" ",
      function(json){
      if(json.属性名==值){
      // 执行代码
            }
        });
这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了.
这样,jquery就会拼装成如下的url get请求

在响应端(),
通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501
然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")";
jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组);
这样就达到了跨域数据交换的目的.
    jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,
我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。
jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数
Jsonp原理:
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)
     可以说jsonp的方式原理上和<script src=") .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.
    注意,jquey是不支持post方式跨域的.
    为什么呢?
    虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.
    也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..
    client端跨域访问的需求看来也引起w3c的注意了,看资料说html5

跨域请求,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?提示框

WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案,

Ajax的应用中,由于安全的问题,浏览器默认是不支持跨域调用的。传统解决的方法,包括:(参考
Local proxy:
Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).
Flash:
Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage.
Script tag:
Difficult to know when the content is available, no standard methodology, can be considered a "security risk".
以上方法都各有缺陷,都不是很好多解决方案。后来出现了一种叫JSON with Padding 的技术,简称 JSONP .(原理参考
      应用JSONP实现Json数据跨域调用,需要服务器端与客户端的合作完成。引用Jquery官方的例子,客户端掉用如下:
$.getJSON("",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });
 
    注意这里调用的地址中jsoncallback=?是关键的所在!其中,符号会被Query自动替换成其他的回调方法的名称,具体过程和原理我们这里不理会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回,比如服务器是JSP,我们会这样做:
 
      ...
      String jsoncallback=request.getParameter("jsoncallback");
      ...
      out.print(jsoncallback+"({/"account/":/"XX/",/"passed/":/"true/",/"error/":/"null/"})");
 
Jquery取得的数据可能如下:
      JQUET0988788({"account":"XX","passed":"true","error":"null"})
 
总结,用JSONP要做两件事:
      1/请求地址加参数:jsoncallback=?
      2/服务器段把jsoncallback的值作为方法名传回来,如JQUET098788(...)

摘自 andy1219111的专栏

跨域实现 前两天xz问我知不知道ajax怎么实现跨域调用,因为没听过这个概念,所以也知道怎么实现。xz说ajax跨域调用有几种方式,一种...

firefox 没报错,但是不会做出请求

 

二、ajax跨域实现方法

1、跨子域实现ajax

本文由美高梅赌堵59599发布于首页,转载请注明出处:传统的网页(不使用 AJAX)如果需要更新内容,一 、ajax 跨域调用会有什么问题

关键词: