Flex与服务器交互之二(使用HTTPService同服务器交互)

原文链接:http://blog.csdn.net/xingjunli/article/details/5068126

由于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组件相关属性和事件:
   

[xhtml] view plain copy
  1. <mx:HTTPService  
  2.      Properties  
  3.      concurrency="multiple|single|last"  
  4.      contentType="application/x-www-form-urlencoded|application/xml"  
  5.      destination="DefaultHTTP"  
  6.      id="No default."  
  7.      method="GET|POST|HEAD|OPTIONS|PUT|TRACE|DELETE"//请求数据的HTTP头  
  8.      resultFormat="object|array|xml|e4x|flashvars|text"  
  9.      showBusyCursor="false|true"  
  10.      makeObjectsBindable="false|true"  
  11.      url="No default."                //请求的URL可以是PHP,ASPX,JSP....  
  12.      useProxy="false|true"  
  13.      xmlEncode="No default."  
  14.      xmlDecode="No default."  
  15.       Events  
  16.      fault="No default."                //请求发行错误时触发的事件  
  17.      result="No default."                //请求完成后触发的事件以处理返回结果  
  18.     />  

    完成以下示例要引用到的Flex包
   
[xhtml] view plain copy
  1. import mx.rpc.events.FaultEvent;  
  2.     import mx.collections.XMLListCollection;  
  3.     import flash.events.Event;  
  4.     import mx.utils.URLUtil;  
  5.     import mx.collections.ArrayCollection;  
  6.     import mx.rpc.events.ResultEvent;  

   2、应用示例一(向服务器发送请求并传递参数):
     服务器端代码:
      
[c-sharp] view plain copy
  1. protected void Page_Load(object sender, EventArgs e)  
  2.         {  
  3.             //获取URLResuest请求回的参数 返回数据用;分隔以方便Flex对数据进行序列化  
  4.             string rs = String.Format("name={0};age={1};address={2}",Request.QueryString["name"],  
  5.                                                                      Request.QueryString["age"],  
  6.                                                                      Request.QueryString["address"]);  
  7.             Response.ClearContent();  
  8.             Response.ContentType = "text/plain";  
  9.             Response.Write(rs); //以文本形式返回数据  
  10.             Response.End();  
  11.         }  

    Felx代码:
     引入HTTPService组件(<mx:request></mx:request>节点中是请求的参数):
   
[xhtml] view plain copy
  1. <mx:HTTPService id="hsText" url="http://localhost:2222/FlexService/TextFrm.aspx" resultFormat="object" result="hsResultTextHandler(event);" fault="hsResultError(event)" >  
  2.         <mx:request xmlns="">  
  3.             <name>Peter</name>  
  4.             <age>15</age>  
  5.             <address>ShenZhen GuangDong China</address>  
  6.         </mx:request>  
  7.     </mx:HTTPService>  

    Flex中发送请求:
   
[xhtml] view plain copy
  1. private function getText():void  
  2.     {  
  3.         hsText.send();  
  4.         labMsg.alpha = 1;  
  5.     }  

    Flex中接收返回数据:
   
[c-sharp] view plain copy
  1. private function hsResultTextHandler(e:ResultEvent):void  
  2.     {  
  3.         var o:Object = URLUtil.stringToObject(String(e.result)); //使用URLUtil对将数据进行反序列化以方便使用  
  4.         txtName.text = o.name;  
  5.         txtAge.text = o.age;  
  6.         txtAddress.text = o.address;  
  7.         labMsg.alpha = 0;  
  8.     }  

    Flex中错误处理:
   
[c-sharp] view plain copy
  1. private function hsResultError(e:FaultEvent):void  
  2.     {  
  3.         Alert.show(e.message.toString()); //如当访问的页面不存在时跳转执行如下操作  
  4.         //异常要执行的操作  
  5.         labMsg.alpha = 0;  
  6.     }  

   3、应用示例二(向服务器发送请求返回XML数据并绑定到Grid中):
      服务器端代码:
      
[c-sharp] view plain copy
  1. protected void Page_Load(object sender, EventArgs e)  
  2.       {  
  3.           String s = @"<?xml version=""1.0"" encoding=""utf-8""?>  
  4.                           <EV_ChartData_Scatter xmlns=""http://www.Richardjun.com/ChartData/XML"">  
  5.                             <ScatterItem id=""0"">  
  6.                               <CAN_ITEM_ID>561</CAN_ITEM_ID>  
  7.                               <CAN_ITEM_NAME>主控ECU通讯状况</CAN_ITEM_NAME>  
  8.                               <ITEM_VALUE>0</ITEM_VALUE>  
  9.                               <MATCH_VALUE>正常</MATCH_VALUE>  
  10.                              </ScatterItem>  
  11.                             <ScatterItem  id=""1"">  
  12.                               <CAN_ITEM_ID>561</CAN_ITEM_ID>  
  13.                               <CAN_ITEM_NAME>主控ECU通讯状况</CAN_ITEM_NAME>  
  14.                               <ITEM_VALUE>1</ITEM_VALUE>  
  15.                               <MATCH_VALUE>丢包</MATCH_VALUE>  
  16.                             </ScatterItem>  
  17.                           </EV_ChartData_Scatter>";  
  18.           Response.ClearContent();  
  19.           Response.ContentType = "text/xml";  
  20.           Response.Write(s);  
  21.           Response.End();  
  22.       }  

    Felx代码:
    引入HTTPService组件
   
[c-sharp] view plain copy
  1. <mx:HTTPService id="hsXML" url="http://localhost:2222/FlexService/XMLFrm.aspx" resultFormat="object" result="onXMLResult(event);" />  

    Flex中发送请求:
   
[c-sharp] view plain copy
  1. private function getXML():void  
  2.     {  
  3.         hsXML.send();  
  4.         labMsg.alpha = 1;  
  5.     }  

    Flex中接收返回数据:
   
[c-sharp] view plain copy
  1. [Bindable]  
  2.     private var scatters:ArrayCollection;//主要用于绑定Grid  
  3.     private function onXMLResult(e:ResultEvent):void  
  4.     {  
  5.         scatters = e.result.EV_ChartData_Scatter.ScatterItem;  
  6.     }  

    Flex中绑定Grid代码:
   
[c-sharp] view plain copy
  1. <mx:Canvas x="400" y="0" width="350" height="200" borderColor="#000000" themeColor="#DCD0D0" backgroundColor="#84DACF">  
  2.         <mx:DataGrid x="10" y="10" width="333" id="grid1" dataProvider="{scatters}" height="140">  
  3.         <mx:columns>  
  4.             <mx:DataGridColumn headerText="CAN_ITEM_ID " dataField="CAN_ITEM_ID" />  
  5.             <mx:DataGridColumn headerText="CAN_ITEM_NAME " dataField="CAN_ITEM_NAME" />  
  6.             <mx:DataGridColumn headerText=" MATCH_VALUE" dataField="MATCH_VALUE" />  
  7.         </mx:columns>  
  8.         </mx:DataGrid>  
  9.         <mx:Button x="148" y="160" label="getXML" id="btnGetXML" click="getXML();"/>  
  10.     </mx:Canvas>  

    最终结果:

   https://p-blog.csdn.net/images/p_blog_csdn_net/xingjunli/EntryImages/20091224/Flex与服务器交互之二.jpg


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值