Display Web Page Content

FOCUS:

To refresh HTML content in a webpage without re-loading the webpage
The content being picked up from a MySQL database

Let’s build a simple HTML based user interface that will display a list of book titles on the left hand side. When the mouse cursor is placed on any book title, the associated book details will be displayed in the right hand side.

The simple HTML based user interface is as displayed in diagram 1.

Diagram 1

The codespec that does this is available in displaywebpagecontent.html. Download the codespec of displaywebpagecontent.html.

When the mouse cursor is placed on any of the Book Titles in the left hand side of the webpage as shown in diagram 1, the Javascript method displayBookInfo() populates the right hand side of the user interface with associated Book Details.

Populating the right hand side of the user interface is done using AJAX techniques.

The Ajax Process Workflow Synopsis:

The user places the mouse cursor on any Book Title

An XMLHttpRequest object is created and configured

The XMLHttpRequest object makes a call to the Apache Web Server to run booksinfo.php

booksinfo.php accesses the MySQL table bookmaster and returns associated book details

The XMLHttpRequest object invokes the callback() function (The listener)

The callback() function processes the response received from the Web Server and updates the Javascript DOM

The Browser immediately recognizes that Javascript DOM values have changed and updates that section of the HTML webpage which is bound to the Javascript DOM values