AJAX Browser Support
The keystone of AJAX is the XMLHttpRequest object
The XMLHttpRequest
All new browsers support a new built-in JavaScript XMLHttpRequest object
(IE5 and IE6 uses an ActiveXObject).
This object can be used to request information (data) from a server.
Let's update our HTML file with a JavaScript in the <head> section:
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
} |
Example explained
Try to create a XMLHttpRequest object:
xmlhttp=new XMLHttpRequest()
If not (if IE5 or IE6) create an ActiveXObject:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
Open the request object:
xmlhttp.open("GET",url,false)
Send your request to your server:
xmlhttp.send(null)
Update your page with the response from the server:
document.getElementById('test').innerHTML=xmlhttp.responseText
Note: The code above can be used every time you need to create an XMLHttpRequest object, so
just copy and paste it whenever you need it.
In the next chapter you will learn more about the XMLHttpRequest.
All Together Now
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button>
</body>
</html> |
Try it yourself »
Whether you're new to XML or already an advanced user,
the user-friendly views and powerful entry helpers,
wizards, and debuggers in XMLSpy are designed to meet your XML
and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- And much more!
Download a free trial today!
|
|
|
|
