Flex與.NET互操作使用HttpService、URLReqeust和URLLoader加載/傳輸數(shù)據(jù)

更新時(shí)間：2009年06月15日 20:07:07 作者：

在前兩篇文章中分別介紹了Flex與.NET的WebService之間的數(shù)據(jù)交互通信知識(shí)，本文將介紹另外一種加載數(shù)據(jù)以及發(fā)起請(qǐng)求的方式。

ActionScript 3.0中提供的數(shù)據(jù)加載請(qǐng)求類(lèi)主要是HTTPService,URLLoader和URLRequest，可以通過(guò)他們協(xié)同來(lái)完成數(shù)據(jù)加載和請(qǐng)求。下面我么便來(lái)看看這三個(gè)類(lèi)是怎么來(lái)完成數(shù)據(jù)加載工作。

在本地IIS服務(wù)器上有如下定義的XML文件：

1 <?xml version="1.0" encoding="utf-8" ?>
2 <Root>
3   <Book>
4     <Id>1</Id>
5     <Name>《三國(guó)演義》</Name>
6     <Author>羅貫中</Author>
7     <Price>52.30</Price>
8   </Book>
9   <Book>
10     <Id>2</Id>
11     <Name>《西游記》</Name>
12     <Author>吳承恩</Author>
13     <Price>39.91</Price>
14   </Book>
15   <Book>
16     <Id>3</Id>
17     <Name>《紅樓夢(mèng)》</Name>
18     <Author>曹雪芹</Author>
19     <Price>48.20</Price>
20   </Book>
21   <Book>
22     <Id>4</Id>
23     <Name>《水滸傳》</Name>
24     <Author>施耐庵</Author>
25     <Price>39.85</Price>
26   </Book>
27 </Root>

一、使用HTTPService傳遞和加載數(shù)據(jù)

使用HTTPService可以實(shí)現(xiàn)加載數(shù)據(jù)，也可以實(shí)現(xiàn)參數(shù)傳遞，下面通過(guò)兩個(gè)示例程序來(lái)講解這兩個(gè)知識(shí)點(diǎn)。

首先來(lái)看看HTTPService加載數(shù)據(jù)的方式。在Flex中使用HTTPService來(lái)裝載外部數(shù)據(jù)是非常簡(jiǎn)單的，他是基于 HTTP協(xié)議發(fā)送POST和GET請(qǐng)求外部數(shù)據(jù),然后通過(guò)指定的監(jiān)聽(tīng)方法來(lái)處理響應(yīng)。我們可以通過(guò)<mx:HTTPService>標(biāo)簽來(lái)完成對(duì)數(shù)據(jù)源的連接，也可以通過(guò)可編程方式來(lái)處理,兩種方式?jīng)]什么大的差距，實(shí)際開(kāi)發(fā)中可以根據(jù)自己喜好選擇。

1 internal function onClick():void
2 {
3     var service:HTTPService = new HTTPService();
4     service.url = "http://localhost:1146/Data/Book.xml";
5     service.useProxy = false;
6     service.resultFormat="e4x";
7     service.addEventListener(ResultEvent.RESULT,onResultHandler);
8     service.send();
9 }
10
11 internal function onResultHandler(evt:ResultEvent):void
12 {
13     var xml:XML = evt.result as XML;
14     trace(xml);
15     bookGrid.dataProvider = xml.Book;
16 }

該示例的運(yùn)行結(jié)果見(jiàn)文章最后，下面是這個(gè)示例的完整代碼：

完整示例代碼

OK，我們來(lái)看看使用HTTPService傳遞參數(shù)到服務(wù)端是怎么實(shí)現(xiàn)的。使用HTTPService傳遞參數(shù)可以通過(guò)兩種方式實(shí)現(xiàn)，分別如下：

1、直接在請(qǐng)求URL后面跟上參數(shù)列表，如：http://localhost/web/Test.aspx?a=1&b=2。

2、通過(guò)Flex SDK為我們提供專(zhuān)門(mén)用語(yǔ)參數(shù)傳遞的對(duì)象（URLVariables）來(lái)實(shí)現(xiàn)。

下面以一道簡(jiǎn)單的加法運(yùn)算來(lái)演示HTTPService傳遞參數(shù)的使用，在Flex里將需要進(jìn)行加法運(yùn)算的兩個(gè)數(shù)傳遞到.NET服務(wù)端并計(jì)算其和后返回給Flex客戶(hù)端，兩種方式傳遞沒(méi)有太大的區(qū)別，詳細(xì)請(qǐng)看如下代碼演示：

1 /**
2  * 通過(guò)RUL參數(shù)直接傳遞
3  * */
4 internal function onClick():void
5 {
6     var service:HTTPService = new HTTPService();
7     var a:String = txtA.text;
8     var b:String = txtB.text;
9     service.url = "http://localhost:1146/OperationHandler.ashx?a="+a+"&b="+b;
10     service.useProxy = false;
11     service.resultFormat="e4x";
12     service.addEventListener(ResultEvent.RESULT,onResultHandler);
13     service.send();
14 }
15
16 /**
17  * 通過(guò)URLVariables進(jìn)行參數(shù)傳遞
18  * */
19 internal function onClick():void
20 {
21     var service:HTTPService = new HTTPService();
22     service.url = "http://localhost:1146/OperationHandler.ashx";
23     service.useProxy = false;
24     service.resultFormat="e4x";
25     service.addEventListener(ResultEvent.RESULT,onResultHandler);
26     var param:URLVariables = new URLVariables();
27     param.a = txtA.text;
28     param.b = txtB.text;
29     service.send();
30 }

