Step by Step to AJAX - Fetching a page using AJAX
(Page 5 of 5 )
Working with AJAX is quite simple. The code will be explained by explaining the component parts with reference to an html file, AjaxTest.htm. First you need to create an XMLHttpRequest Object along the lines discussed above. Then you make a request, in this case pass an URL as an argument to the getPage() function. Since you are getting back a page you just need to use the GET argument. Since an asynchronous interaction is intended, use TRUE for the third argument in the open() method.
Before the open() method is called the onreadystatechange eventhandler calls the statusCheck() function, where the readyState of the request is verified and the status code is verified to return OK. Both of these functions are in the <Head/> and are evaluated before the rest of the page is loaded. Review the two functions just described for the html page AjaxTest.htm. Some of the properties and methods previously described and highlighted are also returned. The script that follows this paragraph is in the <head/> section of AjaxTest.htm.
You also include code to alert you if, for some reason, the XMLHttpRequest object instantiation failed. It also needs to alert the user if the request failed because the page was unavailable, or the server was not responding, or for any other reason.
If the status is OK and the readyState shows completion, then you get the response, for this example, in the text format. Now you invoke the DOM API to get the element whose ID="x", in this case the <div/>, and set its innerHTML property the same as the returned text. If you look at the response produced by the alert(xhr.responseText) you would see the html of the page you requested as shown in the next picture. I particularly like the preference to use the ECMA scripting style.
<SCRIPT LANGUAGE=javascript>
<!--
var xhr = false;
function getPage (url) {
xhr = false;
//this is the Microsoft browser compatible instantiation
xhr = new ActiveXObject("Microsoft.XMLHTTP");
if (!xhr) {
alert ('XMLHttpRequest failed to instantiate');
return false;
}
xhr.onreadystatechange = statusCheck;
xhr.open ('GET', url, true);
xhr.send (null);
}
function statusCheck() {
txt1.value="XmlHttpRequest_Status: " + xhr.status;
txt2.value="XmlHttpRequest_readyState: " + xhr.readyState;
TEXTAREA1.value="XmlHttpRequest_getallResponseHeaders(): " +
xhr.getAllResponseHeaders();
txt5.value="XmlHttpRequest_statusText: " + xhr.statusText
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
document.getElementById("x").innerHTML =(xhr.responseText);
} else {
alert ('There was a problem with the request.');
}
}
}
//-->
</SCRIPT>
However, when you use the DOM API, you get the following as shown:
The <body/> of the AjaxTest.htm consists of just the following controls so that the properties, the methods and their values can be displayed. The onclick event starts the process rolling. Of course the <div/> is where the innerHTML property gets written. The html for these controls is as shown:
<P><STRONG><SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>synchronous <SPAN
style="FONT-SIZE: large; COLOR: red">J</SPAN>avascript <SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>nd <SPAN
style="FONT-SIZE: large; COLOR: red">X</SPAN>ML= <SPAN
style="FONT-SIZE: large; COLOR: blue">AJAX</SPAN></STRONG></P>
<P>
</P>
<P> </P>
<P><INPUT id=button1 type=button
onclick="getPage ('http://xphtek/TestXMLHttp/Greeting.asp')"
value="Get the page by XmlHttpRequest" name=button1></P>
<P><INPUT id=txt1 style="WIDTH: 396px; HEIGHT: 22px" size=51></P>
<P><INPUT id=txt2 style="WIDTH: 395px; HEIGHT: 22px" size=50></P>
<P><TEXTAREA id=TEXTAREA1 style="WIDTH: 393px; HEIGHT: 72px"
name=TEXTAREA1 cols=42></TEXTAREA></P>
<P><INPUT id=txt5 style="WIDTH: 389px; HEIGHT: 22px"
size=50></P>
<div id="x"></div>
As previously mentioned you can reference the URL completely, as in http://xphtek/TestXMLHttp/Greeting.asp or simply by its relative URL Greeting.asp. The Greeting.asp page is a simple page as shown:
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<script language="javascript">
document.write (document.lastModified);
</script>
</HEAD>
<BODY>
<%Response.Write("<b>Welcome to programming with AJAX</b>")%><br>
<% =Date()%><br>
Hello<br></BODY>
</HTML>
Summary The tutorial has looked at the various properties and methods of this interesting XMLHttpRequest object. It goes without saying that the browser should support JavaScript, and as a developer you should appropriately warn the user to enable JavaScript, if it is not. For Microsoft IE there is the additional requirement of browser support for ActiveX objects.
For recent browsers the older method of using iframes to update parts of a page will be replaced. However iframes may still find favor with much older browsers. In this tutorial we saw most of the properties, but the lastmodified property returned null; the syntax was double checked but to no avail. Although AjaxTest.htm was coded on Visual Interdev 6.0, it is not a requirement; plain Notepad should work as well.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 61 
