In this third part of the Ajax series, we will learn how to use AJAX with the server to write and how these technologies can produce powerful Web applications. If you're interested in learning how to build a Web program like Gmail or Google Maps, this is a basic primer (although those two things are much more complicated than what we've mentioned in this article). In this article, I use PHP as a service-side language, but Ajax can be very compatible with any server language, so you can choose any language you love!
We still start our study from the code of our last article (here, just above) and you can read it as a 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" >
<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 (' tasks ') + ' </td></tr> ';
}
}
InsertData + = ' </table> ';
document.getElementById (' DataArea '). InnerHTML = InsertData;
}
--></script>
<style type= "Text/css" ><!--
Table, tr, TH, TD {
Border:solid 1px #000;
Border-collapse:collapse;
padding:5px;
}
--></style>
<body>
<p> This page demonstrates how Ajax technology updates the content of a Web page by dynamically reading a remote file-no need to reload any pages. Note: This example is not effective for users who prohibit JS. </p>
<p> This page will demonstrate XML data such as retrieving and processing the group. The retrieved data will be exported to the bottom in tabular form.
<a href= "http://cms.cnblogs.com/index.php#" onclick= "Ajaxread" (' data_3.php '); return False > View demo </a>.</p>
<div id= "DataArea" ></div>
</body>
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
