Flex 3入门教程: 用 HTTPService 加载外部数据

在Flex中使用<mx:HTTPService>标签装载外部数据是非常简单的。使用<mx:HTTPService>标签发送POST和GET请求外部数据。(也可以执行PUT和DELETE操作重置这个服务)。使用<mx:HTTPService>标签发起的HTTP调用不支持自定义的方法（比如，WebDAV中的PROPFIND等等），也不可能添加额外的相应头，但是你可以从失败的一个中区分成功的调用。

注意：虽然你可以从一个域加载数据到你的应用程序中，那个域必须实现一个开放的crossdomain.xml文件，或者将你下载的SWF文件的域添加在crossdomain.xml文件中。更多的关于crossdomain.xml的信息请查看Building and Deploying Flex 3 Applications.

在入门指南中的这个例子展示了如何用HTTPService读入RSS feed

用HTTPService读入RSS feed

Flex基于E4X的高级的XML处理能力使得处理XML格式的数据非常简单，比如RSS feed。RSS feed被blog或其他网站发布。在下边的例子中，接受被提交到Flickr的最新的图片的 Flickr RSSfeed 。

要加载RSS，就要使用<mx:HTTPService>标签，并且设置id属性为photoService和他的url属性为Flickr RSS feed的URL。要用xml方式处理加载的数据，设置HTTPService 的resultFormat为e4x。

定义result和fault事件处理器。他们在HTTPService调用成功或失败时被调用。在下边的例子中，resultHandler()方法在调用成功返回时被调用，faultHandler()在调用失败时被调用。

用户界面组件绑定到photoFeed属性，并且当数据更新时界面自动更新。要搞清绑定数据的意思查看Flickr RSS feed的结构。E4X给了对象风格的存取XML结构的方法。

大多数绑定是自我解释的。你需要执行的处理只是在结果上的feed条目的content属性抽出图片的URL。使用正则表达式实现这个功能。

提示：当处理XML时，确定你打开了需要使用的命名空间。Flickr RSS feed 的命名空间是 http://www.w3.org/2005/Atom。你必须定义一个命名空间，然后设置他的唯一URL，然后将用户语句包含到命名空间中。否则你不能存取加载进来的XML文档的内容。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:aral="*"
    creationComplete="photoService.send();"
    viewSourceURL="src/HTTPServiceConsumingFlickrRSSFeed/index.html"
>
    <!-- Model -->

    
    <!-- Define the HTTP service -->

    <mx:HTTPService 
        id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        resultFormat="e4x"
        result="photoResultHandler(event);"
        fault="photoFaultHandler(event);"
    />

   
    <!-- Controller -->
    <mx:Script>
        <![CDATA[
            import Flash.net.navigateToURL;
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
           
            [Bindable]

            private var photoFeed:XML;
           
            // Define and use atom namespace.
            private namespace atom = "http://www.w3.org/2005/Atom";
            use namespace atom;
                       
            // The image URL is in the HTML content
            // so we have to parse it out.
            private function parseImageUrl(fromHtml:XMLList):String
            {

                var pattern:RegExp = /img src="(.+?)" /;
                var results:Array = pattern.exec(fromHtml);
                var imageURL:String = results[1]; // backreference 1 from pattern
               
                return imageURL;
            }

            // Result handler - gets called after RSS is loaded.
            private function photoResultHandler(event:ResultEvent):void
            {
                photoFeed = event.result as XML;
            }
           
            // Fault handler - displays the error.
            private function photoFaultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.message, "Could not load photo feed");
            }

            // Opens author's HTML page in external window.
            private function openAuthorPage(event:MouseEvent):void
            {
                var dataIndex:uint = Number(event.target.instanceIndices.toString());
                var urlRequest:URLRequest = new URLRequest(photoFeed.entry[dataIndex].author.uri)

                navigateToURL(urlRequest, "_blank");   
            }
        ]]>
    </mx:Script>

    <!-- View -->      

    <!-- Effects -->

    <mx:Fade id="fadeIn" duration="3000" alphaFrom="0" alphaTo="1"/>
    <mx:Fade id="fadeOut" duration="3000" alphaFrom="1" alphaTo="0"/>

    <!-- User Interface -->
    <mx:Panel title="Public photos" width="100%" height="100%">

       
        <mx:Tile width="100%" height="100%">           
            <mx:Repeater id="photos" dataProvider="{photoFeed.entry}">               
                <mx:VBox
                    xmlns:mx=http://www.adobe.com/2006/mxml 
                    horizontalAlign="center"
                >

                    <mx:Image
                        id="myImage"
                        source="{parseImageUrl(photos.currentItem.content)}"
                        completeEffect="{fadeIn}"
                    />

                                   
                    <mx:Text text="{photos.currentItem.title}"/>   
                    <mx:LinkButton
                        label="{photos.currentItem.author.name}"
                        click="openAuthorPage(event);"
                    />   
               
                </mx:VBox>   
               
            </mx:Repeater>

        </mx:Tile>
       
        <mx:ControlBar horizontalAlign="center">
            <mx:Button label="Update" click="photoService.send();"/>

        </mx:ControlBar>
       
    </mx:Panel>
   
</mx:Application>
 
 

运行结果