The XMLhttprequest
All new browsers support a new built-in JavaScript XMLHttpRequest object (IE5
and IE6 use an ActiveXObject).
The XMLHttpRequest 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.response-Text;
}
Try to create an 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.response-Text
“AJAX—the XMLHttpRequest Object”, you learn more
about the XMLHttpRequest.
all together Now
The following example puts what you’ve learned all together.
Your results are shown in Figure 29.1.
Try it yourself >>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
The preceding code can be used every time you need to create an XML
HttpRequestobject, so just copy and paste it whenever you need it.
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById(‘test’).innerHTML=xmlhttp.response-Text;
}
</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>
All new browsers support a new built-in JavaScript XMLHttpRequest object (IE5
and IE6 use an ActiveXObject).
The XMLHttpRequest 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.response-Text;
}
Try to create an 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.response-Text
“AJAX—the XMLHttpRequest Object”, you learn more
about the XMLHttpRequest.
all together Now
The following example puts what you’ve learned all together.
Your results are shown in Figure 29.1.
Try it yourself >>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
The preceding code can be used every time you need to create an XML
HttpRequestobject, so just copy and paste it whenever you need it.
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById(‘test’).innerHTML=xmlhttp.response-Text;
}
</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>
0 comments:
Post a Comment