今天看到张宴提到的一种利用flash中转做AJAX跨域请求的另类解决方案，还蛮新颖的，记录一下。
以下内容为转载张宴BLOG上的文章
[文章+部分代码 作者：张宴 本文版本：v1.0 最后修改：2009.03.09 转载请注明原文链接：http://blog.s135.com/ajaxcdr/]
最近的一个项目中，需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口（因为数据较大，需要HTTP POST方式提交），并获取PHP接口的返回值，在页面无刷新、无跳转的情况下，更新div标签内的内容。
浏览器出于安全考虑，是不允许JavaScript代码进行跨域操作。JavaScript 和 AJAX 跨域访问分为两大类，一是本域和子域的交互，二是本域和其他域的交互。
一、本域和子域的交互：www.s135.com 和 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文件（http://api.fanfou.com/crossdomain.xml）设置了允许所有域名访问；
3、校内网API的crossdomain.xml文件（http://api.xiaonei.com/crossdomain.xml）设置了允许所有域名访问；
4、优酷网的crossdomain.xml文件（http://www.youku.com/crossdomain.xml）设置了允许所有域名访问；
5、土豆网的crossdomain.xml文件（http://www.tudou.com/crossdomain.xml）设置了允许所有域名访问；
6、逍遥视频的crossdomain.xml文件（http://v.xoyo.com/crossdomain.xml）设置了只允许*.xoyo.com域名访问；
7、网易的crossdomain.xml文件（http://www.163.com/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
提交 code.php 源代码为：http://api.bz/ajaxcdr/echo.txt
crossdomain.xml 文件为：http://api.bz/crossdomain.xml
2、实例二（复杂表单演示）：
演示地址： http://blog.s135.com/demo/ajaxcdr/demo2.html
<html>
<head>
<title>Ajax 跨域 HTTP POST/GET 访问请求演示：Ajax Cross Domain HTTP POST/GET Request Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
}
-->
</style>
</head>
<body>
<form name="cross_domain_demo">
<table width="600" border="1">
<tr>
<td colspan="2" align="center" valign="top"><strong>Ajax 跨域 HTTP POST/GET 访问请求演示（鼠标右键查看HTML源代码）</strong></td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">函数说明与下载地址：<a href="http://blog.s135.com/ajaxcdr/" target="_blank">http://blog.s135.com/ajaxcdr/</a></td>
</tr>
<tr>
<td align="right" valign="top">username</td>
<td><input name="title" type="text" value="用户名"></td>
</tr>
<tr>
<td align="right" valign="top">password</td>
<td><input name="password" type="password" value="123456"></td>
</tr>
<tr>
<td align="right" valign="top">content</td>
<td><textarea name="content" cols="58" rows="5">文本区域值</textarea></td>
</tr>
<tr>
<td align="right" valign="top">city</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select> </td>
</tr>
<tr>
<td align="right" valign="top">interest</td>
<td>
<select name="interest[]" multiple>
<option value="玩游戏">玩游戏</option>
<option value="踢足球">踢足球</option>
<option value="看书">看书</option>
<option value="旅游">旅游</option>
</select> </td>
</tr>
<tr>
<td align="right" valign="top">gender</td>
<td>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女" >女
<input type="radio" name="gender" value="未知" checked>未知 </td>
</tr>
<tr>
<td align="right" valign="top">grade</td>
<td>
<input type="checkbox" name="grade[]" value="等级一">等级一
<input type="checkbox" name="grade[]" value="等级二">等级二
<input type="checkbox" name="grade[]" value="等级三">等级三
<input type="checkbox" name="grade[]" value="等级四">等级四 </td>
</tr>
<tr>
<td align="right" valign="top">publish</td>
<td><input type="checkbox" name="publish" value="发布">发布</td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td>
<a href="javascript:AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php', 'POST', 'cross_domain_demo', 'mycallback(\'参数①\', \'参数②\', myparam)');"><img src="post_button.gif" width="100" height="24" align="absmiddle" border="0"></a>
<button onClick="AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php', 'GET', 'cross_domain_demo', 'mycallback(\'参数①\', \'参数②\', myparam)'); return false;">GET方式提交</button>
</td>
</tr>
</table>
</form>
<table width="600" border="1">
<tr>
<td>JavaScript POST/GET 跨域提交信息到：http://api.bz/ajaxcdr/echo.php （<a href="http://api.bz/ajaxcdr/echo.txt" target="_blank">源代码</a>） </td>
</tr>
<tr>
<td><strong>api.bz服务器端返回信息：</strong></td>
</tr>
<tr>
<td><div id="return_info"></div> </td>
</tr>
</table>
<script type="text/javascript">
var myparam = "参数③";
function mycallback(param1, param2, param3){
//提示：AjaxCrossDomainResponse是一个全局变量，它的值为远程服务器的返回值。
document.getElementById('return_info').innerHTML = "<pre>" + param1 + param2 + param3 + "<BR>" + AjaxCrossDomainResponse + "</pre>";
}
</script>
<script type="text/javascript" src="/demo/ajaxcdr/ajaxcdr.js"></script>
</body>
</html>
code.php 源代码为：http://api.bz/ajaxcdr/echo.txt
crossdomain.xml 文件为：http://api.bz/crossdomain.xml
分享到：
相关推荐
队列是一种基础且重要的数据结构，它遵循“先进先出”（First In First Out, FIFO）的原则。在计算机科学中，队列被广泛应用于各种场景，如任务调度、缓冲区管理、多线程通信等。本文将围绕张宴的观点，深入探讨队列...
PHP技术高峰论坛演讲-张宴.pptx
本文将基于“张宴版Nginx学习 以及配置”这一主题，深入探讨Nginx的基础知识、配置技巧以及在实际应用中的各种模块和优化策略。 1. **Nginx基本配置与优化** - Nginx的核心配置文件是`nginx.conf`，其中包含了全局...
Nginx的负载均衡入门-张宴 Nginx的负载均衡入门-张宴
《实战Nginx：取代Apache的高性能Web服务器》是一本深度探讨Nginx技术的书籍，作者张宴通过丰富的实践经验和深入的技术解析，为读者揭示了Nginx作为高性能Web服务器的优势及其应用策略。这本书主要涵盖了以下几个...
Linux发行版(Linux distribution)指的就是我们通常所说的“Linux操作系统”，它可能是由一个组织，公司或者个人发行的。通常来讲，一个Linux发行版包括Linux内核，将整个软件安装到计算机上的一套安装工具，各种GNU...
【标题解析】：“2011PHP技术高峰论坛演讲-张宴”这个标题表明这是一个关于PHP技术的讲座，发生在2011年，并由名为张宴的专家进行分享。在这个活动中，张宴可能深入探讨了当时的PHP技术趋势、最佳实践、挑战以及未来...
libevent-2.0.12-stable版本是libevent的一个稳定分支，它提供了一种机制，使得程序可以处理多个长时间运行的网络事件，如TCP连接、UDP套接字、信号等。在HTTPSQS中，libevent被用来处理网络I/O，实现高并发的网络...
【标题】：“张宴 使用...通过以上讲解，我们可以看到，Nginx在实现开源负载均衡方面的优势显著，无论是简单还是复杂的架构需求，都能提供高效、稳定的解决方案。通过深入理解和实践，可以有效提升系统的健壮性和性能。
Nginx的负载均衡入门-张宴.ppt,系统全面的介绍nginx的负载均衡设置
同时也介绍了一些故障排查和性能监控的方法，帮助管理员及时发现并解决问题。 4. **模块化扩展**：Nginx的强大之处在于其丰富的第三方模块生态系统，本书可能会详细介绍一些常用的模块，比如ngx_http_sub_module...
PHP技术高峰论坛演讲张宴.pptx
张宴XXXXPHP技术高峰论坛演讲ppt.pptx
在本书《实战Nginx：取代Apache的高性能Web服务器》中，作者张宴通过多个实战案例详细介绍了如何利用Nginx构建高性能的Web服务器环境。以下是一些关键知识点的概述： 1. **Nginx基础配置**：包括如何安装Nginx、...
使用Nginx轻松实现开源负载均衡 by 张宴.ppt
实战Nginx_取代Apache的高性能Web服务器 - 张宴，精品，kindle阅读
Sphinx 搜索引擎通过与 MySQL 结合，提供了一种高效、可扩展的搜索解决方案，特别适合处理大量数据的场景。通过合理的架构设计和配置，可以实现快速、准确的全文搜索，同时保持系统的稳定性。同时，结合 libmmseg 等...
本软件是基于张宴nginx_php_v7（_httpblog.s135.comnginx_p_lnpm