In this example, you can get a rough idea of the process and basic method of Ajax access to the server. In this example, you can use Dom to dynamically create table rows.
Basic Idea: request data from the server within a specified time. The server will return different data information (which is returned in XML format ),
After Ajax obtains the information returned by the server, it dynamically Creates table rows to generate dynamic tables.
The implementation is as follows:
(1) ClientCode:
<HTML>
<Head>
<Title> Sx. asp </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Meta name = "generator" content = "ASP Studio 1.0">
<Script language = "JavaScript">
VaR XMLHTTP;
// Create an XMLHTTPRequest object
Function createxmlhttprequest ()
{
VaR XP;
Try {
If (window. activexobject)
{
XP = new activexobject ("Microsoft. XMLHTTP ");
}
Else
{
XP = new XMLHttpRequest ();
}
}
Catch (E)
{
Alert ("Err! ");
}
Return XP;
}
// Start sending a request
Function dostart ()
{
XMLHTTP = createxmlhttprequest ();
VaR url = "server/dopost. asp? Type = start ";
XMLHTTP. Open ("get", URL, true );
XMLHTTP. onreadystatechange = startcallback;
XMLHTTP. Send (null );
}
// Startcallback Method
Function startcallback ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
SetTimeout ("pollserver ()", 5000 );
Refreshtime ();
}
}
}
// Pollserver () method
Function pollserver ()
{
XMLHTTP = createxmlhttprequest ();
VaR url = "server/dopost. asp? Type = chance ";
XMLHTTP. Open ("get", URL, true );
XMLHTTP. onreadystatechange = pollcallback;
XMLHTTP. Send (null );
}
// Pollcallback Method
Function pollcallback ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
VaR xmldoc = XMLHTTP. responsexml;
VaR message = xmldoc. getelementsbytagname ("message") [0]. firstchild. Data;
If (message! = "End ")
{
VaR new_row = createrow (Message );
VaR table = Document. getelementbyid ("mytable ");
VaR table_body = table. getelementsbytagname ("tbody"). Item (0 );
VaR first_row = table_body.getelementsbytagname ("TR"). Item (0 );
Table_body.insertbefore (new_row, first_row );
SetTimeout ("pollserver ()", 5000 );
Refreshtime ();
}
}
}
}
// Refreshtime Method
Function refreshtime ()
{
VaR time_span = Document. getelementbyid ("time ");
VaR time_val = time_span.innerhtml;
VaR int_val = parseint (time_val );
VaR new_int_val = int_val-1;
If (new_int_val>-1)
{
SetTimeout ("refreshtime ()", 1000 );
Time_span.innerhtml = new_int_val;
} Else
{
Time_span.innerhtml = 5;
}
}
// Create a table row
Function createrow (Message)
{
VaR ROW = Document. createelement ("TR ");
VaR cell = Document. createelement ("TD ");
VaR cell_data = Document. createtextnode (Message );
Cell. appendchild (cell_data );
Row. appendchild (cell );
Return row;
}
</SCRIPT>
</Head>
<Body onload = "dostart ()">
<Span id = "time" style = 'display = none'> 5 </span>
</P>
<Table id = "mytable" align = "center">
<Tbody>
<Tr id = "row_0">
<TD> </TD>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
(2) server code (this example uses ASP, PHP, ASP. NET, and JSP for testing)
<%
REM must be set to "text/XML"
Response. charset = "gb2312"
Response. contenttype = "text/XML"
%>
<%
Dim types
Dim res
Dim message
Dim counter: Counter = 1
If (Session ("counter") = "") then Session ("counter") = 0
Types = Replace (TRIM (request. querystring ("type ")),"'","")
Counter = SESSION ("counter ")
If types = "start" then
Counter = 1
End if
Select case counter
Case 1: Message = "Name: Mo Xiaoming, student ID: 20032564, Gender: male, age: 25 years old, nationality: Guangxi"
Case 2: Message = "Name: Andy Lau, student ID: 20062564, Gender: male, age: 44, nationality: Hong Kong"
Case 3: Message = "Name: Li Ming, student ID: 16588587, Gender: male, age: 36 years old, nationality: Chongqing"
Case 4: Message = "Name: Zhang San 5, student ID: 20062564, Gender: female, age: 29 years old, nationality: Chongqing"
Case 5: Message = "Name: Zhang San 6, student ID: 20062564, Gender: male, age: 24, nationality: Chongqing"
Case 6: Message = "Name: James 7, student ID: 20062564, Gender: female, age: 18 years old, nationality: Chongqing"
Case 7: Message = "end"
Case else
Message = "end"
End select
Session ("counter") = SESSION ("counter") + 1
Res = "<message>" + message + "</message>"
Response. Write ("<response>" + Res + "</response> ")
%>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
