Communicating using HTTP services

This section will show you how to communicate with the server using the Flex HTTPService class to retrieve simple XML or text-based data from a static web page or dynamic script. HTTP services are not the fastest communication method, but they can be used to retrieve any web page that returns text and set to automatically parse the results into XML. For this reason they can be the simplest option for small and simple data transfers, such as retrieving options for a combo box or simple lists of data. HTTP services can even be used to retrieve complex data, with nested objects, generated from server-side classes by using .NET's XmlSerializer class. However, you would not want to use HTTP services for enterprise level client-server data transfer, as XML is a less efficient transfer medium and does not provide strong typing or code assistance when parsing the result on the client.

The HTTP services communication model is simple (see Figure 1). The client makes a request with the HTTPService class, which activates a server-side page that returns XML/text data. The HTTPService object fires an event, letting the client know that the data is ready to be processed.

Figure 1. The HTTP services request/response model

You can create an HTTP service object by using the HTTPService MXML tag or instantiating an HTTPService object in ActionScript. The example in this article will use MXML. The HTTPService tag requires that the url property be defined with the URL of the target page for the service to call. It also allows you to define the result event handler and resultFormat property. The result event fires when HTTPService receives results from the server. The resultFormat property allows you to set how the HTTPService should parse the results. The following table describes the possible settings for resultFormat and how each handles data:

resultFormat Setting	Description
object (default)	The default result can be cast to a String to get the exact result or, if the service returned XML data, HTTPService will treat the results as if they were placed inside of a Model tag, creating an object with properties named after the corresponding XML tags.
Text	The result is a String of exactly what the server page returned.
Flashvars	The data must be URL-encoded, and the result is an object with properties corresponding to the name/value pairs.
Array	Similar to the default object setting, but the data is assumed to be in XML format and is returned as an array of objects rather than one.
Xml	The data is assumed to be XML and is parsed into the legacy XMLNode ActionScript object.
e4x	The data is assumed to be XML and is parsed into the XML ActionScript 3.0 class.

Table 1. Possible settings for resultFormat and how each setting handles data

The following code is an example HTTPService object defined in MXML:

<mx:HTTPService id="httpService"                                                            
     url="http://localhost/HttpService/RosterXMLService.ashx" 
     result="httpServiceResultHandler(event)" 
     resultFormat="e4x"    >
     <mx:request xmlns="">
           <numStudents>
                 {studentStepper.value}
           </numStudents>
     </mx:request>
</mx:HTTPService>

In this example, the service is set to call a handler page called RosterXMLService.ashx that returns the XML version of a ClassData object, and call a function named httpServiceResultHandler with the results. This example also demonstrates how you can set HTTP request parameters using MXML. By nesting a request tag in the HTTPService and nesting named parameter tags inside the request tag, you can define which parameters will be sent to the server page. As shown in the example, you can even use databinding with these values, as the numStudents parameter is bound to the value of a UI numerical stepper called studentStepper.

Actually calling the service is a simple matter. You only have to call the send() method of the corresponding HTTPService object. When the service returns a result, the result can be retrieved in two ways. If you write an event handler to handle the result event the HTTPService fires, the ResultEvent parameter the handler receives will have the returned data in the result property. Alternatively, you may use the lastResult property of the HTTPService object to retrieve the last results the service received at any time. The following code demonstrates calling the previously defined httpService and handling the resulting class data:

private function callHttpService():void {
     httpService.send();
}
private function httpServiceResultHandler(event:ResultEvent):void {
     var classResult:XML = event.result as XML
     // Alternatively this would achieve the same effect  
     // var classResult:XML = httpService.lastResult as XML;
     //Set up ClassData object
     var classData:ClassData = new ClassData();
     classData.ClassName = classResult.ClassName;
     classData.TeacherName = classResult.TeacherName;
     classData.TeacherID = classResult.TeacherID;
     classData.Students = new ArrayCollection();
     for each(var student:XML in classResult.Students.StudentData) {
           var studentData:StudentData = new StudentData();
           studentData.StudentName = student.StudentName;
           studentData.StudentID = student.StudentID;
           classData.Students.addItem(studentData);
     }
     //Update the UI to display the class data                  
     updateUI(classData);               
}

The code of the updateUI() method as well as other omitted code fragments can be downloaded in the source package that comes with the article, which you can download from the introduction.

Page 3 of 7

Previous Page

Next Page