A complete sample program in AJAX
By: Ram Baskar
Here
is a complete AJAX example with a simple HTTP request. Our JavaScript will request an
HTML document, test.html
, which contains the text "I'm a
test." and then we'll alert()
the contents of thetest.html
file.
<script type="text/javascript" language="javascript">
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')">
Make a request
</span>
In this example:
- The user clicks the link "Make a request" in the browser;
- This
calls the
makeRequest()
function with a parameter – the nametest.html
of an HTML file in the same directory; - The
request is made and then (
onreadystatechange
) the execution is passed toalertContents()
; alertContents()
checks if the response was received and it's an OK and thenalert()
s the contents of thetest.html
file.
Note:
The line http_request.overrideMimeType('text/xml');
above
will cause Javascript Console errors in Firefox 1.5b as documented at https://bugzilla.mozilla.org/show_bug.cgi?id=311724 if
the page called by XMLHttpRequest is not valid XML (eg, if it is plain text).
If you get Syntax Error or Not Well Formed Error on that browser, and you're not trying to load an XML page from XMLHttpRequest, remove that line from your code.
Note
2:
if you are sending a request to a piece of code that will return XML, rather
than to a static XML file, you must set some response headers if your page is to
work in Internet Explorer in addition to Mozilla. If you do not set header Content-Type:
application/xml
, IE will throw a Javascript error 'Object Expected' after
the line where you try to access an XML element. If you do not set headerCache-Control:
no-cache
the browser will cache the response and never re-submit the
request, making debugging 'challenging'.
Note 3: if the http_request variable is used globally, competing functions calling makeRequest() may overwrite each other, causing a race condition. Declaring the http_request variable local to the function and passing it to the alertContent() function prevents the race condition.
Note 4: To register the call back function onreadystatechange, you cannot have any argument:
http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (simultaneous request)
http_request.onreadystatechange = alertContents(http_request); //2 (does not work)
http_request.onreadystatechange = alertContents; //3 (global variable)
Method
1 allows to have several requests done in simultaneously, method 2 will not
work, method 3 is used if http_request is a global variable Archived Comments
Most Viewed Articles (in Ajax ) |
Latest Articles (in Ajax) |
Comment on this tutorial