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

最新推荐文章于 2019-11-26 08:46:19 发布

技术论坛

最新推荐文章于 2019-11-26 08:46:19 发布

阅读量391

点赞数

分类专栏： as技术文档 as 技术文档文章标签： flex .net encoding datagrid xml application

as 技术文档同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

as技术文档

3 篇文章 0 订阅

订阅专栏

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 //                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

本示例的运行结果如下图：