原文：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. Linux进程间通信-匿名管道

    前面我们讲了进程间通信的一种方式,共享内存.下面看一看另一种机制,匿名管道.1.什么是管道管道是一个进程的数据流到另一个进程的通道,即一个进程的数据输出作为另一个进程的数据输入,管道起到了桥梁的作用. ...

  2. Rational Rose 安装及破解方法

    Rational Rose 的安装与破解:  所需材料: 1.“Rational rose 2003.rar”安装包压缩文件                 2.“license.rar”压缩文件(一 ...

  3. noip2011普及组——统计单词数

    统计单词数 时间限制:1 s 内存限制:128MB [问题描述]一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数.现在,请你编程实 ...

  4. 树莓派 2 win 10 IOT

    Setting up Windows 10 for IoT on your Raspberry Pi This week at the BUILD conference in San Francisc ...

  5. Deferred和Promise之间有什么区别呢？

    一个promise就是一个由异步函数返回的对象. deferred对象就是jQuery的回调函数解决方案. 总结 jQuery 的ajax 就是返回一个promise 对象,里面含有done(), f ...

  6. php自动转换pfx到pem和cer(dem格式)到pem

    经常做银行的支付接口,私钥一般都是pfx格式(私钥用来加密生成签名发送报文),公钥是cer格式(公钥用来验证返回报文里的签名).但是php里openssl只能用pem格式,每次转换都要用openssl ...

  7. Servlet Filter 2

    10.Filter常见应用 )统一全站字符编码的过滤器 通过配置参数encoding指明使用何种字符编码,以处理Html Form请求参数的中文问题 案例:编写jsp 输入用户名,在Servlet中获 ...

  8. 【linux】pkill 踢在线用户

    [root@Centos ~]# w 01:52:52 up 18 min,  3 users,  load average: 0.00, 0.02, 0.05USER     TTY      FR ...

  9. 【python】浅谈encode和decode

    对于encode和decode,笔者也是根据自己的理解,有不对的地方还请多多指点. 编码的理解: 1.编码:utf-8,utf-16,gbk,gb2312,gb18030等,编码为了便于理解,可以把它 ...

  10. 剑指offer系列55---最小的k个数

    [题目] 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. *[思路]排序,去除k后的数. package com.exe11 ...