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

金山逍遥网招聘系统工程师和PHP开发工程师

柏彦大厦，再见。

大 | 中 | 小

[

2009-3-9 11:54 | by 张宴 ]

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

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

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

　　一、本域和子域的交互：www.zyan.cc 和 blog.zyan.cc
　　二、本域和其他域的交互：blog.zyan.cc 和 api.bz

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

　　本域和其他域的交互，可以通过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.zyan.cc/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.zyan.cc/demo/ajaxcdr/demo1.html
　　echo.php 源代码为：http://api.bz/ajaxcdr/echo.txt
　　crossdomain.xml 文件为：http://api.bz/crossdomain.xml

　　2、实例二（复杂表单演示）：
　　演示地址： http://blog.zyan.cc/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">

</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.zyan.cc/ajaxcdr/" target="_blank">http://blog.zyan.cc/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>

　　echo.php 源代码为：http://api.bz/ajaxcdr/echo.txt
　　crossdomain.xml 文件为：http://api.bz/crossdomain.xml

技术大类 » PHP/JS/Shell | 评论(89) | 引用(0) | 阅读(120061)

小虎

2014-8-6 09:48

可以带文件post过去吗，我改了js里的contentType，貌似没用

Steven

2015-3-19 02:56

Thank you for this post Weight Loss Tea

123

2017-7-20 17:13

请问可以设置post的cookie吗

mariatalisha

2023-1-30 00:39

IDN poker online adalah salah satu permainan paling populer di situs nagapoker online di Indonesia. Apalagi ada situs judi poker online yang menggunakan sistem player vs player tanpa bot di dalamnya. Dari sekian banyak agen poker online yang ada di Indonesia, hanya sedikit yang memiliki sertifikasi resmi untuk beredar. Popularitas permainan poker88 sendiri memang tidak ada habisnya bahkan di tahun 2022 ini, namun anda tetap harus berhati-hati dalam memiliki situs idn poker di Indonesia.

asd

2023-8-11 17:33

카지노사이트 슬롯사이트 카지노사이트

asd

2023-8-11 17:33

카지노사이트 슬롯사이트 카지노사이트

asd

2023-8-11 17:34

슬롯사이트 카지노사이트 슬롯사이트

aaareplicatrade

2023-11-7 21:16

Thanks for your post. I’ve been thinking about writing a very comparable post over the last couple of weeks. high quality replica clothes