Flex与服务器交互之二（使用HTTPService同服务器交互）

    由于Flex只是一种客户端技术其本身并不能直接同数据库交互，在实际的应用开发过程中Flex提供了如URLRequest、HTTPService、RemoteObject、WebService等类以实现同服务器的通讯和数据交互，下面做一些介绍和实例解析:
   1、使用HTTPService组件同服务器交互
      使用过程中在程序中添加一个HTTPService组件，设置它的请求接收数据的URL 调用Send方法发送请求，设置result和fault事件函数接收ResultEvent和FaultEvent对象获取返回数据或捕获错误
       HTTPService官方帮助文档http://livedocs.adobe.com/flex/3/html/help.html?content=data_access_2.html
       HTTPService组件相关属性和事件:
    <mx:HTTPService Properties concurrency="multiple|single|last" contentType="application/x-www-form-urlencoded|application/xml" destination="DefaultHTTP" id="No default." method="GET|POST|HEAD|OPTIONS|PUT|TRACE|DELETE"//请求数据的HTTP头 resultFormat="object|array|xml|e4x|flashvars|text" showBusyCursor="false|true" makeObjectsBindable="false|true" url="No default." //请求的URL可以是PHP,ASPX,JSP.... useProxy="false|true" xmlEncode="No default." xmlDecode="No default." Events fault="No default." //请求发行错误时触发的事件 result="No default." //请求完成后触发的事件以处理返回结果 />
    完成以下示例要引用到的Flex包
   import mx.rpc.events.FaultEvent; import mx.collections.XMLListCollection; import flash.events.Event; import mx.utils.URLUtil; import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent;
   2、应用示例一（向服务器发送请求并传递参数）：
     服务器端代码:
      protected void Page_Load(object sender, EventArgs e) { //获取URLResuest请求回的参数 返回数据用；分隔以方便Flex对数据进行序列化 string rs = String.Format("name={0};age={1};address={2}",Request.QueryString["name"], Request.QueryString["age"], Request.QueryString["address"]); Response.ClearContent(); Response.ContentType = "text/plain"; Response.Write(rs); //以文本形式返回数据 Response.End(); }
    Felx代码：
     引入HTTPService组件（<mx:request></mx:request>节点中是请求的参数）：
   <mx:HTTPService id="hsText" url="http://localhost:2222/FlexService/TextFrm.aspx" resultFormat="object" result="hsResultTextHandler(event);" fault="hsResultError(event)" > <mx:request xmlns=""> <name>Peter</name> <age>15</age> <address>ShenZhen GuangDong China</address> </mx:request> </mx:HTTPService>
    Flex中发送请求：
    private function getText():void { hsText.send(); labMsg.alpha = 1; }
    Flex中接收返回数据:
   private function hsResultTextHandler(e:ResultEvent):void { var o:Object = URLUtil.stringToObject(String(e.result)); //使用URLUtil对将数据进行反序列化以方便使用 txtName.text = o.name; txtAge.text = o.age; txtAddress.text = o.address; labMsg.alpha = 0; }
    Flex中错误处理：
   private function hsResultError(e:FaultEvent):void { Alert.show(e.message.toString()); //如当访问的页面不存在时跳转执行如下操作 //异常要执行的操作 labMsg.alpha = 0; }
   3、应用示例二(向服务器发送请求返回XML数据并绑定到Grid中)：
       服务器端代码:
       protected void Page_Load(object sender, EventArgs e) { String s = @"<?xml version=""1.0"" encoding=""utf-8""?> <EV_ChartData_Scatter xmlns=""http://www.Richardjun.com/ChartData/XML""> <ScatterItem id=""0""> <CAN_ITEM_ID>561</CAN_ITEM_ID> <CAN_ITEM_NAME>主控ECU通讯状况</CAN_ITEM_NAME> <ITEM_VALUE>0</ITEM_VALUE> <MATCH_VALUE>正常</MATCH_VALUE> </ScatterItem> <ScatterItem id=""1""> <CAN_ITEM_ID>561</CAN_ITEM_ID> <CAN_ITEM_NAME>主控ECU通讯状况</CAN_ITEM_NAME> <ITEM_VALUE>1</ITEM_VALUE> <MATCH_VALUE>丢包</MATCH_VALUE> </ScatterItem> </EV_ChartData_Scatter>"; Response.ClearContent(); Response.ContentType = "text/xml"; Response.Write(s); Response.End(); }
    Felx代码：
    引入HTTPService组件
    <mx:HTTPService id="hsXML" url="http://localhost:2222/FlexService/XMLFrm.aspx" resultFormat="object" result="onXMLResult(event);" />
    Flex中发送请求：
   private function getXML():void { hsXML.send(); labMsg.alpha = 1; }
    Flex中接收返回数据:
   [Bindable] private var scatters:ArrayCollection;//主要用于绑定Grid private function onXMLResult(e:ResultEvent):void { scatters = e.result.EV_ChartData_Scatter.ScatterItem; }
    Flex中绑定Grid代码:
   <mx:Canvas x="400" y="0" width="350" height="200" borderColor="#000000" themeColor="#DCD0D0" backgroundColor="#84DACF"> <mx:DataGrid x="10" y="10" width="333" id="grid1" dataProvider="{scatters}" height="140"> <mx:columns> <mx:DataGridColumn headerText="CAN_ITEM_ID " dataField="CAN_ITEM_ID" /> <mx:DataGridColumn headerText="CAN_ITEM_NAME " dataField="CAN_ITEM_NAME" /> <mx:DataGridColumn headerText=" MATCH_VALUE" dataField="MATCH_VALUE" /> </mx:columns> </mx:DataGrid> <mx:Button x="148" y="160" label="getXML" id="btnGetXML" click="getXML();"/> </mx:Canvas>
    最终结果：