原文：http://blog.csdn.net/wangxiaohu__/article/details/7294842

(一):动态脚本注入的方法.
即在页面中动态生成<script>脚本标签,另其src指向其它域的js文件(即是src属性为不同域的URL). （一般用于不同域之间的跨域） 

var scriptElement = document.createElement('script');

scriptElement.src = 'URL';  ##此url可以随便，即便是带有GET的查询字符串也行，只要返回的是可以执行的javascript表达式就行。

document.getElementsByTagName('head')[0].appendChild(scriptElement);

通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档

script标签的 src属性 不一定必须是一个存在的js文件，也可以是一个http的url，只要这个http url返回的是一个“text/javascript类型”的响应就可以了。据我测试，只要返回的是 "text/？？？"类型都行，例如"text/javascript"、"text/html"、"text/json"、"application/json"等可以执行的javascript文本都可以。例如：即便是在php设置http响应头部为 header("Content-type: application/json"); 依旧可以！

例：

  1. <script type="text/javascript">
  2. var script = document.createElement("script");
  3. function ajaxCross(){
  4. script.type = "text/javascript";
  5. script.src = "http://xipang.hfutonline.net/public/test";
  6. }
  7. window.onload = function(){
  8. ajaxCross();
  9. document.getElementsByTagName("head")[0].appendChild(script);
  10. }
  11. function getAnswer(){
  12. console.log(date);   //突然之间来了一个date变量，原来这个变量是定义在上面script.src文件中的一个全局变量
  13. }
  14. script.onload = function() {
  15. getAnswer();
  16. }

通过请求服务器端script.src 返回的数据是“var date = {}”的形式，所以后面就可以使用date变量了;

缺点:

不能设置请求头信息，只能用src方式去请求；

参数传递也只能使用GET方式；

不能设置请求的超时处理或重试,就算失败了也不一定知道；

必须等数据都已经返回才能访问他们,而且不能访问请求头信息,也不能把整个响应消息当作字符串来处理；

还有一点就是响应消息作为脚本标签的源码,必须是可执行的JavaScript代码,不能使用其它任何格式的数据，例如如下函数来处理：

function jsonCallback(jsonString){                //jsonCallback进行数据封装

var  data  =  eval('(' +jsonString +')')

//数据处理

}

优点:因为响应消息作为js执行,所以速度非常快

单向跨域
JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的JavaScript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

用服务器端的XmlHttpRequest代理实现跨域访问

我们不能在浏览器端直接使用AJAX来跨域访问资源，但是在服务器端是没有这种跨域安全限制的。所以，我们只需要让服务器端帮我们完成“跨域访问”的工作，然后在浏览器端用AJAX获取服务器端“跨域访问”的结果就可以了。这就是所谓的在服务器端创建一个XmlHttpRequest代理，通过这个代理来访问其他域名下的资源。将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台。这样做的好处是：无论访问的是文档，还是js文件都可以实现跨域。

页面上javascript脚本：

  1. <script type="text/javascript">
  2. Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址
  3. var callback =
  4. {
  5. success: function(res) { alert(res.responseText); },
  6. failure: function(res) { alert('failure');},
  7. argument:{}
  8. }
  9. YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
  10. </script>

完成域A服务端的Proxy程序(这里假定是一个servlet)，伪码如下：

  1. Public class Proxy extends …….{
  2. ..doGet(……..){
  3. HttpClient client=……;
  4. GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//访问域B的链接
  5. int statusCode = client.executeMethod(get);
  6. if (statusCode != HttpStatus.SC_OK) {
  7. byte[] responseBody = get.getResponseBody();
  8. String res=new String(responseBody);
  9. Httpresponse.getWriter().write(res);//将数据返回给域A
  10. }
  11. }
  12. }

基于iframe实现跨域（一般用于父域、子域之间的跨域）

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数

