15 September 2006

AJAX - Getting to know the competition.

The buzz around AJAX is growing and if you haven't been asked about it by a client, you soon will. What is it and how AJAX affects the Flash community is a question that you need to ponder. As with anything knowledge is power, so let's take a look at AJAX and how one goes about utilizing it in a web application. AJAX is defined by Wikipedia as :
A Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change.
AJAX utilizes the client Document Object model to fire events. These events call functions that interact with remote data and return that data to the browser. The client-side script handles the results from these functions and displays them on a web page. This is all accomplished without the need of a page refresh.

AJAX Pros
a. Create more seamless and interactive user experience
b. Utilizes common scripting languages like Javascript
c. No plug-in required
d. Works on most browsers (see table)

Browsers that support Ajax

(Note that this is a general list, and support of Ajax applications will depend on the features the browser supports.)

* Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported)
* Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Epiphany (web browser), Galeon and Netscape version 7.1 and above
* Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, and Apple Safari version 1.2 and above
* Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above
* iCab version 3.0b352 and above




Browsers that do not support Ajax

This is a list of browsers that definitely do not support Ajax

* Opera 7 and below
* Microsoft Internet Explorer 4.0 and below
* Text-based browsers like Lynx and Links
* Browsers for the visually impaired (speech-synthesising, braille)
* Browsers made before 1997






AJAX Cons
a. Can break back button
b. Users need current browsers and Internet Explorer 6 can be a problem if users disable Javascript or Active X
c. Can adversely affect Accessibility
d. Javascript functions can become harder to maintain as pages become complex

For this article, I have chosen a ColdFusion AJAX implementation named AJAXCFC developed by Rob Gonda. AJAXCFC is an incredibly easy to use framework that handles all of the passing of data and method calls to and from ColdFusion and your web page. Download AJAXCFC here.

Let's learn as we code by building a simple page that displays weather data returned from Weather.com.

Open your HTML editor and create a new page. Into the head of the document, paste the following two lines of code:

These two lines of javascript are all that required to interact with AJAXCFC. The first line calls the _ajaxConfigfunction and passes several arguments relating to the location of your CFC file that you use to interact with the remote data. If you are familiar with Flash Remoting you will notice the similarity here with AJAX. In this example, we are calling a CFC named myWeather.cfc. This CFC will interact with the remote Weather.com XML document. The second line points to the another AJAXCFC file that is needed for the framework to be utilized on your page.

Now paste another Javascript function that will be fired when the user submits that form we will build shortly:

This function is broken down into two parts the first, doQuery, uses the DWREngine._execute() - part of AJAXCFC - to call the doWeather function that is part of our myWeather.CFC.

Similar to Flash Remoting, you then create a function - doQueryResults - to handle the results that are returned to the page by the doQuery function .
The key here are the lines:

$('id').innerHTML = r.id[0];
$('temp').innerHTML = r.temp[0];
$('humid').innerHTML = r.humid[0];
$('forcast').innerHTML = r.forcast[0] ;

These define variables that are associated with areas of our webpage that will contain the dynamic data. The id attribute of the span tag tells the page which elements to update when results are returned. The code snippet below can be put anywhere on your page and these elements will update after each AJAX call.





Next you need to create a form and make it fire the doQuery function once it is submitted:

onSubmit="doQuery(myForm.arg.value);return false;"


Notice that we are passing one argument to our CFC function doWeather; the zip code for which the user wishes to retrieve weather data.

Next paste these lines below your form, again these lines specify the areas that will update once results are recieved from our call to the myWeather.cfc :

You are done with the client side. Now lets create our myWeather.CFC that will interact with theWeather.com XML.

Weather.com provides free use of there data via XML feeds that are easily integrated into web projects. Go here to sign up as you will need a user key to for this example to work. Once you have your key you will be able to retrieve weather data for any zip code in the United States. The information is returned in XML format. View example of XML.

If you look at the XML returned from Weather.com it can be a bit intimidating but here is a trick to make it less so. Create a new page and paste the following code:

What we are doing is using ColdFusion's XMLPARSE function to convert XML text into a XML document object that we can read and use.

If you look at the output created by this code it is easy to see the nodes and their associated values. View sample output.

