Author: Jonathan Fenocchi
Time:2005.10.25
Translator: Sheneyan
English Original:
Http://webreference.com/programming/javascript/jf/column12/index.html
In the past, Web application development was limited because of the need to reload Web pages (or load other pages) to get new data. Although there are other methods available (no other pages are loaded), none of these technologies are well supported and have a bug-infested trend. In the past few months, a technology that has not been widely supported in the past has been used by more and more web surfers (web surfers). Is it a browser or a visitor? Accepted, it gives developers more freedom to develop advanced Web applications. These applications that obtain XML data asynchronously through JavaScript are affectionately referred to as "Ajax Applications" (asynchronous Javascript and XML applications). In this article, I will explain how to retrieve a remote XML file from Ajax and update a Web page, and as this series continues, I'll discuss more ways to use AJAX technology to elevate your Web application to a new level.
The first step is to create an XML file with some data. We named this file data.xml. It's a simple XML file, and it's a lot more complicated in a real-world program, but for our example, simplicity is the most appropriate.
<?xml version= "1.0" encoding= "UTF-8"?> <root> <data> This is some sample data that is saved in an XML file and retrieved by JavaScript. </data> </root>
Now let's create a simple Web page that contains some sample data. This page will be our JS script, and this page will let users access the handle to see the Ajax script running. We'll name it ajax.html.
<! 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=gb2312
<title> Developing Web applications using AJAX-Example </title>
<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 id= "Xmlobj"
This is some sample data, which is the default data for this page <a href= " Data.xml "
title=" To view this XML data. "> View XML data. </A>
</p>
</body>
Note that for those users who do not have JavaScript, we are directly linked to the Data.xml file. For those who allow JavaScript to run, the function "Ajaxread" will be run, the link is hidden, and will not be diverted to the Data.xml file. The function "Ajaxread" is not defined yet. So if you want to verify the example code above, you'll get a JavaScript error. Let's go ahead and define this function (and others) so that you can see how Ajax works, and the following script goes to your head tag:
<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) {
updateobj (' Xmlobj ', xmlObj.responseXML.getElementsByTagName (' data ') [0]. Firstchild.data);
}
}
xmlobj.open (' Get ', file, true);
xmlobj.send (");
}
function updateobj (obj, data) {
document.getElementById (obj). firstchild.data = Data
}
//--></script>
(Sheneyan Note: Complete code examples see example.html ml file see: Data.xml)
[1] [2] Next page
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
