Some Key Technologies in Ajax

[18:04:32 | Author: greengnn] font size: large | medium | small quote Transferred from: garbage pig's litter nest
Original article: http://ewebapp.cnblogs.com/archive/2005/11/24/283492.html
I am most interested in learning Ajax technology, so I will paste it here for ease of reading.

Main technologies involved in Ajax architecture:
Client: Parse XML using JavaScript, manipulate Dom to modify HTML pages, and JavaScript is an "oo" language.
Server: servlet + Dao. Implement the service interface.

Below are the mainCode:
1. JS encapsulates XML parsing code and instance applications.

Quote // Construct the class and input the XML document and the tag name to be processed
Function dataset (xmldoc, taglabel ){
This. rootobj = xmldoc. getelementsbytagname (taglabel)

// Three methods
This. getcount = getcount
This. getdata = getdata
This. getattribute = getattribute
}
Function getcount (){
Return this. rootobj. Length
}
Function getdata (index, tagname ){
If (index> = This. Count) Return "index overflow"
VaR node = This. rootobj [Index]
VaR STR = node. getelementsbytagname (tagname) [0]. firstchild. Data
Return Str
}

Function getattribute (index, tagname ){
If (index> = This. Count) Return "index overflow"
VaR node = This. rootobj [Index]
VaR STR = node. getattribute (tagname)
Return Str
}
// How to use the dataset class
Function updatebyxml (xmldoc ){

VaR employeeds = new dataset (xmldoc, "employee"); // name of the tag to be concerned about
VaR COUNT = employeeds. getcount ()
For (I = 0; I <count; I ++ ){
VaR name = employeeds. getattribute (I, "name ")
VaR job = employeeds. getdata (I, "job ")
VaR salary = employeeds. getdata (I, "salary ")
Alert (name + "," + job + "," + salary)
}
// The XML format used, similar to the following
<? XML version = "1.0" encoding = "gb2312"?>
<Employees>
<Employee name = "billgates">
<Job> programmer </job>
<Salary> 32768 </salary>
</Employee>
<Employee name = "Wang Tao">
<Job> unemployed residents </job>
<Salary> 70000 </salary>
</Employee>
<Employee name = "Big Zhonghua">
<Job> Harbin CEO </job>
<Salary> 100000 </salary>
</Employee>
</Employees>

2. Manipulate the Dom, create a table, and display the obtained data

Quote Function deleteoldtable (){
Delrow = Document. getelementsbytagname ("table"). Length
// This statement is only used in this example. Because there is already a table in this example, it cannot be deleted. You need to change it to 2005.11.17.
If (delrow = 1) Return

VaR node = Document. getelementsbytagname ("table") [delRow-1]; // table
VaR c = node. childnodes. Length
For (I = 0; I <C; I ++)
Node. removechild (node. childnodes [0]); // delete all cell lines
}

// Input an instance of dataset.
Function maketable (m_ds ){

Deleteoldtable () // first clear the previous result

VaR table = Document. createelement ("table ");
Table. setattribute ("border", "1 ");
Table. setattribute ("width", "100% ");

Document. Body. appendchild (table );
VaR header = table. createthead ();
VaR headerrow = header. insertrow (0 );
Headerrow. insertcell (0). appendchild (document. createtextnode ("name "));
Headerrow. insertcell (1). appendchild (document. createtextnode ("Occupation "));
Headerrow. insertcell (2). appendchild (document. createtextnode ("salary "));

For (VAR I = 0; I <m_ds.getcount (); I ++ ){
VaR name = m_ds.getattribute (I, "name ")
VaR job = m_ds.getdata (I, "job ")
VaR salary = m_ds.getdata (I, "salary ")

VaR ROW = table. insertrow (I + 1 );
Row. insertcell (0). appendchild (document. createtextnode (name ));
Row. insertcell (1). appendchild (document. createtextnode (job ));
Row. insertcell (2). appendchild (document. createtextnode (salary ));
}
}