专著于富媒体技术~
本站某些作品来源于互联网，如果侵犯了您的利益，请留言说明！

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

RIA技术 | 阅读(403) | 评论(0)
Jul
31
2009
     在前两篇文章中分别介绍了Flex与.NET的WebService之间的数据交互通信知识，本文将介绍另外一种加载数据以及发起请求的方式。ActionScript 3.0中提供的数据加载请求类主要是HTTPService,URLLoader和URLRequest，可以通过他们协同来完成数据加载和请求。下面我么便来看看这三个类是怎么来完成数据加载工作。

     在本地IIS服务器上有如下定义的XML文件：


<?xml version="1.0" encoding="utf-8" ?>
<Root>
  <Book>
    <Id>1</Id>
    <Name>《三国演义》</Name>
    <Author>罗贯中</Author>
    <Price>52.30</Price>
  </Book>
  <Book>
    <Id>2</Id>
    <Name>《西游记》</Name>
    <Author>吴承恩</Author>
    <Price>39.91</Price>
  </Book>
  <Book>
    <Id>3</Id>
    <Name>《红楼梦》</Name>
    <Author>曹雪芹</Author>
    <Price>48.20</Price>
  </Book>
  <Book>
    <Id>4</Id>
    <Name>《水浒传》</Name>
    <Author>施耐庵</Author>
    <Price>39.85</Price>
  </Book>
</Root>



一、使用HTTPService传递和加载数据

     使用HTTPService可以实现加载数据，也可以实现参数传递，下面通过两个示例程序来讲解这两个知识点。

     首先来看看HTTPService加载数据的方式。在Flex中使用HTTPService来装载外部数据是非常简单的，他是基于HTTP协议发送POST和GET请求外部数据,然后通过指定的监听方法来处理响应。我们可以通过标签来完成对数据源的连接，也可以通过可编程方式来处理,两种方式没什么大的差距，实际开发中可以根据自己喜好选择。


internal function onClick():void
{
    var service:HTTPService = new HTTPService();
    service.url = "http://localhost:1146/Data/Book.xml";
    service.useProxy = false;
    service.resultFormat="e4x";
    service.addEventListener(ResultEvent.RESULT,onResultHandler);
    service.send();
}

internal function onResultHandler(evt:ResultEvent):void
{
    var xml:XML = evt.result as XML;
    trace(xml);
    bookGrid.dataProvider = xml.Book;
}


     该示例的运行结果见文章最后，下面是这个示例的完整代码：

完整示例代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.HTTPService;
            
            internal function onClick():void
            {
                var service:HTTPService = new HTTPService();
                service.url = "http://localhost:1146/Data/Book.xml";
                service.useProxy = false;
                service.resultFormat="e4x";
                service.addEventListener(ResultEvent.RESULT,onResultHandler);
                service.send();
            }
            
            internal function onResultHandler(evt:ResultEvent):void
            {
                var xml:XML = evt.result as XML;
                trace(xml);
                bookGrid.dataProvider = xml.Book;
            }
        ]]>
    </mx:Script>

    <mx:Panel x="49.5" y="94" width="419" height="267" layout="absolute" fontSize="12" title="使用HTTPService加载XML数据">
        <mx:DataGrid x="10" y="10" width="377" id="bookGrid">
            <mx:columns>
                <mx:DataGridColumn headerText="编号" dataField="Id"/>
                <mx:DataGridColumn headerText="书名" dataField="Name"/>
                <mx:DataGridColumn headerText="作者" dataField="Author"/>
                <mx:DataGridColumn headerText="价格" dataField="Price"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar height="42">
            <mx:Button label="加载数据" fontWeight="normal" click="onClick()"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>


     OK，我们来看看使用HTTPService传递参数到服务端是怎么实现的。使用HTTPService传递参数可以通过两种方式实现，分别如下：

     1、直接在请求URL后面跟上参数列表，如：http://localhost/web/Test.aspx?a=1&b=2。

     2、通过Flex SDK为我们提供专门用语参数传递的对象（URLVariables）来实现。

     下面以一道简单的加法运算来演示HTTPService传递参数的使用，在Flex里将需要进行加法运算的两个数传递到.NET服务端并计算其和后返回给Flex客户端，两种方式传递没有太大的区别，详细请看如下代码演示：


/**
* 通过RUL参数直接传递
* */
internal function onClick():void
{
    var service:HTTPService = new HTTPService();
    var a:String = txtA.text;
    var b:String = txtB.text;
    service.url = "http://localhost:1146/OperationHandler.ashx?a="+a+"&b="+b;
    service.useProxy = false;
    service.resultFormat="e4x";
    service.addEventListener(ResultEvent.RESULT,onResultHandler);
    service.send();
}

