HTML and CSS Reference
In-Depth Information
Figure 18.8
Starting the Apache server with XAMPP.
An Ajax Example with PHP.
Example 18.2 demonstrates an asynchronous interac-
tion between the browser and server using Ajax. The PHP server-side script, executing
in the background, will be called every time the user types in a letter and releases the
key. When a key is released, a request is sent to the server, the PHP script is executed,
and the response is returned back from the server as text that can be inserted in an
HTML
div
container along with the current time as hour/minute/second. If the delete
key is pressed and released the letter will be removed in the text box as well as in the
div
container. You can see how, with some more extensive programming on the PHP side,
you could make your “search suggest” application, by creating an array of search strings.
If the user typed a letter or letters in a search box on the browser, Ajax would send each
letter to the server. The server script would then match each letter against the strings in
its array, and if there was a match, return the response in a string to the browser. Because
this text cannot assume you are already savvy in PHP, it won't be attempted here, but
there are many tutorials on the Web to demonstrate how this is done. For some good
examples,see:
http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html
Example 18.2 contains the Ajax code where communication between browser and server
takes place. The CSS style sheet for Example 18.2 is located in an external file (Example
18.3). Another file called
ajaxCreateRequest.js
(Example 18.4) contains the code for cross-
browser checking and most important creating a new a
XMLHttpRequest
object.
The Client Side script—“ajaxGetText.html”
EXAMPLE
18.2
<html>
<head><title>First Ajax Script</title>
1
<link rel="stylesheet" type="text/css" href="ajaxStyle.css" />
2
<script type="text/javascript"
src="ajaxCreateRequest.js"></script>
Continues