Now that we have a page that can read the remote XML, let's convert it to a CFC that we can utilize in our AJAX application.
Paste the following code into a new page:



I am not going to go through the whole CFC code but I do want to point out that we are returning multiple values from our
CFC and as such you need to use a return type of "struct" for our doWeather function. Also note the we need to place this line
at the top of the page for AJAXCFC. The rest of the code simply finds the XML nodes that we wish to return and grabs their values - note nodes are treated as arrays and individual values are referenced as xmltext.

Make sure all of your files are in the same directory and test your page. A working example can be viewed here . Type a zip code into the form and see how the information updates without a page refresh. I know that this is not revolutionary, Flash has been enabling asynchronous data exchange for years, but is is a quantum leap from traditional transactional html forms and as such a lot of people are taking a look at AJAX. I for one don't see
AJAX as the ultimate answer or a threat to Flash. Just as Flash is not the ultimate answer, I tend to view AJAX as another tool and think it wise to learn as much about it as possible so that I am able to respond to client request.

I hope that this article will enable you to look at AJAX more closely and see how it fits into your development toolbox. Is AJAX the magic bullet that will solve of your problems; probably not. But when you separate truth from hype I think that you will come to view AJAX a a powerful new tool that will complement your existing Flash skill set.

(By: Chris Bizzell - ActionScript.com)

AMFPHP: Flash <–> PHP interaction

Any Flash developer who has worked on RIAs (Rich Internet Applications) that needed to interact with PHP knows that this isn’t a simple process at all. Although AMFPHP has been around for quite a while, I will start with a simple introduction and then build from there in coming articles.


Before AMFPHP was available the only two options to send and load data from PHP were LoadVars and XML. If you wanted to query a database and return a complex data structure then your best option would have been XML since it was more suitable for structuring the data. But even with XML in order to retrieve data from a database you needed the logic that would do the actual query then additional logic that would parse the results of the query and build the xml string and finally parsing the xml on the client side in ActionScript to retrieve the data from the XML object.


You may ask: "So, what’s wrong with that?".


In a complex application debugging and maintenance will become pretty difficult if you have hundreds of PHP scripts just for the sole purpose of generating the xml strings, and several scripts on the client side to parse those xml objects and retrieve the necessary data. Not to mention the waste of time and resources needed to build something on the server side that you will automatically deconstruct on the client side.


Why is AMFPHP better?


Imagine writing a function on the server that queries the database and returns an array i.e.


 return mysql_fetch_array(mysql_query("select * from table LIMIT 1")); 

Then simply calling that function from ActionScript and getting an array with the results. No need to build XML strings on the server, no need to decode/parse data on the client side. If you send a number you will receive a number, if you send a string you will receive a string, if you send an array you will receive an array, even array keys are preserved. The data transfer is done in the binary AMF format rather then text format. The gateway and the ActionScript classes translate the data into this neutral format, thus allowing language specific data to be exchanged transparently.


If you would like to know more about how AMFPHP works you can check out their official website at http://www.amfphp.org/


Hello World!


Let's get started by setting up a classic "Hello World!" example:


First of all in order to use AMFPHP you will need to install the Adobe Remoting components for Action Script 2. You can download them from: http://www.adobe.com/products/flashremoting/downloads/components/


After installing the remoting components you will need to install AMFPHP. You can download the latest version from: http://www.amfphp.org/


In order to install AMFPHP you will need a web server with PHP installed. You can choose between Apache, IIS, or other web servers. For the sake of simplicity I will assume that you are a Windows XP user and will install IIS.

Installing IIS on Windows XP:

Open your Control Panel:

Click on "Add or Remove Programs";

Click on "Add/Remove Windows Components";

Check the box beside "Internet Information Services (IIS)"

Press the "Next" button.

Your system will ask you to insert the windows installation CD, Insert the CD; press the "OK" button.

And finally after the installation completes press the "Finish" button.

Installing PHP on Windows:

You can download PHP 5.1.4 as a windows installer from:

http://php.net/get/php-5.1.4-installer.exe/from/a/mirror

This installer will automatically configure your IIS web server; you just need to follow the steps in the installer.

