zoukankan      html  css  js  c++  java
  • [转]AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求

    javascript的跨域get很容易搞 定,但是跨域post就有点复杂了,今天无意看到大牛“张宴”的文章:http://blog.s135.com/ajaxcdr/ ,思路很不错,转载于此(其实这个思路要是看懂了,也很容易借助silverlight实现)

    最近的一个项目中,需要通过 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
    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"> </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

    杨过后记:张晏同学给我们带来了这么好的文章,白拿也不好意思,最后奉献一个aspx的demo吧,见https://files.cnblogs.com/yjmyzz/ajaxcdr_aspx_demo.7z

    作者:菩提树下的杨过
    出处:http://yjmyzz.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    problem in Sourcetree
    Get started with Sourcetree
    IIS application pool access desktop denied
    结构型模式 适配器模式
    结构型模式 装饰模式
    结构型模式 代理模式
    创建型模式 原型模式
    创建型模式 建造者模式
    创建型模式 抽象工厂
    设计模式的六大原则
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/2029699.html
Copyright © 2011-2022 走看看