The first example demondemon-strates how to use Ajax to get the server’s time and respond to key events, the next two examples work with a text file and an XML file, and demonstrate how
Trang 118.4 Putting It All Together
The steps we have covered are summarized in the following Ajax examples to
demon-strate how to communicate with the server The first example demondemon-strates how to use
Ajax to get the server’s time and respond to key events, the next two examples work with
a text file and an XML file, and demonstrate how to retrieve display the content of both
types of files, and the last example uses Ajax with forms using both the GET and POST
methods All of the programs go through the following steps:
1 The user clicks a button or presses a key to initiate a function that will start the
process of Ajax communicating with the server
2 Most important, JavaScript uses the XMLHttpRequest constructor method to
create a new object that will serve as the Ajax communication layer between the browser and the server (If not this, IFrames or cookies can be used, but will not
be covered in this text.)
3 Once the XMLHttpRequest object is created, it is initialized with the object’s
open() method to set up the type of HTTP request (GET or POST), the URL
(where the request is going), and whether the request will be asynchronous (true and the default), or synchronous (false)
4 The request is then sent to the server with the object’s send() method.
5 The server processes the request and sends a response to the browser in either
XML or text format It contains the data only of the page elements that need to
be changed In most cases this data will include of just a fraction of the total page markup
6 JavaScript processes the server response, updates the relevant page content, or
performs another operation with the new data received from the server
Connecting to a Server Program. If you are ready to start using PHP and Apache
to test these examples, go to http://sourceforge.net/projects/xampp/XAMPP and download
XAMPP It is a very easy to install Apache Distribution for Linux, Solaris, Windows and
Mac OS X The package includes the Apache Web server, MySQL, PHP, Perl, an FTP
server, and phpMyAdmin Once you have installed XAMPP, you will be able to start up
the services with the XAMPP control panel by clicking on the XAMPP icon (see Figure
18.7) or going to the Start menu (Windows) or Application menu (MacOS) When you
get to the XAMPP control panel (see Figure 18.8), just click to start Apache to get your
Apache HTTP server running PHP scripts will be stored in the same place as HTML
files, under the server’s root, and should be given a php extension There are many
tuto-rials and books on PHP Of course we recommend PHP and MySQL by Example by Ellie
Quigley and Marko Gargenta (Prentice Hall, ISBN 0-13-187508-6)
Figure 18.7 XAMPP icon to open the control panel.
Trang 2An 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
or http://www.w3schools.com/php/php_ajax_suggest.asp.
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”
Figure 18.8 Starting the Apache server with XAMPP.
E X A M P L E 1 8 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
Trang 3<script type="text/javascript">
3 function goAjax(){
4 var ajaxRequest=createRequest(); /* Cross-browser check;
Get a new XMLHttpRequest object */
if( ajaxRequest != false){ /* If we got back a request object create callback function to check state of the request*/
5 ajaxRequest.onreadystatechange = function(){
8 document.getElementById("message").innerHTML=
ajaxRequest.responseText;
} } } // End callback function
9 yourname=document.getElementById("username").value;
10 ajaxRequest.open("GET",
"http://localhost/serverTime.php?name=" + yourname +
"&random=" + Math.random() );
} //End if else{ alert("Browser problem was encountered!");}
} // End ajaxFunction()
</script>
</head>
<body>
<form name="myForm">
12 Your name: <input type="text" onKeyUp="goAjax();"
name="username" id="username" /> <br />
<p>
13 <div id="message" class="divStyle">
<! This is where the Ajax output will be displayed >
</div>
</p>
</form>
</body>
</html
E X P L A N A T I O N
1 The CSS style sheet is loaded from a file called “ajaxintro.css” It defines the
back-ground color as aliceblue and the style of the <div> contents that will be displayed
in the browser, a dark green container with white letters See Example 18.3
2 A js file is loaded here It contains a JavaScript function that performs a
cross-browser check and creates and returns the XMLHttpRequest object If the object
cannot be created, the function will return false Example 18.4 contains the
func-tion found in an external file called “ajaxCreateRequest.js”
E X A M P L E 1 8 2 (C O N T I N U E D)
Trang 4The CSS File—“ajaxStyle.css”
3 This function is where the Ajax communication between the browser and server
will happen It is called when the onKeyUp event handler is triggered; that is,
when the user presses a key and releases it ( line 12)
4 This function will be called every time the user releases a key It is responsible for
all the Ajax activity, once an XMLHttpRequest object has been created.
5 The callback function (also called inline function) monitors the state of the server
When the onreadystate event handler sees that the server has changed state, the
callback function is executed
6 If the readyState property is 4, the HTTP request has completed.
7 If the HTTP server status is 200 OK, then the server was successful and we are
ready to view the response
8 The getElementById() method will return a reference to the div container name
message (line 13) The ajaxRequest.responseText property contains the ASCII text
that was returned The value of the innerHTML property contains that returned
text that will be displayed in the <div> container.
9 The getElementById() method will get the name that the user typed in the text
field and assign it to a variable called yourname.
10 The request object’s open() method initializes the XMLHttpRequest object The request
will be sent as an HTTP GET request to start a server-side PHP program on the localhost
(see Example 18.5) The parameters are two URL encoded key/value pairs: The first is
the name of the user (name=yourname) and the second is a random number value
11 The send() method is responsible for sending the request to the server When
us-ing the GET method, the argument is set to null.
12 The HTML form has one input device, a textbox After the user types a character
in the box and releases the key, the onKeyUp event handler will be triggered and
call the goAjax() function.
13 When the server responds, it will send back text that will be displayed in this div
container The div container will be styled by the class divStyle defined in the
ex-ternal css file shown next
E X A M P L E 1 8 3
body{background-color:aliceblue;}
.divStyle { /* class for the <div> container
background-color:aliceblue;
margin-left:20%
margin-right:20%
border-style:solid;
color:white;
font-size:150%
}
E X P L A N A T I O N (C O N T I N U E D)
Trang 5Creating the Request Object—“ajaxCreateRequest.js”
The Server-Side PHP Script—“serverTime.php”
E X A M P L E 1 8 4
/* Check browser type and create ajax request object
Put this function in an external js file and use it for your
function CreateRequestObject(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest(); // Create the object
}
catch (e){
// Internet Explorer Browsers try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
return false;
} } }
return ajaxRequest;
} //End function
E X A M P L E 1 8 5
1 <?php
//Server side script to handle request
2 extract($_REQUEST);
3 echo "Welcome, $name!";
4 echo "<br />Time now is ", date("h:i:s A "),".";
?>
E X P L A N A T I O N
1 The PHP server-side file, called serverTime.php is located in the server’s root
di-rectory (e.g., htdocs, www, etc.) and will be executed by the server Its output will
be sent back to the browser and displayed in the div container defined in the
HTML document To run this script, you must have an HTTP server and PHP
in-stalled See XAMPP at http://sourceforge.net/projects/xampp/XAMPP for installing
the Apache and PHP
Trang 62 This PHP function extracts the data from a global associative array called
$_REQUEST It contains any name/value pairs of the HTML form sent with either
GET or POST requests; in this example, the array contains two elements: name
and “Ellie” PHP’s extract() function creates a variable, $name, for the name and
assigns it the value “Ellie” (This information was sent in the request object’s
open() method as
“http://localhost/serverTime.php?name=”+yourname+“&ran-dom=” + Math.random())
3 The PHP echo statement returns the value of $name to the server where it is then
sent back to the Ajax program in the Ajax request object’s responseText property
4 The PHP date() function returns the hour, minute, and second, AM or PM This
data is updated in the Ajax program every time the server sends a response
Re-sults of this process are shown in Figures 18.9 through 18.13
Figure 18.9 The page as it is initially displayed.
Figure 18.10 Once the user starts typing, the div box appears with the letters and
time.
E X P L A N A T I O N (C O N T I N U E D)
Trang 7Figure 18.11 Each time a letter is typed, it is added to the name in the div box
while time is changing.
Figure 18.12 User types more letters, div box and server time are updated.
Figure 18.13 If the delete key is pressed the letters start disappearing in the div box
and time is updated.
Trang 818.4.1 Using Ajax to Retrieve Text From a File
In Example 18.6, we use Ajax to request and return ASCII text from a file and display
the response results in a div container For a more sophisticated example of an Ajax
pro-gram using a text file, see http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm
This Ajax ticker program adds the ability to periodically refetch the contents of an
exter-nal file All source code is provided
At http://www.JavaScriptkit.com/dhtmltutors/ajaxticker/index.shtml you can find another
excellent tutorial on how to combine RSS, Ajax, and JavaScript to create a live RSS ticker
Example 18.6 provides an Ajax program to get text from a file The CSS file (Example
18.9) and the JavaScript file (Example 18.8) to create the request object are external file
The text file is shown in Example 18.7
The Ajax Program—“ajaxGetText.htm”
E X A M P L E 1 8 6
<html>
<head><title>Reading From a Text File with Ajax</title>
<link rel="stylesheet" type="text/css" href="ajaxTextFile.css" />
<script type="text/javascript" src="ajaxCreateRequest.js">
</script>
<script type="text/javascript">
function getText(url){
1 var ajaxRequest=createRequest(); /* Cross-browser check;
Get a new XMLHttpRequest object */
if( ajaxRequest != false){ /* If we got back a request
object create callback function to check state of the request*/
2 ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.status == 200 ||
ajaxRequest.status == 0) {
ajaxRequest.responseText;
} else { alert('There was a problem with the request.');
} } } // End callback function }
5 ajaxRequest.open('GET', url, true); // Initialize the
// object
ajaxRequest.setRequestHeader('If-Modified-Since',
'Sat, 03 Jan 2010 00:00:00GMT');
// Deal with the cache
6 ajaxRequest.send(null); // Send the request
Continues
Trang 9The Text File—“ajaxText.txt”
} //End getText() function
</script>
</head>
<body>
<span style="cursor: pointer; text-decoration: underline"
7 onclick="getText('ajaxtext.txt')">
Fetch text from a file
</span>
<p>
8 <div id=data class="divStyle">
</div>
</p>
</body>
</html>
E X P L A N A T I O N
1 A new XMLHttpRequest object, called ajaxRequest, is created (code is in
“ajaxRe-quest.js”, Example 18.8)
2 The callback function is defined and assigned to the onreadystatechange event
handler used to monitor the state of the server
3 When the readyState of the server is 4, the request is complete If the HTTP status
is OK (200), the program proceeds
4 The getElementById() method will return a reference to the div container named
“data” on line 8 The ajaxRequest.responseText property contains the ASCII text
that was returned The innerHTML property will put that text in the <div>
con-tainer
5 The XMLHttpRequest object’s open() method initializes the object The request will
be sent as an HTTP GET request to get data from a file called “ajaxtext.txt”
(When using Internet Explorer the URL was http://localhost/ajaxtext.txt with
Firefox just the name of the file was given.)
6 The request is sent to the server
7 When the user clicks the underlined text defined by the span tag, the getText()
function will be launched Its argument is the name of the text file that will be
pro-cessed, shown in Example 18.7
8 This is the <div> container where the results of the HTTP request will be
dis-played See Figure 18.14
E X A M P L E 1 8 7
Once upon a time there were
three little bears
E X A M P L E 1 8 6 (C O N T I N U E D)
Trang 10The Ajax Request File—“AjaxRequest.js”
The CSS File—“ajaxTextFile.css”
E X A M P L E 1 8 8
/* Check browser type and create ajax request object
Put this function in an external js file and use it for your
Ajax programs Fully explained in Example 18.1 */
1 function CreateRequestObject(){
2 var ajaxRequest; // The variable that makes Ajax possible!
// Opera 8.0+, Firefox, Safari
4 ajaxRequest = new XMLHttpRequest(); // Create the object
} catch (e){
// Internet Explorer Browsers try{
5 ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { try{
6 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
} } }
8 return ajaxRequest;
} //End function
E X A M P L E 1 8 9
body{background-color:aliceblue;}
.divStyle {
margin-left:5px;
margin-right:200px;
border-style:solid;
border-color:blue;
font-size:150%;
}