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 »
Stylus Studio® 2010 XML Enterprise Suite raises the bar for productivity in XML development tools.
Millions of XML developers and data integration specialists turn to Stylus Studio's comprehensive and intuitive
XML toolset to tackle today's advanced XML data transformation and aggregation challenges.
|
- XML Pipeline Editor, Debugger and Code Generator
- DataDirect XML Converters
- XQuery Mapper, Editor, Debugger, and Profiler
- XSLT Mapper, Editor, Debugger, Designer, and Profiler
- Java and C# for .Net Code Generation
- XML Schema Designer With Documentation Generator
- XML Editor With Full XPath Integration
Download a free trial now
|
|
