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

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.