页面一：1.html

  1. <html>
  2. <head>
  3. <script>
  4. document.domain = "xx.com";
  5. function aa(){
  6. alert("p");
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <iframe src="http://localhost:8080/CmsUI/2.html" id="i">
  12. </iframe>
  13. <script>
  14. document.getElementById('i').onload = function(){
  15. var d = document.getElementById('i').contentWindow;
  16. d.a();
  17. };
  18. </script>
  19. </body>
  20. </html>

页面二：2.html

  1. <html>
  2. <head>
  3. <script>
  4. document.domain = "xx.com";
  5. function a(){
  6. alert("c");
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

也可以用iframe实现不同域之间的跨域，不过比较麻烦

当两个域不同时，如果想相互调用，那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史，你在前进和后退时就需要处理，非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里，a通过JS修改iframe的hash值，b里面做一个监听（因为JS只能修改hash，数据是否改变只能由b自己来判断），检测到b的hash值被修改了，得到修改的值，经过处理返回a需要的值，再来修改a的hash值（这个地方要注意，如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无法取得数据的，同样报没有权限的错误，需要a把这个传过来，所以也比较麻烦），同样a里面也要做监听，如果hash变化的话就取得返回的数据，再做相应的处理。

(二):“Firefox 3”中跨域XHR,是基于W3C跨站点请求。通过设置Access-Control-Allow-Origin头部(自定义的HTTP头部),远程资源有权决定自身是否可以被远程浏览器访问。据我测试，IE（11）、firefox、google 3大浏览器都支持这个头域实现跨域，是基于XMLHTTPRequest这个ajax对象实现，而在早起的版本IE8却是基于XDomainRequest来实现的，所以同样的ajax跨域代码在IE8中不能得到预期结果。参看:
http://www.blueidea.com/tech/web/2010/8049.asp

http://mutongwu.iteye.com/blog/1637183

实现方法如下

Access-Control-Allow-Origin:http://www.wrox.com  ，即通过指定哪个域可以访问该资源来实现,此头部信息就指定了只有www.wrox.com域才有访问权限

Access-Control-Allow-Origin:*  ，表明可以允许所有请求访问当前资源

Origin头部包含请求页面的头部（协议,域名,端口）,如果服务器确定请求被通过,会发送一个 Access-Control-Allow-Origin头部 作为响应发送请求的同一个源,若为一个公共资源则返回 Access-Control-Allow-Origin:*

请求另一个域的资源:使用标准的XHR对象,并为open()方法传入一个绝对URL

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = funtion(){

if(xhr.readyState == 4){

......

}

};

xhr.open('get','http://somewhere-else.com/page',true);

xhr.send(null);

缺点:

不能使用setRequestHeader()设置自定义头部

不会发送也不会接收cookie

getAllResponseHeaders()方法只能返回空字符串

优点:

跨域的XHR对象允许访问statues和statusText属性

(三)：IE8中的XDomainRequest对象 实现跨域

XDR对象使用方法与XHR的类似，首先创建一个XDomainRequest的实例，调用open(),再调用send(),但open()只接受两个参数，即请求的类型和URL，请求返回之后会触发load事件，响应的数据会保存在responseText中，响应失败就会触发error事件，可以调用abort()来终止请求，例：

var xdr = new XDomainRequest();

xdr.onload = function(){alert(xdr.responseText);

xdr.onerror = function(){alert("an error occured.")}

xdr.timeout = 1000;  //1秒过后会触发timeout事件

xdr.ontimeout = function(){alert("request took too long")}

     xdr.open("get","http://www.somewhere-else.com/page/");     

xdr.send(null);

注：

被请求的资源可以根据它认为合适的任意数据（用户代理，来源页面）来决定是否设置Access-Control-Allow-Origin头部

cookie不会随请求发送，也不会随响应返回

只能设置请求头部信息中的Content-Type字段

不能访问响应头部信息

只支持GET和POST请求

只能访问Access-Control-Allow-Origin头部字段设置为*的资源

所有请求都是异步的，不能创建同步请求

接受响应之后，只能访问响应的原始文本，没办法确定响应的状态码

总结Ajax跨域调用问题的更多相关文章

  1. jquery ajax跨域调用

    客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...

  2. 以短链服务为例，探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  3. AJAX跨域调用相关知识-CORS和JSONP（引）

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  4. AJAX跨域调用ASP.NET MVC或者WebAPI服务

    关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...

  5. 支持ajax跨域调用的WCF搭建示例

    支持ajax 跨域调用的WCF搭建 1.新建一个"ASP.NET空Web应用程序"项目. 2.新建一个“WCF服务(支持ajax)”. 3.修改WCFAjaxService.svc ...

  6. AJAX跨域调用ASP.NET MVC的问题及解决方案

    AJAX跨域调用ASP.NET MVC的问题及解决方案 问题描述: 解决方法: 只需要在web.config中添加如下标为红色的内容即可: <system.webServer> <h ...

  7. 调用ajax 跨域调用接口

    //ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ ...

  8. AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

    问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web ...

  9. js Ajax跨域调用JSON并赋值全局变量

    //跨域调用JSON <script type="text/javascript"> function _callback(obj) { alert(obj); } j ...

  10. 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案

      作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模 ...

随机推荐

  1. 006. C#使用WMI操作远程计算机

    1. 使用WMI CIM studio 查看\root\CIMV2 所有可使用的表/字段(类/属性) , 点击下载 WMI CIM studio 2. 安装完成后打开VMI CIM studio

  2. Oracle数据库——半期测验

    一.使用system用户登录SQL*PLUS,使用命令将scott用户解锁,并将scott用户的密码修改为: t_你的学号后三位(例如:t_165).然后,以scott用户连接数据库. 1. 使用sy ...

  3. 【转】JavaScript实际应用:父子页面交互

    转自:http://blog.csdn.net/xinyueyuli/article/details/509893 最近项目开发中需要子窗口和父窗口交互的内容,基本上无非就是把子窗口的信息传递给父窗口 ...

  4. nodejs 任务调度使用

    使用的模块 node-schedule的使用 例子: 1:确定时间 var schedule = require("node-schedule");console.log(&quo ...

  5. CentOS 6.4下PXE+Kickstart无人值守安装操作系统 转

    一.简介 1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持 ...

  6. Pop Sequence

    题目来源:PTA02-线性结构3 Pop Sequence   (25分) Question:Given a stack which can keep M numbers at most. Push ...

  7. rsync配置中的auth error，一个隐秘的错误

    我们都知道rsync是linux自带的功能强大的文件同步协议. 为了做免密码文件同步,所以,有多种配置.但是种种配置中,可能会遇到一个让人很纠结的问题,那就是安全认证错误的问题! 这个配置,是基于rs ...

  8. Neutron分析（1）——简介

    Neutron是OpenStack核心项目之一,提供云计算环境下的虚拟网络功能.Neutron的功能日益强大,并在Horizon面板中已经 集成该模块.作为Neutron的核心开发者之一,个人觉得Ne ...

  9. 使用laravel的Eloquent模型获取数据库的指定列

    使用laravel的Eloquent模型获取数据库的指定列   使用Laravel的ORM——Eloquent时,时常遇到的一个操作是取模型中的其中一些属性,对应的就是在数据库中取表的特定列. 如果使 ...

  10. 高性能MySQL --- 读书笔记(1) - 2016/8/2

    此书不但帮助MySQL初学者提高使用技巧,更为有经验的MySQL DBA指出了开发高性能MySQL应用的途径.全书包括14章,内容覆盖MySQL系统架构.设计应用技巧.SQL语句优化.服务器性能调优. ...