在前兩篇文章中分別介紹了Flex與.NET的WebService之間的數據交互通信知識,本文將介紹另外一種加載數據以及發起請求的方式。 ActionScript 3.0中提供的數據加載請求類主要是HTTPService,URLLoader和URLRequest,可以通過他們協同來完成數據加載和請求。下面我 麼便來看看這三個類是怎麼來完成數據加載工作。
在本地IIS服務器上有如下定義的XML文件:
2 <Root>
3 <Book>
4 <Id>1</Id>
5 <Name>《三國演義》</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>《紅樓夢》</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傳遞和加載數據
使用HTTPService可以實現加載數據,也可以實現參數傳遞,下面通過兩個示例程序來講解這兩個知識點。
首先來看看HTTPService加載數據的方式。在Flex中使用HTTPService來裝載外部數據是非常簡單的,他是基於 HTTP協議發送POST和GET請求外部數據,然後通過指定的監聽方法來處理響應。我們可以通過<mx:HTTPService>標籤來完 成對數據源的連接,也可以通過可編程方式來處理,兩種方式沒什麼大的差距,實際開發中可以根據自己喜好選擇。
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 }
該示例的運行結果見文章最後,下面是這個示例的完整代碼:
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Script>
4 <![CDATA[
5 import mx.rpc.events.FaultEvent;
6 import mx.rpc.events.ResultEvent;
7 import mx.rpc.http.HTTPService;
8
9 internal function onClick():void
10 {
11 var service:HTTPService = new HTTPService();
12 service.url = "http://localhost:1146/Data/Book.xml";
13 service.useProxy = false;
14 service.resultFormat="e4x";
15 service.addEventListener(ResultEvent.RESULT,onResultHandler);
16 service.send();
17 }
18
19 internal function onResultHandler(evt:ResultEvent):void
20 {
21 var xml:XML = evt.result as XML;
22 trace(xml);
23 bookGrid.dataProvider = xml.Book;
24 }
25 ]]>
26 </mx:Script>
27
28 <mx:Panel x="49.5" y="94" width="419" height="267" layout="absolute" fontSize="12" title="使用HTTPService加載XML數據">
29 <mx:DataGrid x="10" y="10" width="377" id="bookGrid">
30 <mx:columns>
31 <mx:DataGridColumn headerText="編號" dataField="Id"/>
32 <mx:DataGridColumn headerText="書名" dataField="Name"/>
33 <mx:DataGridColumn headerText="作者" dataField="Author"/>
34 <mx:DataGridColumn headerText="價格" dataField="Price"/>
35 </mx:columns>
36 </mx:DataGrid>
37 <mx:ControlBar height="42">
38 <mx:Button label="加載數據" fontWeight="normal" click="onClick()"/>
39 </mx:ControlBar>
40 </mx:Panel>
41 </mx:Application>
42
OK,我們來看看使用HTTPService傳遞參數到服務端是怎麼實現的。使用HTTPService傳遞參數可以通過兩種方式實現,分別如下:
1、直接在請求URL後面跟上參數列表,如:http://localhost/web/Test.aspx?a=1&b=2。
2、通過Flex SDK爲我們提供專門用語參數傳遞的對象(URLVariables)來實現。
下面以一道簡單的加法運算來演示HTTPService傳遞參數的使用,在Flex裏將需要進行加法運算的兩個數傳遞到.NET服務端並計算其和後返回給Flex客戶端,兩種方式傳遞沒有太大的區別,詳細請看如下代碼演示:
2 * 通過RUL參數直接傳遞
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 * 通過URLVariables進行參數傳遞
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()方法相互切換來測試兩種不同的參數傳遞方式。
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Script>
4 <![CDATA[
5 import mx.rpc.events.FaultEvent;
6 import mx.rpc.events.ResultEvent;
7 import mx.rpc.http.HTTPService;
8
9 /**
10 * 通過RUL參數直接傳遞
11 * */
12 internal function onClick():void
13 {
14 var service:HTTPService = new HTTPService();
15 var a:String = txtA.text;
16 var b:String = txtB.text;
17 service.url = "http://localhost:1146/OperationHandler.ashx?a="+a+"&b="+b;
18 service.useProxy = false;
19 service.resultFormat="e4x";
20 service.addEventListener(ResultEvent.RESULT,onResultHandler);
21 service.send();
22 }
23
24 /**
25 * 通過URLVariables進行參數傳遞
26 * */
27 // internal function onClick():void
28 // {
29 // var service:HTTPService = new HTTPService();
30 // service.url = "http://localhost:1146/OperationHandler.ashx";
31 // service.useProxy = false;
32 // service.resultFormat="e4x";
33 // service.addEventListener(ResultEvent.RESULT,onResultHandler);
34 // var param:URLVariables = new URLVariables();
35 // 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傳遞參數">
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="計 算" fontWeight="normal" click="onClick()"/>
56 </mx:ControlBar>
57 </mx:Panel>
58 </mx:Application>
59
1 public class OperationHandler : IHttpHandler
2 {
3
4 public void ProcessRequest(HttpContext context)
5 {
6 context.Response.ContentType = "text/plain";
7
8 int a = int.Parse(context.Request.QueryString["a"]);
9 int b = int.Parse(context.Request.QueryString["b"]);
10
11 context.Response.Write((a + b).ToString());
12 }
13
14 public bool IsReusable
15 {
16 get
17 {
18 return false;
19 }
20 }
21 }
上面示例的運行界面截圖:
二、瞭解URLReqeust
使用URLRequest 類可捕獲單個 HTTP 請求中的所有信息。將URLRequest 對象傳遞給URLStream或URLLoader 類以及其他加載操作的load()
方法以啓動URL數據加載。它的使用很簡單,通過構造方法構造對象就OK:
同樣可以使用URLRequest來請求一個本地項目/應用裏的文件,如下代碼示例:
如上便構造好了URLRequest對象,只要將他傳遞給相應的對象load()方法便可實現數據加載。從某種角度可以將URLRequest
理解爲建立請求的工具。要是URLRequest類對象變成可用的對象還需得通過其他類來與之配合協作,詳細見後面使用URLLoader加載數據。
URLRequest雖然功能強大,使用簡單。但我們還是需要了解更多的東西,以便可以正確的應用URLRequest類和處理相應的錯誤。其中最引人關注的就是安全沙箱的問題,這部分我將在以後的文章中介紹,這裏只需要記住兩點就OK。
1、如果執行調用的 SWF 文件在只能與本地文件系統內容交互的沙箱中,而目標資源來自網絡沙箱,則不允許進行數據加載。
2、如果執行調用的 SWF 文件來自網絡沙箱而目標資源在本地,也不允許進行數據加載。
這裏就簡單介紹這些,關於URLRequest的詳細資料大家可以查看官方提供的在線文檔:http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLRequest.html
三、使用URLLoader加載數據
URLLoader 類可以以文本、二進制數據或 URL 編碼變量的形式從 URL 下載數據。下面將結合使用本地服務器上的數據(詳細見文章前面的xml文件定義)的加載示例來演示URLLoader的使用方法。
那我們怎麼通過URLLoader來加載它呢?很簡單,使用上面介紹的URLRequest來創建請求連接,然後將URLRequest對象傳遞給URLLoader的load方法來實現數據加載。
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 }
下面是整個mxml的代碼定義:
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Script>
4 <![CDATA[
5 internal function onClick():void
6 {
7 var request:URLRequest = new URLRequest("http://localhost:1146/Data/Book.xml");
8 var loader:URLLoader = new URLLoader();
9 loader.load(request);
10 loader.addEventListener(Event.COMPLETE,onCompleteHandler);
11 }
12
13 private function onCompleteHandler(evt:Event):void
14 {
15 var xml:XML = new XML(evt.target.data);
16 bookGrid.dataProvider = xml.Book;
17 }
18 ]]>
19 </mx:Script>
20 <mx:Panel x="49.5" y="94" width="419" height="267" layout="absolute" fontSize="12" borderColor="#E2E2E2" themeColor="#009DDF" title="使用URLLoader加在XML數據">
21 <mx:DataGrid x="10" y="10" width="377" id="bookGrid">
22 <mx:columns>
23 <mx:DataGridColumn headerText="編號" dataField="Id"/>
24 <mx:DataGridColumn headerText="書名" dataField="Name"/>
25 <mx:DataGridColumn headerText="作者" dataField="Author"/>
26 <mx:DataGridColumn headerText="價格" dataField="Price"/>
27 </mx:columns>
28 </mx:DataGrid>
29 <mx:ControlBar height="42">
30 <mx:Button label="加載數據" fontWeight="normal" click="onClick()"/>
31 </mx:ControlBar>
32 </mx:Panel>
33 </mx:Application>
34
本示例的運行結果如下圖:
關於URLLoader的更多資料大家可以查看Adobe提供的在線文檔:http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLLoader.html