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> 这是一些示例数据，它被保存在一个XML文件中，并被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>使用ajax开发web应用程序 - 示例</title>
<body>
<p>这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。</p>
<p id="xmlObj">
这是一些示例数据，它是这个网页的默认数据 <a href="data.xml"
title="查看这个XML数据." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">查看XML数据.</a>
</p>
</body>
Note that for those 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>
This pile of code is a little bit more, let's do it a little bit. The first function is called "ajaxread"-the function we call in the "View XML data" link in the page, and we define a "xmlobj" variable-which will act as a middleware between the client (the Web page that the user is viewing) and the service side (the Web site itself). We define this object in a If/else block:
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
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
