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

flex与ajax交互

发布时间:2020-12-15 05:15:24 所属栏目:百科 来源:网络整理
导读:?Flex与Ajax都是开发AIR非常好的技术,它们各有优缺点。Flex更简单,效果更加酷!但是在 功能开发等方面不及Ajax成熟 。最理想的就是全部用Flex来开发实现,但这只是一种理想状态,很多时候我们还是要用到Ajax。我们经常需要将嵌入到 Ajax 应用程序中的基于
?Flex与Ajax都是开发AIR非常好的技术,它们各有优缺点。Flex更简单,效果更加酷!但是在功能开发等方面不及Ajax成熟。最理想的就是全部用Flex来开发实现,但这只是一种理想状态,很多时候我们还是要用到Ajax。我们经常需要将嵌入到 Ajax 应用程序中的基于 Flash 的资源集成在一起。

???? FABridge(Adobe Flex Ajax Bridge)是由 Adobe 开发的代码库,用于Flex与Ajax之间的交互,意味着连接Flex与Ajax的桥梁。本文将介绍如何使用 FABridge 将 Flash 内容与现有 Ajax 内容集成在一起。

????? 1、FABridge库文件
???????????? FABridge库包含两个文件:FABridge.as和FABridge.js。
??????????? 一般情况,如果用户安装了Flex Builder,则在安装路径下的sdks3.1.0frameworksjavascriptfabridgesrcbridge路径下,如C:Program FilesAdobeFlex Builder 3sdks3.1.0frameworksjavascriptfabridgesrcbridge,如下图所示:

??????????? 如果用户没有这两个文件,可以参考附录,将代码复制到文本中,然后保存为FABridge.as文件和FABridge.js文件。
???? 2、新建一个Flex项目,项目名称为FlexAjax,如下图所示:

??? 3、新建一个文件夹,其名称为bridge,并把文件FABridge.as复制到该文件夹中,如下图所示:

??? 4、新建一个文本,其内容如下:????

[html] view plain copy print ?
  1. <html>??
  2. <head>??
  3. <title>Flex与Ajax交互</title>??
  4. <script?type="text/javascript"?src="bridge/FABridge.js"></script>??
  5. <script?type="text/javascript">??
  6. ???//?...??
  7. </script>??
  8. </head>??
  9. <body>??
  10. </body>??
  11. </html>??
???? 把该文本文件名称及后缀改为index.html,并保存至项目的bin-debug文件夹内。同时将FABridge.js文件保存至bin-debugbridge文件夹内,如下图所示:
??? 5、在FlexAjax.mxml文件的名称空间内引用前面复制的FABridge.as文件,代码如下:

???

[html] view plain copy print ?
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"??
  3. ????xmlns:bridge="bridge.*"?layout="absolute">??
  4. ????<bridge:FABridge?bridgeName="flex"?/>??
  5. ???<mx:TextInput?id="txt_test"?fontSize="12"?x="10"?y="10"?text="Flex与Ajax交互例子!"/>??
  6. </mx:Application>??
???? 编译FlexAjax.mxml文件,它将在项目的bin-debug文件夹内生成一个FlexAjax.swf文件。同时可以通过修改index.html文件来添加swf到网页中去,

????? 如在<body>和</body>之间添加如下代码: <embed src="FlexAjax.swf"/>

6、获得 Flex 应用程序的引用。在index.html文件中编辑,在<script type="text/javascript">后添加如下:
??? // 定义Flex程序对象
??? var flexApp;???
??? var flexApp = FABridge.flex.root();//通过FABridge指向Flex应用程序
7、连接到Flex文件。前面虽说已经建立了Flex程序对象,但是没有获取到具体的事例(即Flash文件),所以还不能对Flash进行操作。连接flexApp到Flash主要通过下面代码实现:

????

[html] view plain copy print ?
  1. <script>??
  2. ????????document.write("<object?id='flexApp'?classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'?height='350'?width='400'>");??
  3. ????????document.write("<param?name='src'?value='FlexAjax.swf'/>");??
  4. ????????document.write("</object>");??
  5. </script>??
其中height和width分别为Flash的高度和宽度,id为前面JS中定义的Flash对象变量,value为连接到的Flash文件。
8、使用 ActionScript 对象
????? 现在获得了 Flex 应用程序的全局引用,就可以使用 ActionScript 对象了。但是在JS中无法显示AS对象的方法与属性,于是AS提供了一种使用get关键字的方法,

?????? 现在举一个例子说明:在Flex的mxml文件中,假如定义了一个TextInput文本输入控件,它的id为txt_test,在JS中要获得这个文本输入控件,只需要通过flexApp.getTxt_test即可获得该对象。若要获得该控件中输入的文字,在Flex中TextInput文本输入控件中输入的文字在它的text属性里面,所以在JS中只要通过getText即可获得文本输入控件中输入的文字,即flexApp.getTxt_test().getText()。值得注意的是:无论在MXML中对象的id、属性或方法的首写字母大写还是小写,在JS中使用关键字get和set后必须为大写

[html] view plain copy print ?
  1. <html>??
  2. <head>??
  3. <title>Flex与Ajax交互</title>??
  4. <script?type="text/javascript"?src="bridge/FABridge.js"></script>??
  5. <script?type="text/javascript">??
  6. ????//?定义Flex程序对象??
  7. ????var?flexApp;???
  8. ??
  9. ????function?ClickButton()??
  10. ????{??
  11. ????????var?flexApp?=?FABridge.flex.root();??
  12. ????????var?txt?=?flexApp.getTxt_test();??
  13. ????????alert(?"输入的文字为:?"+txt.getText());??
  14. ????}??
  15. </script>??
  16. </head>??
  17. <body>??
  18. <input?type="button"?value="点击"?onclick="ClickButton()"?/>??
  19. <div>??
  20. <script>???

(编辑:李大同)

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

    推荐文章
      热点阅读