下面是完整的示例代碼，可以把onClick()方法相互切換來(lái)測(cè)試兩種不同的參數(shù)傳遞方式。

完整的示例代碼

OperationHandler.ashx

上面示例的運(yùn)行界面截圖：

二、了解URLReqeust

使用URLRequest 類(lèi)可捕獲單個(gè) HTTP 請(qǐng)求中的所有信息。將URLRequest 對(duì)象傳遞給URLStream或URLLoader 類(lèi)以及其他加載操作的load()方法以啟動(dòng)URL數(shù)據(jù)加載。它的使用很簡(jiǎn)單，通過(guò)構(gòu)造方法構(gòu)造對(duì)象就OK：

1 var request:URLRequest = new URLRequest("http://localhost:1146/Data/Book.xml")

同樣可以使用URLRequest來(lái)請(qǐng)求一個(gè)本地項(xiàng)目/應(yīng)用里的文件，如下代碼示例：

1 var request:URLRequest = new URLRequest("Data/Book.xml")

如上便構(gòu)造好了URLRequest對(duì)象，只要將他傳遞給相應(yīng)的對(duì)象load()方法便可實(shí)現(xiàn)數(shù)據(jù)加載。從某種角度可以將 URLRequest理解為建立請(qǐng)求的工具。要是URLRequest類(lèi)對(duì)象變成可用的對(duì)象還需得通過(guò)其他類(lèi)來(lái)與之配合協(xié)作，詳細(xì)見(jiàn)后面使用 URLLoader加載數(shù)據(jù)。

URLRequest雖然功能強(qiáng)大,使用簡(jiǎn)單。但我們還是需要了解更多的東西，以便可以正確的應(yīng)用URLRequest類(lèi)和處理相應(yīng)的錯(cuò)誤。其中最引人關(guān)注的就是安全沙箱的問(wèn)題，這部分我將在以后的文章中介紹，這里只需要記住兩點(diǎn)就OK。

1、如果執(zhí)行調(diào)用的 SWF 文件在只能與本地文件系統(tǒng)內(nèi)容交互的沙箱中，而目標(biāo)資源來(lái)自網(wǎng)絡(luò)沙箱，則不允許進(jìn)行數(shù)據(jù)加載。

2、如果執(zhí)行調(diào)用的 SWF 文件來(lái)自網(wǎng)絡(luò)沙箱而目標(biāo)資源在本地，也不允許進(jìn)行數(shù)據(jù)加載。

這里就簡(jiǎn)單介紹這些，關(guān)于URLRequest的詳細(xì)資料大家可以查看官方提供的在線(xiàn)文檔：http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLRequest.html

三、使用URLLoader加載數(shù)據(jù)

URLLoader 類(lèi)可以以文本、二進(jìn)制數(shù)據(jù)或 URL 編碼變量的形式從 URL 下載數(shù)據(jù)。下面將結(jié)合使用本地服務(wù)器上的數(shù)據(jù)(詳細(xì)見(jiàn)文章前面的xml文件定義)的加載示例來(lái)演示URLLoader的使用方法。

那我們?cè)趺赐ㄟ^(guò)URLLoader來(lái)加載它呢？很簡(jiǎn)單，使用上面介紹的URLRequest來(lái)創(chuàng)建請(qǐng)求連接，然后將URLRequest對(duì)象傳遞給URLLoader的load方法來(lái)實(shí)現(xiàn)數(shù)據(jù)加載。

1 internal function onClick():void
2 {
3     var request:URLRequest = new URLRequest("http://localhost:1146/Data/Book.xml");
4     var loader:URLLoader = new URLLoader();
5     loader.load(request);
6     loader.addEventListener(Event.COMPLETE,onCompleteHandler);
7 }
8
9 private function onCompleteHandler(evt:Event):void
10 {
11     var xml:XML = new XML(evt.target.data);
12     bookGrid.dataProvider = xml.Book;
13 }

下面是整個(gè)mxml的代碼定義：

mxml完整代碼

本示例的運(yùn)行結(jié)果如下圖：

關(guān)于URLLoader的更多資料大家可以查看Adobe提供的在線(xiàn)文檔：http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLLoader.html

p;          param.a = txtA.text;
36 //                param.b = txtB.text;
37 //                service.send();
38 //            }
39
40             internal function onResultHandler(evt:ResultEvent):void
41             {
42                 ab.text = evt.result.toString();
43             }
44         ]]>
45     </mx:Script>
46
47     <mx:Panel x="49.5" y="94" width="419" height="126" layout="absolute" fontSize="12" title="使用HTTPService傳遞參數(shù)">
48         <mx:TextInput x="33" y="10" width="91" id="txtA"/>
49         <mx:Label x="10" y="12" text="A："/>
50         <mx:Label x="132" y="12" text="B："/>
51         <mx:TextInput x="165" y="10" id="txtB" width="79"/>
52         <mx:Label x="252" y="12" text="A+B："/>
53         <mx:TextInput x="293" y="10" width="95" id="ab"/>
54         <mx:ControlBar height="44">
55             <mx:Button label="計(jì) 算" fontWeight="normal" click="onClick()"/>
56         </mx:ControlBar>
57     </mx:Panel>
58 </mx:Application>
59

OperationHandler.ashx