When the installer prompts you for the installation type select "Standard".

You can choose any directory to install PHP.

You will need to select the version of IIS you installed; if you are a windows XP user your IIS version is 5.1.

If you followed the steps correctly you should have a working web server and PHP installed on your PC.

Let’s set up a test to see if the installations were successful:

Create a new file with the name test.php, open it and add the following code:

  

Save the file and copy it in your web server’s public directory (C:\Inetpub\wwwroot). Then open your favorite Browser and type the following in the address bar: http://localhost/test.php (or click this link)

If the output you get is similar to the following snapshot your web server and PHP are working properly.

Installing AMFPHP:

Once your web server and PHP are functional you can start installing AMFPHP. Unzip the contents of the zip archive in your web server’s public web directory (C:\Inetpub\wwwroot)

If you check the contents of the amfphp folder you will notice a gatway.php file this is the gateway all AMFPHP requests will be routed through. You will also notice a services folder this is where your services will reside. A service is a PHP Class; each service will contain the methods you will be calling from ActionScript. If you keep the structure of the AMFPHP package unchanged no further configuration will be needed.

I have created a Connector class that should make the use of AMFPHP easier. By using the connector even developers who didn’t use AS2 before will be able to use AMFPHP. The Connector can also be used with Java OPENAMF (which I will cover in another article), or JRun4.

You can download the Connector class here: http://www.actionscript.com/files/tibi/Connector.zip

Once you downloaded the zip file, create a new flash document and unzip the contents of the Connector.zip archive in the same folder where you flash document is. Add the following code to the first frame of your flash document:



import com.actionscript.amfphp.Connector;

var gatewayUrl:String="http://localhost/amfphp/gateway.php";
var con:Connector=new Connector(gatewayUrl);
con._PendingCall=con.setService('HelloWorld').say("Hello World from AMFPHP!");
con.setResponders(this.onResult, this.onFault, this);

function onResult(data){
trace(data.result);
}
function onFault(status){
trace("error "+status.__fault);
}

The gatewayURL is the path to your gateway. I used localhost in this case but you can also use an IP address or domain. The parameter of the con.setService('HelloWorld').say("Hello World from AMFPHP!"); function is the name of the service in which your method is implemented; HelloWorld is the service we will create.

After setting up the service you will call your method, in this case the method name is say con.setService('HelloWorld').say("Hello World from AMFPHP!");

The say method we will implement pings back a message to flash, in this case the message is "Hello World from AMFPHP!"

The onResult and onFault functions are the responders upon a successful AMFPHP call the onResult function will be called upon failure the onFault function will be called. You need to set the responder function in the Connector, in this example the responders are set by con.setResponders(this.onResult, this.onFault, this);

You can give your responder functions any name as long as you pass those names correctly to the connector by using the setResponders function. Now that the client side logic is set up lets create our service.

Create a new PHP file HelloWorld.php and put the following code in it:



methodTable = array
(
"say" => array
(
"access" => "remote",
"description" => "Pings back a message"
)
);
}

function say($sMessage)
{
return 'You said: ' . $sMessage;
}
}?>

Note that the class name must be the same as the file name.

If you aren’t familiar with OOP the first function in the php file is the constructor the name of this function must be the same as the class name.

The constructor contains a methodTable array, all methods contained by the class must be defined here.

And finally our say function, as you can see it simply returns the received parameter.

Save your php file and copy it in the amfphp/services folder on your web server. (C:\Inetpub\wwwroot\amfphp\services)

Now compile your Flash document, you should get a trace output with the following content: "You said: Hello World from AMFPHP!" (You should get the output instantly if the web server is running locally or in a couple of seconds if you are using a web host.)

I hope this article was comprehensive and it helped in giving you a basic idea of what AMFPHP is capable of. In my next article I will explain how to create a simple text chat application with AMFPHP without the use of a database by using persistent PHP sessions.




You can download a zip file containing all the files used in this "Hello World!" application here: http://www.actionscript.com/files/tibi/files.zip

(By: Tibor Gyorgy Ballai - ActionScript.com)

Shellcode that bring back tty input

There are cases that you think you have been able to exploit the bug (e.g. buffer-overflow) but the program is terminated right awa...