This is the ajax.html for displaying the subject.
<! 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 Development 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) {
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>
<body>
<p> take a look at the example below and you'll probably understand how the data is done without refreshing. </p>
<p id= "Xmlobj" style= "border:1px dashed #ccc;p adding:10px;" >
Here are some simple data. <a href= "Data.xml" title= to fetch XML data. "Onclick=" Ajaxread (' data.xml '); This.style.display= ' None '; return false ' > Fetch XML data. </a>
</p>
<p><a href= "http://www.b3inside.com" > Return blog</a></p>
</body>
Here is the data.xml that contains the data
<?xml version= "1.0" encoding= "UTF-8"?>
<root>
<data>
Here is the data in the XML.
</data>
</root>
Note that we now connect to Data.xml without using JavaScript, to use JavaScript, to execute the Ajaxread function, the connection is hidden, and this connection is not redirected to the Data.xml file. function Ajaxread is not defined yet, so when you test, you get a JS error. So we defined the function in the beginning <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>
Explained, the function Ajaxread will be executed when clicking the view XML data connection, in which we define a xmlobj variable that is responsible for the client and server side relays. We define a IF/ELSE loop block:
if (window. XMLHttpRequest) {
Xmlobj = new XMLHttpRequest ();
else if (window. ActiveXObject) {
Xmlobj = new ActiveXObject ("Microsoft.XMLHTTP");
} else {
Return
}
This is just testing the usability of different objects-different browsers perform XMLHttpRequest objects differently, so when we define "Xmlobj" as a XMLHttpRequest object, we have to treat it differently. If no XMLHttpRequest is available, the function cancels the error report by ending with return. Most of the time, XMLHttpRequest are available, but some too old browsers are excluded.
The following sections:
Xmlobj.onreadystatechange = function () {
if (xmlobj.readystate = = 4) {
Updateobj (' Xmlobj ', xmlObj.responseXML.getElementsByTagName (' data ') [0].firstchild.data);
}
}
Whenever the XMLHttpRequest state changes, the onReadyStateChange event is triggered, which has a total of 5 states, from 0 to 4.
[0]uninitialized uninitialized (before XMLHttpRequest started)
[1]loading (once initialized)
[2]loaded (once XMLHttpRequest gets a response from the server side)
[3]interactive (When the object is connected to the server)
[4]complete (complete)
The status 5[number is 4] is used to confirm that the data is available, just for xmlobj.readystate, and if yes, we perform the Updateobj function, which has 2 parameters: ID and the data that is populated, and its method is described later.
