AJAXCDR：利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求[原创]

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

注：本文源代码点此下载

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

[文章+部分代码 作者:张宴 本文版本: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 view plainprint?
"title" type="text" value="测试数据">
"javascript:ajaxcrossdomainrequest('http://api.bz/ajaxcdr/echo.php', 'post', 'cross_domain_demo', 'mycallback()');">提交
echo.php 源代码为:http://api.bz/ajaxcdr/echo.txt
crossdomain.xml 文件为:http://api.bz/crossdomain.xml
2、实例二(复杂表单演示):
演示地址: http://blog.s135.com/demo/ajaxcdr/demo2.html ajax 跨域 httppost/get 访问请求演示(鼠标右键查看html源代码)
函数说明与下载地址:http://blog.s135.com/ajaxcdr/
username
password
content
文本区域值
city
北京
上海
深圳
interest
玩游戏
踢足球
看书
旅游
gender
男
女
未知
grade
等级一
等级二
等级三
等级四
publish
发布



get方式提交
javascriptpost/get 跨域提交信息到:http://api.bz/ajaxcdr/echo.php (源代码)
api.bz服务器端返回信息:
echo.php 源代码为:http://api.bz/ajaxcdr/echo.txt
crossdomain.xml 文件为:http://api.bz/crossdomain.xml

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

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/