Using HTTPService tag to send/receive variables to a server-side script

by Peter deHaan on August 16, 2007

The following example demonstrates a very simple usage of sending parameters from Flex to a server-side script (written in ColdFusion) and then displaying the server response in our Flex application. The server-side script is a simple echo/”Hello world” type script, but it accepts URL or FORM variables, so you can send using the GET or POST HTTP-method.

It’s a pretty basic/crude example, but maybe it helps somebody out there.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        creationComplete="httpService.send(myObj);">

    <!-- Parameters to send to remote script. -->
    <mx:Object id="myObj" name="peterd" />

    <mx:HTTPService id="httpService"
            url="http://www.flash-mx.com/mm/greeting.cfm"
            method="POST"
            resultFormat="flashvars" />

    <mx:Label text="{httpService.lastResult.welcomeMessage}" />

</mx:Application>

View source is enabled in the following example.

By popular request, here is the ColdFusion source code as well.

http://www.flash-mx.com/mm/greeting.cfm

<cfsilent>
<cfsetting enablecfoutputonly="Yes">
<cfif IsDefined("URL.name")><cfset Form.Name = URL.name /></cfif>
<cfif NOT IsDefined("Form.name") OR Len(Trim(Form.Name)) EQ 0>
    <cfset Form.Name = "[Mysterious Stranger]" />
</cfif>
</cfsilent><cfcontent reset="true" /><cfoutput>welcomeMessage=#UrlEncodedFormat("Welcome, "&Form.name)#</cfoutput>
<cfsetting enablecfoutputonly="No">

{ 9 comments… read them below or add one }

ashok October 16, 2007 at 2:50 am

hi! nice to see this app

Reply

Patrick Whittingham April 9, 2008 at 2:36 pm

How do I have to different buttons, instead of putting this code (ie., click=”xmlRPC.send();” ). I want to call 2 different functions. One will pass hidden textinput field value as “1″ or “2″. This will tell CFMX to one of the 2 given CFC. httpservice calls a cfm page which cfinvokes one of the 2 cfc’s. httpservice use “POST” method.

Reply

Mas May 27, 2008 at 11:24 pm

Hi! Do you have the .cfm file? Is it possible if i take a look? Because i’m having problem how to write it.

Reply

peterd May 27, 2008 at 11:53 pm

Mas,

I updated the entry above, hope that helps.

Peter

Reply

Jake hawkes November 6, 2008 at 8:50 am

Hello Peter,

Do you feel this would be a good way to send variables triggered by Cue Points in a flash video. I want to set a coupel cue points in a flash video and when they are triggered send a message that eventually chages out content in a HTML document.

IE Content specific information…similiar to what you expect from CC but rich media.

So a flash or Flex player is playing laong, hits a Cue Point which triggers my object and passes it a URL string. As above it sends it via MyObj to a MySQL database in my case. Then a JS object is listening for the object and populates a given content area with a SWF, JPG, Text or whatever that is in the data row…

Am I on the right track? I have been trying to run this down for a week…spent all last night reading up on External Class…

Reply

Dylan January 11, 2009 at 9:15 pm

This has been a trying experience to fully understand how HTTPService and the supporting RPC (remote procedure call) classes operate. For those of you still having trouble, here is a solution I got working in Flex 3 returning simple XML after sending a login form using the POST method. It’s server side language independent.

<?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.ResultEvent;
	import mx.rpc.events.FaultEvent;

	private function loginResult(event:ResultEvent):void{
		// HTTP Service Succeeded
		trace("Success " + event.type);

	}

	private function loginFault(event:FaultEvent):void{
		// HTTP Service Failed
		trace(event.type);
		trace(event.fault);
	}

		]]>
	</mx:Script>

	<!--
		resultFormat="e4x" was a huge step forward for me

		In this example my server receives the POST form variables email and password and validates the user to return the user_id and email_address .  The output from the server page that was POSTed to returns the following exactly as it is here:

<results>
    <user_id><![CDATA[ 1 ]]></user_id>
    <email_address><![CDATA[ dylan.valade@pinelakedesign.com ]]></email_address>

</results>

	-->

	<mx:HTTPService
		resultFormat="e4x"
		method="POST"
		fault="loginFault(event)"
		result="loginResult(event)"
		url="https://www.yourdomain.com/login/"
		id="loginService"
		>

	<mx:request>
         	<email>{email.text}</email>
		<password>{password.text}</password>
      	</mx:request>

    </mx:HTTPService>

    <mx:VBox>

	   <mx:TextInput id="email" text="dylan.valade@pinelakedesign.com" />

	    <mx:TextInput id="password" text="secret" />

		<mx:Button click="loginService.send();" label="Login" />

		<mx:Text id="resultText" text="Result From Server: {loginService.lastResult.email_address}" >

		</mx:Text>

	</mx:VBox>

</mx:Application>

Reply

Nash May 24, 2009 at 3:46 pm

Dylan-

Thanks for example.

Few ways in which variable can be passed to flex –mainly foccused for http request variables
http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/

Reply

Nash May 24, 2009 at 3:47 pm

Peter/Dylan-

Thanks for example.

Few ways in which variable can be passed to flex –mainly foccused for http request variables
http://yasob.blogspot.com/2009/05/accessing-http-request-parameter-in.html

Reply

Veronica May 25, 2009 at 7:37 pm

I need to say this: THANKS!!!… I’ve been trying so hard to find out how to get a single result from an xml text recieved by a servlet, on flex, and I finally found your example and IT WORKS!!! I’m so excited that I really want to thank you… BIG help!!

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: