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>

    最终结果：