本文出自:(完整代码)
在前两篇文章中分别介绍了Flex与.NET的WebService之间的数据交互通信知识,本文将介绍另外一种加载数据以及发起请求的方式。ActionScript 3.0中提供的数据加载请求类主要是HTTPService,URLLoader和URLRequest,可以通过他们协同来完成数据加载和请求。下面我么便来看看这三个类是怎么来完成数据加载工作。
在本地IIS服务器上有如下定义的XML文件:
1 <? xml version="1.0" encoding="utf-8" ?> 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>标签来完成对数据源的连接,也可以通过可编程方式来处理,两种方式没什么大的差距,实际开发中可以根据自己喜好选择。
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 }
该示例的运行结果见文章最后,下面是这个示例的完整代码:
完整示例代码 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():void10 { 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):void20 { 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客户端,两种方式传递没有太大的区别,详细请看如下代码演示:
1 /* * 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():void13 { 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():void28 // { 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):void41 { 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
OperationHandler.ashx 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 IsReusable15 { 16 get17 { 18 return false;19 }20 }21 }
上面示例的运行界面截图:
二、了解URLReqeust
使用URLRequest 类可捕获单个 HTTP 请求中的所有信息。将URLRequest 对象传递给URLStream或URLLoader 类以及其他加载操作的load()
方法以启动URL数据加载。它的使用很简单,通过构造方法构造对象就OK:
1 var request:URLRequest = new URLRequest( " http://localhost:1146/Data/Book.xml " )
同样可以使用URLRequest来请求一个本地项目/应用里的文件,如下代码示例:
1 var request:URLRequest = new URLRequest( " Data/Book.xml " )
如上便构造好了URLRequest对象,只要将他传递给相应的对象load()方法便可实现数据加载。从某种角度可以将URLRequest理解为建立请求的工具。要是URLRequest类对象变成可用的对象还需得通过其他类来与之配合协作,详细见后面使用URLLoader加载数据。
URLRequest虽然功能强大,使用简单。但我们还是需要了解更多的东西,以便可以正确的应用URLRequest类和处理相应的错误。其中最引人关注的就是安全沙箱的问题,这部分我将在以后的文章中介绍,这里只需要记住两点就OK。
1、如果执行调用的 SWF 文件在只能与本地文件系统内容交互的沙箱中,而目标资源来自网络沙箱,则不允许进行数据加载。
2、如果执行调用的 SWF 文件来自网络沙箱而目标资源在本地,也不允许进行数据加载。
这里就简单介绍这些,关于URLRequest的详细资料大家可以查看官方提供的在线文档:
三、使用URLLoader加载数据
URLLoader 类可以以文本、二进制数据或 URL 编码变量的形式从 URL 下载数据。下面将结合使用本地服务器上的数据(详细见文章前面的xml文件定义)的加载示例来演示URLLoader的使用方法。
那我们怎么通过URLLoader来加载它呢?很简单,使用上面介绍的URLRequest来创建请求连接,然后将URLRequest对象传递给URLLoader的load方法来实现数据加载。
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 } 下面是整个mxml的代码定义:
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):void14 { 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提供的在线文档: