The initial HTTP request from a browser for an mxml page made to a Macromedia Flex application will generate a series of HTTP Request/Response pairs due to the multiple pieces that comprise a Flex presentation tier interface. Specifically, the HTTP response first returns an HTML wrapper containing the appropriate Embed and Object tags to contain the Flash SWF file. That wrapper also contains references to other HTML and JavaScript files that (partially) provide the History Management feature. As the browser makes additional calls back to Flex for the remaining pieces, the second HTTP Request that occurs is for a small piece of JavaScript code. The third piece of HTTP traffic is a request for the {filename}.mxml.swf file (note the double extension). This request is intercepted by the MXML Servlet which will perform the content cache routine and then return a SWF back to the browser in the response, which is the primary interface to the Flex application. The fourth request is to the flex-internal servlet for a smaller SWF file which contributes to the History Mangement functionality. Together, when a simple mxml application file loads in the browser, there are 4 HTTP Request and Response pairs.

The Flex History Management feature provides the ability to use the browser's BACK button while traversing through a multiple tabbed panels or windows in Flex SWF interface. Normally, when viewing some type of Flash movie or interface the browser's BACK button does not capture the traversal through the interface, but in Flex the History Management allows you to back up in the Flash presentation interface. When viewing the source of the HTML wrapper code in the initial request, there are several references to the HTML and JavaScript components that implement some of the Flex History Management, and a dynamically generated reference to the History Management SWF file. These references include:




  • /{context_root}/flex-internal?action=js

  • /{context_root}/flex-internal?action=swf

  • /{context_root}/flex-internal/history/history.html


Note that these references pass through the flex-internal path, which is a servlet mapping provided by Flex. These three components that implement the History Management feature are built into Flex, and the developer need not worry about providing or modifying them.


A simple example is shown here. This mxml code provides a panel having three tabs, each with different content. The user can click through the tabs, and then use the back button to return to previous views of the tabbed panels. Also provided below is a summary of the HTTP traffic that occurs when navigating this rather trivial application. Note the 4 initial HTTP Request/Response pairs, followed by requests for history.html and action=swf, which continue to be trafficked when as the user navigates the application.


Also note that in ACTION 6 below, which represents the user clicking REFRESH or F5 in the browser, the primary SWF for the Flex application is not sent across the wire again, but rather the Flex server returns a 304 status code for Not Modified, which reduces load on the server. This behavior is occurs when Flex is configured for production mode=true. Production mode for Flex is similar to Trusted Cache in ColdFusion because Flex will not check to see if the mxml source has been modified, and rather just serve from the content cache. Dynamic behavior is maintained in the Flex application by HTTP Service, WebService, and Remote Object callbacks, as well as client-side ActionScript.















Simple Example MXML Code
MXML Code















Flex Result showing Tabbed Navigation
Simple MXML App



































HTTP Trace Summary of Flex Request Session


ACTION 1: User requests http://{host:port}/samples/test/tabnav_test.mxml



HTTP Request:
GET /samples/test/source/tabnav_test.mxml HTTP/1.1
HTTP Response:
HTTP/1.0 200 OK, The HTML wrapper is returned


HTTP Request:
GET /samples/flex-internal?action=js HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, History manager JavaScript code is returned


HTTP Request:
GET /samples/test/source/tabnav_test.mxml.swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, The primary swf for the application is returned (~130 kb)


HTTP Request:
GET /samples/flex-internal?action=swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, A small history manager swf is returned (2.6 kb)



ACTION 2: User clicks to Tab 2



HTTP Request:
GET /samples/flex-internal/history/history.html?app=62f7&5796-selectedIndex=1 HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, History manager HTML is returned


HTTP Request:
GET /samples/flex-internal?action=swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, A small history manager swf is returned (2.6 kb)



ACTION 3: User clicks to Tab 3



HTTP Request:
GET /samples/flex-internal/history/history.html?app=62f7&5796-selectedIndex=2 HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, History manager HTML is returned


HTTP Request:
GET /samples/flex-internal?action=swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, A small history manager swf is returned (2.6 kb)



ACTION 4: User clicks BACK, returns to Tab 2



HTTP Request:
GET /samples/flex-internal?action=swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, A small history manager swf is returned (2.6 kb)



ACTION 5: User clicks BACK, returns to Tab 1



HTTP Request:
GET /samples/flex-internal?action=swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, A small history manager swf is returned (2.6 kb)



ACTION 6: User clicks REFRESH in the browser



HTTP Request:
GET /samples/test/source/tabnav_test.mxml HTTP/1.1
HTTP Response :
HTTP/1.0 304 Not Modified, no data is returned


HTTP Request:
GET /samples/flex-internal?action=js HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, History manager JavaScript code is returned


HTTP Request:
GET /samples/test/source/tabnav_test.mxml.swf HTTP/1.1
HTTP Response :
HTTP/1.0 304 Not Modified, no data is returned


HTTP Request:
GET /samples/flex-internal?action=swf HTTP/1.1
HTTP Response :
HTTP/1.0 200 OK, A small history manager swf is returned (2.6 kb)