flex与ajax交互

来源：互联网发布：杭州达内有淘宝培训吗编辑：程序博客网时间：2024/04/28 00:21

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 plaincopyprint?

<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
// ...
</script>
</head>
<body>
</body>
</html>

<html><head><title>Flex与Ajax交互</title><script type="text/javascript" src="bridge/FABridge.js"></script><script type="text/javascript">   // ...</script></head><body></body></html>

把该文本文件名称及后缀改为index.html，并保存至项目的bin-debug文件夹内。同时将FABridge.js文件保存至bin-debugbridge文件夹内，如下图所示：
5、在FlexAjax.mxml文件的名称空间内引用前面复制的FABridge.as文件，代码如下：

[html] view plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:bridge="bridge.*" layout="absolute">
<bridge:FABridge bridgeName="flex" />
<mx:TextInput id="txt_test" fontSize="12" x="10" y="10" text="Flex与Ajax交互例子！"/>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    xmlns:bridge="bridge.*" layout="absolute">    <bridge:FABridge bridgeName="flex" />   <mx:TextInput id="txt_test" fontSize="12" x="10" y="10" text="Flex与Ajax交互例子！"/></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 plaincopyprint?

<script>
document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");
document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>");
document.write("</object>");
</script>

<script>        document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");        document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>");        document.write("</object>");</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 plaincopyprint?

<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
// 定义Flex程序对象
var flexApp;
function ClickButton()
{
var flexApp = FABridge.flex.root();
var txt = flexApp.getTxt_test();
alert( "输入的文字为: "+txt.getText());
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="ClickButton()" />
<div>
<script>