The demo application you will learn how to build in this article is a very simple Suggestion box, just like the one that Google made famous and thus ushered in the Ajax era. It is very simple, and you can download and run (on a PHP server) a working example to see how it really works.
The Main Page
Let's start by building the Main Page. This would typically be the web page that requires some form of Ajax functionality. We will call it
index.php, and it will look like Figure 1.
Click here for larger image
Figure 1. The index.php for Web Page with Ajax Functionality
And the result rendered in a browser looks like Figure 2.
Figure 2. Rendered Result of index.php
If you look at the code represented in Figure 2, you see the following:
Line 1 - Doctype Declaration: Here I just used the new HTML 5 doctype.
Line 6 - CSS Block: I'm not too worried about style, so I'll just chuck in a few little style lines here.
Line 18 - Form: This is the form that will be submitting something at some time or another.
Line 21 - Hint Div: This is the
div that will display the hints as they are generated. In effect, the actual content of the
ajax.php page is spit out here.
If you look at the code represented in Figure 3, you can see the following:
Line 1 - Declare the
Line 3 - Function
loadhint: This function is called every time a user types into the text field. We pass the value of that text field into the function and call it
Line 19 - Start building the URL so that it looks like
ajax.php?text=allan, where the
text part is what the user has typed so far.
Line 22 - When the state is ready for change, use the
updateHint function to set the new value of the content inside the hint
Line 23 - Open the request and set it to use the
Line 24 - Perform the request and relay the result back to the page.
ajax.php file (see Figure 4).
Figure 4. The
There are a few things you need to know about this type of Ajax page though. Firstly, remember that the Ajax page is loading after the main page has loaded. Session Variables created in the Ajax page will work only within the confines of the Ajax page. Next, this page should not have a doctype or a head tag, body tag, etc. The HTML rendered inside the Ajax page will never be visible as source when the user
views the main page source.
Let's take a closer look at the processing of Figure 4:
Line 6 - Set up an array of names to check against as the user types. This array could come from a database or wherever -- it does not really matter.
Line 33 - Get the
$_GET['text'] variable from the URL that has been passed through by Ajax.
Lines 3849 - This is some simple logic to check if what the user has been typing matches anything that is in the
Line 60 - Print out the result of the calculation (this will actually be printed out below the text field that is being entered (see Figure 5).
Figure 5. Printout of the Calculation Result
important part is that you know what you are doing with the server-side work so that you get the correct result. The rest, as they say, is just semantics.
Until next time,
Marc Steven Plotz