/**
* 通过URLVariables进行参数传递
* */
internal function onClick():void
{
    var service:HTTPService = new HTTPService();
    service.url = "http://localhost:1146/OperationHandler.ashx";
    service.useProxy = false;
    service.resultFormat="e4x";
    service.addEventListener(ResultEvent.RESULT,onResultHandler);
    var param:URLVariables = new URLVariables();
    param.a = txtA.text;
    param.b = txtB.text;
    service.send();
}


      下面是完整的示例代码，可以把onClick()方法相互切换来测试两种不同的参数传递方式。

完整的示例代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.HTTPService;
            
            /**
             * 通过RUL参数直接传递
             * */
            internal function onClick():void
            {
                var service:HTTPService = new HTTPService();
                var a:String = txtA.text;
                var b:String = txtB.text;
                service.url = "http://localhost:1146/OperationHandler.ashx?a="+a+"&b="+b;
                service.useProxy = false;
                service.resultFormat="e4x";
                service.addEventListener(ResultEvent.RESULT,onResultHandler);
                service.send();
            }
            
            /**
             * 通过URLVariables进行参数传递
             * */
//            internal function onClick():void
//            {
//                var service:HTTPService = new HTTPService();
//                service.url = "http://localhost:1146/OperationHandler.ashx";
//                service.useProxy = false;
//                service.resultFormat="e4x";
//                service.addEventListener(ResultEvent.RESULT,onResultHandler);
//                var param:URLVariables = new URLVariables();
//                param.a = txtA.text;
//                param.b = txtB.text;
//                service.send();
//            }
            
            internal function onResultHandler(evt:ResultEvent):void
            {
                ab.text = evt.result.toString();
            }
        ]]>
    </mx:Script>

    <mx:Panel x="49.5" y="94" width="419" height="126" layout="absolute" fontSize="12" title="使用HTTPService传递参>
        <mx:TextInput x="33" y="10" width="91" id="txtA"/>
        <mx:Label x="10" y="12" text="A："/>
        <mx:Label x="132" y="12" text="B："/>
        <mx:TextInput x="165" y="10" id="txtB" width="79"/>
        <mx:Label x="252" y="12" text="A+B："/>
        <mx:TextInput x="293" y="10" width="95" id="ab"/>
        <mx:ControlBar height="44">
            <mx:Button label="计 算" fontWeight="normal" click="onClick()"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>


OperationHandler.ashx

public class OperationHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        int a = int.Parse(context.Request.QueryString["a"]);
        int b = int.Parse(context.Request.QueryString["b"]);

        context.Response.Write((a + b).ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}



     上面示例的运行界面截图：
点击在新窗口中浏览此图片

二、了解URLReqeust

     使用URLRequest 类可捕获单个 HTTP 请求中的所有信息。将URLRequest 对象传递给URLStream或URLLoader 类以及其他加载操作的load()方法以启动URL数据加载。它的使用很简单，通过构造方法构造对象就OK：

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


     同样可以使用URLRequest来请求一个本地项目/应用里的文件，如下代码示例：

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方法来实现数据加载。

internal function onClick():void
{
    var request:URLRequest = new URLRequest("http://localhost:1146/Data/Book.xml");
    var loader:URLLoader = new URLLoader();
    loader.load(request);
    loader.addEventListener(Event.COMPLETE,onCompleteHandler);
}

private function onCompleteHandler(evt:Event):void
{
    var xml:XML = new XML(evt.target.data);
    bookGrid.dataProvider = xml.Book;
}


    下面是整个mxml的代码定义：

mxml完整代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            internal function onClick():void
            {
                var request:URLRequest = new URLRequest("http://localhost:1146/Data/Book.xml");
                var loader:URLLoader = new URLLoader();
                loader.load(request);
                loader.addEventListener(Event.COMPLETE,onCompleteHandler);
            }
            
            private function onCompleteHandler(evt:Event):void
            {
                var xml:XML = new XML(evt.target.data);
                bookGrid.dataProvider = xml.Book;
            }
        ]]>
    </mx:Script>
    <mx:Panel x="49.5" y="94" width="419" height="267" layout="absolute" fontSize="12" borderColor="#E2E2E2" themeColor="#009DDF" title="使用URLLoader加在XML数据">
        <mx:DataGrid x="10" y="10" width="377" id="bookGrid">
            <mx:columns>
                <mx:DataGridColumn headerText="编号" dataField="Id"/>
                <mx:DataGridColumn headerText="书名" dataField="Name"/>
                <mx:DataGridColumn headerText="作者" dataField="Author"/>
                <mx:DataGridColumn headerText="价格" dataField="Price"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar height="42">
            <mx:Button label="加载数据" fontWeight="normal" click="onClick()"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>


     本示例的运行结果如下图：
点击在新窗口中浏览此图片
关于URLLoader的更多资料大家可以查看Adobe提供的在线文档：
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLLoader.html

            

出处：Bēniaǒ成长笔记
转载时必须以链接形式注明出处及本声明！

Tags: , , , ,
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写