By Jonathan fenocchi
Time: 2005.10.25
Translator: sheneyan
Http://www.webreference.com/programming/.Javascript/JF/column14/index.html
In the third part of the Ajax series (related articles: part 1 and part 2 ), we will learn how to use Ajax and server-side writing and how these technologies generate powerful web applications. If you are interested in learning how to build web programs like Gmail or Google Maps, this is a basic introduction (although the two things are much more complicated than the content we mentioned in this article ). In this article, I use PHP as the server language, but Ajax is compatible with any server language, so you can choose any language you like!
We started our learning from the code in the previous article. You can read it for reference.
Here is the HTML page (with JS ):
<! Doctype HTML public "-// W3C // dtd html 4.01 // en"
Http://www.w3.org/TR/html4/strict.dtd>
<HTML lang = "ZH-CN" dir = "LTR">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> How to Use ajax to develop Web applications -- Example </title>
<SCRIPT type = "text/Javascript"> <! --
Function ajaxread (File ){
VaR xmlobj = NULL;
If (window. XMLHttpRequest ){
Xmlobj = new XMLHttpRequest ();
} Else if (window. activexobject ){
Xmlobj = new activexobject ("Microsoft. XMLHTTP ");
} Else {
Return;
}
Xmlobj. onreadystatechange = function (){
If (xmlobj. readystate = 4 ){
Processxml (xmlobj. responsexml );
}
}
Xmlobj. Open ('get', file, true );
Xmlobj. Send ('');
}
Function processxml (OBJ ){
VaR dataarray = obj. getelementsbytagname ('pets') [0]. childnodes;
VaR dataarraylen = dataarray. length;
VaR insertdata = '<Table> <tr> <TH>'
+ 'Pets </Th> <TH> tasks </Th> </tr> ';
For (VAR I = 0; I <dataarraylen; I ++ ){
If (dataarray [I]. tagname ){
Insertdata + = '<tr> <TD>' + dataarray [I]. tagname + '</TD>'
+ '<TD>' + dataarray [I]. getattribute ('task') + '</TD> </tr> ';
}
}
Insertdata + = '</table> ';
Document. getelementbyid ('dataare'). innerhtml = insertdata;
}
// --> </SCRIPT>
<Style type = "text/CSS"> <! --
Table, TR, Th, TD {
Border: solid 1px #000;
Border-collapse: collapse;
Padding: 5px;
}
--> </Style>
</Head>
<Body>
<H1> Use ajax to develop Web applications <P> This page demonstrates how Ajax technology dynamically reads a remote file to update the content of a webpage-without reloading any webpage. Note: This example does not work for users who disable javascript. </P>
<P> This page shows how to retrieve and process XML data in groups. The retrieved data is output in a table.
<A href = "#"Onclick= "Ajaxread ('data _ 3. php'); Return false"> View demo </a>. </P>
<Div id = "dataarea"> </div>
</Body>
</Html>
(Sheneyan Note: For examples, see example_3.html)
(Sheneyan Note: For examples, see example_3.html)
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
