加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 17:46:00 所属栏目：百科 来源：网络整理
导读：[文章+部分代码 作者：张宴 本文版本：v1.0 最后修改：2009.03.09 转载请注明原文链接： http://blog.s135.com/ajaxcdr/] 最近的一个项目中，需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口（因为数据较大，需要HTTP POST方式提交），并获取PHP接
[文章+部分代码 作者：张宴 本文版本：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 plain print ?
  1. <form?name="cross_domain_demo">?????
  2. <input?name="title"?type="text"?value="测试数据">??
  3. </form>?????
  4. ??
  5. <a?href="javascript:AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php',?'POST',?'cross_domain_demo',?'mycallback()');">提交</a>??
  6. ??
  7. <script?type="text/javascript">?????
  8. function?mycallback(){?????
  9. ????alert(AjaxCrossDomainResponse);?????
  10. }?????
  11. </script>?????
  12. ??
  13. <script?type="text/javascript"?src="/demo/ajaxcdr/ajaxcdr.js"></script>??
　　echo.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">&nbsp;</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>
????&nbsp;&nbsp;??
????<button onClick="AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php','GET',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


http://blog.s135.com/ajaxcdr/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同