13.09.2016 Views

PHP and MySQL Web Development 4th Ed-tqw-_darksiderg

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

868 Chapter 34 Building <strong>Web</strong> 2.0 Applications with Ajax<br />

The head element is then closed <strong>and</strong> the body element begins.Within the body element,<br />

only XHTML is present.Within a centered div element, you will find the text for<br />

the page heading (Ajax Demonstration) as well as the instructions for users to place their<br />

mouse over the box below to get the current server time.<br />

It is within the attributes of the div element with the id of showtime that the action<br />

really takes place, specifically within the onmouseover event h<strong>and</strong>ler:<br />

<br />

The use of onmouseover means that when the user’s mouse enters the area defined by<br />

the div called showtime, the JavaScript function getServerTime() is invoked. Invoking<br />

this function initiates the request to the server, the server responds, <strong>and</strong> the resulting text<br />

appears within this div element.<br />

Note<br />

The JavaScript function could have been invoked several other ways, such as through an onclick event<br />

using a form button.<br />

Figures 34.1, 34.2, <strong>and</strong> 34.3 show the sequence of events when these scripts are in<br />

action. At no time does the ajaxServerTime.html reload; only the contents of the div<br />

called showtime.<br />

Figure 34.1<br />

Initially loading ajaxServerTime.html shows instructions<br />

<strong>and</strong> a blank box.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!