Flex与.NET互操作 使用HttpService、URLReqeust和URLLoader加载/传输数据_Flex

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():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客户端,两种方式传递没有太大的区别,详细请看如下代码演示:

 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():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 //     &nbs;= 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 

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 IsReusable
15     {
16         get
17         {
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的详细资料大家可以查看官方提供的在线文档:http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLRequest.html

 

三、使用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):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

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传递参数">
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 

时间: 2024-10-21 20:31:26

Flex与.NET互操作 使用HttpService、URLReqeust和URLLoader加载/传输数据_Flex的相关文章

Flex与.NET互操作 使用FileReference+HttpHandler实现文件上传/下载_Flex

在Flex的应用开发中,同ASP.NET,JSP,PHP等应用一样,都会有上传/下载文件的应用需求,Flex的SDK也为我们提供了专门的类 FileRefUdderence实现文件上传/下载.Flex只是作为一个客户端,要实现上传或下载必须得为其提供一个服务端来接受上传或下载的请求,本文以ASP.NET中的HttpHandler作为文件上传的服务端来完成上传功能.      OK,我们从Flex客户端开始,看看客户端是通过什么方式想服务端发起请求.Flex客户端要完成文件上传下载都是通过File

Flash/Flex学习笔记(16):如何做自定义Loading加载其它swf

const FILE_PATH:String="main.swf"; const CLASS_NAME:String="MainSwf"; var loader:Loader; var request:URLRequest; loader = new Loader(); request=new URLRequest(FILE_PATH); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onCompl

Flex与.NET互操作(四)

Flex与.NET互操作(四):使用HttpService.URLReqeust和URLLoader加载/传输数  在前两篇文章中分别介绍了Flex与.NET的WebService之间的数据交互通信知识,本文将介绍另外一种加载数据以及发起请求的方式. ActionScript 3.0中提供的数据加载请求类主要是HTTPService,URLLoader和URLRequest,可以通过他们协同来完成数据加载和请求.下面我么 便来看看这三个类是怎么来完成数据加载工作. 在本地IIS服务器上有如下定义

Flex与.NET互操作(十五)

Flex与.NET互操作(十五):使用FluorineFx中的字节数组(ByteArray)实现图片上传 前几天一位朋友问我一个问题,他说:"我用HTTP接口或是WebService接口可以实现图片上传功能,那么用FluorineFx如何实现图片 上传功能呢?",其实仔细看官方文档和示例程序的自己都可以找到答案,实现上传可以有很多种实现,这里我以官方所提供是示例为基 础稍加改动,通过ByteArray类实现图片上传. 首先建立FluorineFx库和网站,在远程服务器类里添加一个处理文

Flex与.NET互操作(十二)

Flex与.NET互操作(十二):FluorineFx.Net的及时通信应用(Remote Shared Objects)(三) 远程共享对象(Remote Shared Objects) 可以用来跟踪.存储.共享以及做多客户端的数据同步操作.只要共享对象上的数据发生了改变 ,将会把最新数据同步到所有连接到该共享对象的应用程序客户端.FluorineFx所提供的远程共享对象(Remote Shared Objects)和FMS的共享 对象的功能是一样,对于熟悉FMS开发的朋友来说,学习Fluor

Flex与.NET互操作(十)

Flex与.NET互操作(十):基于FluorineFx.Net的及时通信应用(Real-time Messaging Applications)(一) 使用FluorineFx.Net开发的每一个实时通讯功能应用都拥有一个应用程序适配器(ApplicationAdapter),用来管理整个实时通讯应用的生 命周期,以及接受和拒绝客户端的连接等.应用程序适配器对象也就相当于是一个Flash媒体服务器应用程序的对象. 使用 FluorineFx.Net开发及时通信应用,我们可以通过ASP.NET网

Flex与.NET互操作(十一)

Flex与.NET互操作(十一):基于FluorineFx.Net的及时通信应用(Remote Procedure Call)(二) FluorineFx.NET提供了完善的RPC(Remote Procedure Call)功能,无论是通过Flash还是Flex开发的客户端应用(.swf)都可以非常简单方便 的采用RPC的方式调用.NET的服务器端方法,.NET的服务器端同样也可以非常方便的呼叫客户端,调用客户端的方法(比如实现系统广播). 一.客户端的RPC(客户端调用服务器端) 要想实现客

Flex与.NET互操作(九)

Flex与.NET互操作(九):FluorineFx.NET的认证(Authentication )与授权(Authorization) FluorineFx.NET的认证(Authentication )与授权(Authorization)和ASP.NET中的大同小异,核实用户的身份既为认证,授权则是确定一个用 户是否有某种执行权限,应用程序可根据用户信息授予和拒绝执行.FluorineFx.NET的认证和授权使用.Net Framework基于角色的安全性的支 持. 比如说我们需要自定义一个

Flex与.NET互操作(七)

Flex与.NET互操作(七):了解FluorineFx的环境配置(远程对象.网关.通道.目的地) 注:本文内容原本计划在上一篇<Flex与.NET互操作(六):Flex和.NET协同开发利器FluorineFx >中写出,考虑到写在一起文章内容太长 故分为两篇. Flex中的远程对象访问,也就是服务端提供一个远程服务对象(RemotingService Object),在Flex客户端通过相应的访问技术去调用远程 对象的过程. 在本系列文章的前面几篇文章中所介绍的访问Webservice的方