Web Pages Examples

ColdFusion

Sending and Receiving JavaScript Data Into Flash

AJAX

There are two main ways to make a web page dynamic, each with its own advantages. AJAX and a hidden iframe. Each appears the same to the end user, but each does its work differently. The basic principle is the same, use JavaScript to send and update information dynamically without page reloads. The beauty of AJAX and hidden iframes is it doesn't matter what web language you use. You can use PHP, ASP, ColdFusion, Perl, CGI, anything at all.

The AJAX method is a little easier to use. It is ideal whenever you need to query a database. It can do this asynchronously, whereby your web page can continue before the process is complete, or synchronously, whereby you must wait for the result. You can send GET or POST methods through AJAX. There is one slight problem with AJAX, sometimes requests are executed twice. If you are inserting data into a database or doing any action where you cannot have double executions, do not use AJAX. Use the hidden iframe method describe next.

The hidden iframe example takes a little more work, but it does the job well. With the hidden iframe, you use JavaScript to create a hidden iframe (it can be displayed if you want to test for data). Hidden iframs also have the advantage in that the iframe can have control over your functions and variables. Thus, for instance, the iframe can call a function in the master frame when it is processed the data. In order not to have multiple iframs everywhere, you should delete the last iframe before creating a new one. This also allows for code re-use. However, some web browsers and some users block iframes because they are quite often used for web ads and for browser exploits.

This first and most simplest example is using AJAX to send a GET request asynchronously. By send asynchronously, the web page can continue on its merry way. Before we begin, do yourself a favor and download a free AJAX framework at http://www.nczonline.net/downloads/. You want the zXml file. The next thing you need to do is plan what kind of data do you need to get dynamically and what do you want it to do. Ultimately you need to know a little about HTML DOM, but you can learn most of what you need at W3 Schools. Before you go any further, look at that website and do the examples until you understand it.

The Basics

AJAX Asynchronous GET (You should start here.)
AJAX Synchronous GET
AJAX Asynchronous POST
AJAX Synchronous POST
Hidden iframe

The Next Level