Ajax Basics Tutorial (4)-Implementing basic AJAX Technology 4.7 Dynamic Update Web page

As mentioned earlier, Ajax technology works best if only a small portion of the page needs to be modified. In other words, when implementing some use cases, these use cases are ideal for Ajax techniques in order to update a small part of the page and always require full page refreshes.

Consider a use case with a single page, and the information that the user enters into the page is added to the list. In this example, you will see a Web page that lists the employees in an organization. The top of the page has 3 input boxes that accept the name, position, and Department of the employee, respectively. Click the Add button to submit the employee's name, position, and departmental data to the server, where the employee information is added to the database.

When using traditional Web application technology, the server responds by recreating the entire page, and the only difference is that the new employee information is added to the list compared to the previous page. In this example, we will use AJAX technology to asynchronously submit employee data to the server and insert that data into the database. The server sends a status code that responds to the browser and indicates whether the database operation was successful. Assuming the database is successfully inserted, the browser uses JavaScript DOM operations to dynamically update the page content with new employee information. In this example, the Delete button is also created to remove employee information from the database.

Code Listing 4-13 shows the source code for the HTML Web page. This page has two parts: the first part includes some input boxes that accept the employee's name, position, and department data, and the Add button that launches the database, and the second section lists all employees in the database, each with its own Delete button, to remove information from the database.

Code Listings 4-13 employeelist.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title>employee list</title>
<script type= "Text/javascript" >
var xmlHttp;
var name;
var title;
VAR department;
var Deleteid;
var emp_prefix = "emp-";
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
function AddEmployee () {
Name = document.getElementById ("name"). Value;
title = document.getElementById ("title"). Value;
Department = document.getElementById ("dept"). Value;
Action = "Add";
if (name = = "" | | title = = "" | | Department = = "") {
Return
}
var url = "EmployeeList?"
+ createaddquerystring (name, title, department, "add")
+ "&ts=" + New Date (). GetTime ();
Createxmlhttprequest ();
Xmlhttp.onreadystatechange = Handleaddstatechange;
Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL);
}
function createaddquerystring (name, title, Department, Action) {
var querystring = "Name=" + Name
+ "&title=" + title
+ "&department=" + department
+ "&action=" + action;
return querystring;
}
function Handleaddstatechange () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Updateemployeelist ();
Clearinputboxes ();
}
else {
Alert ("Error while adding employee.");
}
}
}
function Clearinputboxes () {
document.getElementById ("name"). Value = "";
document.getElementById ("title"). Value = "";
document.getElementById ("dept"). Value = "";
}
function Deleteemployee (ID) {
Deleteid = ID;
var url = "EmployeeList?"
+ "Action=delete"
+ "&id=" + ID
+ "&ts=" + New Date (). GetTime ();
Createxmlhttprequest ();
Xmlhttp.onreadystatechange = Handledeletestatechange;
Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL);
}
function Updateemployeelist () {
var responsexml = Xmlhttp.responsexml;
var status = Responsexml.getelementsbytagname ("status")
. Item (0). Firstchild.nodevalue;
Status = parseint (status);
if (status!= 1) {
Return
}
var row = document.createelement ("tr");
var UniqueID = responsexml.getelementsbytagname ("UniqueID") [0]
. Firstchild.nodevalue;
Row.setattribute ("id", Emp_prefix + UniqueID);
Row.appendchild (Createcellwithtext (name));
Row.appendchild (Createcellwithtext (title));
Row.appendchild (Createcellwithtext (department));
var DeleteButton = document.createelement ("input");
Deletebutton.setattribute ("Type", "button");
Deletebutton.setattribute ("Value", "Delete");
Deletebutton.onclick = function () {deleteemployee (UniqueID);};
Cell = document.createelement ("TD");
Cell.appendchild (DeleteButton);
Row.appendchild (cell);
document.getElementById ("EmployeeList"). appendchild (row);
Updateemployeelistvisibility ();
}
function Createcellwithtext (text) {
var cell = document.createelement ("TD");
Cell.appendchild (document.createTextNode (text));
return cell;
}
function Handledeletestatechange () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Deleteemployeefromlist ();
}
else {
Alert ("Error while deleting employee.");
}
}
}
function Deleteemployeefromlist () {
var status =
XmlHttp.responseXML.getElementsByTagName ("status")
. Item (0). Firstchild.nodevalue;
Status = parseint (status);
if (status!= 1) {
Return
}
var rowtodelete = document.getElementById (Emp_prefix + Deleteid);
var employeelist = document.getElementById ("EmployeeList");
Employeelist.removechild (Rowtodelete);
Updateemployeelistvisibility ();
}
function updateemployeelistvisibility () {
var employeelist = document.getElementById ("EmployeeList");
if (EmployeeList.childNodes.length > 0) {
document.getElementById ("Employeelistspan"). Style.display = "";
}
else {
document.getElementById ("Employeelistspan"). Style.display = "None";
}
}
</script>
<body>
<form action= "#" >
<table width= "80%" border= "0" >
<tr>
<td>name: <input type= "text" id= "Name"/></td>
<td>title: <input type= "text" id= "Title"/></td>
<td>department: <input type= "text" id= "dept"/></td>
</tr>
<tr>
&LT;TD colspan= "3" align= "Center" >
<input type= "button" value= "Add" onclick= "AddEmployee ();" />
</td>
</tr>
</table>
</form>
<span id= "Employeelistspan" style= "Display:none;" >
<table border= "1" width= "80%" >
<tbody id= "EmployeeList" ></tbody>
</table>
</span>
</body>