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

• This immediately displays the information returned in the Browser which catches the user's attention. The entire HTML webpage is not refreshed

When the mouse cursor is placed on any Book Title the following happens:

• The Background color changes to a light yellow

• The right hand side section of the webpage is populated with the following information
• Publisher Name
• Book Image
• Book Cost
• Book Synopsis

as shown in diagram 2.

Diagram 2

The Javascript code that populates the right hand side is available in ajaxfunctions.js. Download the codespec of ajaxfunctions.js

The complete codespec can be downloaded from above.

• < Prev
• Next >