AJAXCDR：利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP PO

　[文章+部分代码 作者：张宴 本文版本：v1.0 最后修改：2009.03.09 转载请注明原文链接：http://blog.s135.com/ajaxcdr/]

　　最近的一个项目中，需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口（因为数据较大，需要HTTP POST方式提交），并获取PHP接口的返回值，在页面无刷新、无跳转的情况下，更新div标签内的内容。

　　浏览器出于安全考虑，是不允许JavaScript代码进行跨域操作。JavaScript 和 AJAX 跨域访问分为两大类，一是本域和子域的交互，二是本域和其他域的交互。

　　一、本域和子域的交互： 和 blog.s135.com
　　二、本域和其他域的交互：blog.s135.com 和 api.bz

　　本域和子域的交互，可以通过iframe设置两个域名document.domain = "s135.com"，实现统一s135.com域下的跨域访问。

　　本域和其他域的交互，可以通过iframe、代理、JS创建动态脚本等几种方法来实现，。

　 　iframe、JS创建动态脚本这两种方法，需要开发者能控制两个域，两端都要编写相应的代码，非常麻烦。在本域服务器上用PHP写个代理中转程序，让 本域PHP程序去读取远程其他域的数据再返回给自己，是常用的方法。但是，在本域“前端是CDN或Squid缓存服务器，后端才是PHP应用程序服务器” 的系统架构下，穿透CDN或Squid去访问不能被缓存的PHP代理中转程序，效率是很低的。

---

　　国外有人尝试用 Flash 做 JavaScript 和 AJAX 跨域访问中转，无疑是一个好方法。JavaScript 将数据提交给本域下的 Flash，通过 Flash 中转去访问其他域的接口，条件只需要其他域的根目录下有一个crossdomain.xml文件，文件中设置允许所有域名或允许本域访问即可。很多网站的 API域名都提供了crossdomain.xml文件。

　　例如：
　　1、新浪博客的crossdomain.xml文件（http://blog.sina.com.cn/crossdomain.xml）设置了允许所有域名访问；
　　2、饭否API的crossdomain.xml文件（）设置了允许所有域名访问；
　　3、校内网API的crossdomain.xml文件（）设置了允许所有域名访问；
　　4、优酷网的crossdomain.xml文件（）设置了允许所有域名访问；
　　5、土豆网的crossdomain.xml文件（）设置了允许所有域名访问；

　　6、逍遥视频的crossdomain.xml文件（）设置了只允许*.xoyo.com域名访问；
　　7、网易的crossdomain.xml文件（）设置了只允许tech.163.com、sports.163.com等几个域名访问。

---

　　本人在“Cross-domain AJAX using Flash”的基础上，增加了对表单进行智能处理的功能，封装了一个JavaScript包：AJAXCDR。通过 AJAXCDR，即可轻松地解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求，支持IE、Firefox、谷歌Chrome等多种浏览器。

　　AJAXCDR 拥有两个文件：ajaxcdr.js 和 ajaxcdr.swf，AJAXCDR 拥有一个 JavaScript 函数 AjaxCrossDomainRequest() 和一个全局变量 AjaxCrossDomainResponse。

　　一、AJAXCDR 下载：
　　http://blog.s135.com/demo/ajaxcdr/ajaxcdr-1.0.zip　　

下载文件

点击这里下载文件

　　注意：请编辑ajaxcdr.js，查找“/demo/ajaxcdr/ajaxcdr.swf”，将这段Flash文件路径换成您的路径。


　　二、AJAXCDR 函数说明：
　　1、JavaScript函数：
　　AjaxCrossDomainRequest(URL, Method, FormName, CallBack);

　　参数说明：
　　URL：需要访问的URL地址，相当于表单的action=的值。
　　Method：方法，本函数支持POST和GET方法，相当于表单的method=的值。
　　FormName：表单名称，相当于表单的name=的值。
　　CallBack：回调函数，请求完成后，回调用户的一个函数，用户可以在该函数内对返回值进行处理。

　　2、JavaScript全局变量：
　　AjaxCrossDomainResponse
　 　当用户调用AjaxCrossDomainRequest()函数完成 HTTP POST/GET 请求后，该函数会把服务器端返回的数据写入到AjaxCrossDomainResponse变量中，您可以通过 AjaxCrossDomainResponse变量获取返回值。


　　三、AJAXCDR 应用实例：
　　1、实例一（简单演示）：
　　演示地址： http://blog.s135.com/demo/ajaxcdr/demo1.html

"cross_domain_demo">
"title" type="text" value="测试数据">


"javascript:AjaxCrossDomainRequest('', 'POST', 'cross_domain_demo', 'mycallback()');">提交

"text/javascript">
function mycallback(){
    alert(AjaxCrossDomainResponse);
}


"text/javascript" src="/demo/ajaxcdr/ajaxcdr.js">

<form name="cross_domain_demo">   <input name="title" type="text" value="测试数据"> </form>   <a href="javascript:AjaxCrossDomainRequest('', 'POST', 'cross_domain_demo', 'mycallback()');">提交</a> <script type="text/javascript">   function mycallback(){       alert(AjaxCrossDomainResponse);   }   </script>   <script type="text/javascript" src="/demo/ajaxcdr/ajaxcdr.js"></script>　　echo.php 源代码为：
　　crossdomain.xml 文件为：


　　2、实例二（复杂表单演示）：
　　演示地址： http://blog.s135.com/demo/ajaxcdr/demo2.html

  
    
  
  
    
    
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
    

Ajax 跨域 HTTP POST/GET 访问请求演示（鼠标右键查看HTML源代码）
函数说明与下载地址：http://blog.s135.com/ajaxcdr/
username
password
content	文本区域值
city	北京         上海         深圳
interest	玩游戏         踢足球         看书     旅游
gender	男       女       未知
grade	等级一     等级二     等级三     等级四
publish	发布
	GET方式提交

  
    
  
  
    
  
  
    
  

JavaScript POST/GET 跨域提交信息到： （源代码）

api.bz服务器端返回信息：

 

　　echo.php 源代码为：
　　crossdomain.xml 文件为：