Flex-----HttpService获取和检索数据

      HttpService是Flex提供远程数据访问和加载的方式之一，使用起来相对简单，基于HTTP协议发送POST和GET请求外部数据，然后通过指定的监听来处理响应。下面是HttpService简单代码示例：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="branchesDataService.send()">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            
            import spark.events.IndexChangeEvent;
            
            [Bindable]
            private var branchesData:ArrayCollection;
            [Bindable]
            private var item:Object;
            protected function branchesDataService_resultHandler(event:ResultEvent):void
            {
                // TODO Auto-generated method stub
                branchesData = event.result.branches.branch;
            }


            protected function depatment_changeHandler(event:IndexChangeEvent):void
            {
                // TODO Auto-generated method stub
                item = event.target.selectedItem;
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
    
        <s:HTTPService id="branchesDataService"
                       url="data/braches.xml" result="branchesDataService_resultHandler(event)"/>
                       
        
    </fx:Declarations>
    <s:Label x="124" y="63" text="增加一名新员工" width="122" height="17"/>
    
    
    <mx:Form x="124" y="88" width="464" height="376" fontSize="13">
        <mx:FormHeading label="员工信息" width="91"/>
        <mx:FormItem label="姓名">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="职位">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="邮箱">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="电话">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormHeading label="办公地址"/>
        
        <mx:FormItem label="部门">
            <s:DropDownList id="depatment" width="129" dataProvider="{branchesData}" labelField="region" change="depatment_changeHandler(event)">
            
            </s:DropDownList>
        </mx:FormItem>
        <mx:FormItem label="城市">
            <s:TextInput text="{item.city}"/>
        </mx:FormItem>
        <mx:FormItem label="地址">
            <s:TextInput text="{item.address}"/>
        </mx:FormItem>
        <mx:FormItem label="邮编" direction="horizontal"  width="215">
            <s:TextInput  text="{item.zip}" width="50"/>
            <s:Label text="输入6位数字" fontSize="13" fontFamily="中易黑体"/>
        </mx:FormItem>
        <mx:FormItem label="" >
            <s:Button label="提交"/>
        </mx:FormItem>
        
    </mx:Form>
</s:Application>

 

      以上代码实现一个空表单，将一个xml数据文件通过下拉列表选取，将数据绑定到相应的表单项中。

<s:HTTPService id="branchesDataService"

                               url="data/braches.xml" result="branchesDataService_resultHandler(event)"/>

 

      在代码中添加了一个HttpService标签，url指向了一个xml文档，同时添加了"branchesDataService_resultHandler(event)响应事件来获取xml数据集，将数据传递branchesData，这个事先定义好的ArrayCollection中，这样一个HttpService标签和一段处理函数就完成了远程数据的访问和加载。简单吧！

下一步就是如何将获取的数据集绑定到组件中，也很简单，在定义branchesData上方添加[Bindable]表明该变量可以被绑定到组件中，我们将branchesData绑定到DropDownList标签中，如下：

<s:DropDownList id="depatment" width="129" dataProvider="{branchesData}" labelField="region" change="depatment_changeHandler(event)">

 

       添加响应事件，在响应函数中，完成了读取branchesData指定数据项，同样通过数据绑定，其它表单项会显示相应的数据。

 几段代码，已经基本完成了一个数据连接，加载到处理的整个过程。

 

 附上测试数据braches.xml：

<branches>
  <branch>
     <region>江苏</region>
     <address>南京市栖霞区</address>
     <city>南京</city>
     <zip>430070</zip>
   </branch>
   <branch>
     <region>上海</region>
     <address>上海市静安区</address>
     <city>上海</city>
     <zip>530286</zip>
   </branch>
   <branch>
     <region>江苏</region>
     <address>南京市栖霞区</address>
     <city>南京</city>
     <zip>430070</zip>
   </branch>
   <branch>
     <region>上海</region>
     <address>上海市静安区</address>
     <city>上海</city>
     <zip>530286</zip>
   </branch>
   </branches>