本文介绍了一种使用JavaScript中的XmlHttpRequest对象从服务器获取数据并直接更新网页内容的方法。通过示例代码展示了如何设置请求、接收服务器响应并将HTML内容直接填充到页面指定元素中。
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Using responseText with innerHTML</title>
<script language="JavaScript" type="text/javascript">
//创建 XmlHttpRequest 对象
function createXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
else {
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
var receiveReq = createXmlHttpRequestObject();
function GetinnerHTML() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//建立对服务器的调用，call to SayHello.html(555)
receiveReq.open("GET", 'innerHTML.xml', true);
//每个改变时都会触发这个事件处理器，通常会调用一0个javascript函数！(666) Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = CallBack;
//向服务器发送请求
receiveReq.send(null);
}
}
//CallBack()
function CallBack() {
if (receiveReq.readyState == 4) {
document.getElementById('span_result').innerHTML = receiveReq.responseText;
}
}
</script>
</head>
<body>
<a href="javascript:GetinnerHTML();">GetInnerHTML</a><br />
<!--<span id="span_result"></span>-->
<div id="span_result"></div>
</body>
</html>
属性responseText将响应提供为一个串，所以innerHTML.xml可以是一个“HelloWorld”字符串，也可以是一个表格：
<table border="1">
<tbody>
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<td>Waterskiing</td>
<td>Dock #1</td>
<td>9:00 AM</td>
</tr>
<tr>
<td>Volleyball</td>
<td>East Court</td>
<td>2:00 PM</td>
</tr>
<tr>
<td>Hiking</td>
<td>Trail 3</td>
<td>3:30 PM</td>
</tr>
</tbody>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Using responseText with innerHTML</title> <script language="JavaScript" type="text/javascript"> //创建 XmlHttpRequest 对象 function createXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); //Not IE } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); //IE } else { alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox."); } } var receiveReq = createXmlHttpRequestObject(); function GetinnerHTML() { if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { //建立对服务器的调用，call to SayHello.html(555) receiveReq.open("GET", 'innerHTML.xml', true); //每个改变时都会触发这个事件处理器，通常会调用一0个javascript函数！(666) Set the function that will be called when the XmlHttpRequest objects state changes. receiveReq.onreadystatechange = CallBack; //向服务器发送请求 receiveReq.send(null); } } //CallBack() function CallBack() { if (receiveReq.readyState == 4) { document.getElementById('span_result').innerHTML = receiveReq.responseText; } } </script></head><body><a href="javascript:GetinnerHTML();">GetInnerHTML</a><br /><!--<span id="span_result"></span>--><div id="span_result"></div></body></html>属性responseText将响应提供为一个串，所以innerHTML.xml可以是一个“HelloWorld”字符串，也可以是一个表格：
<table border="1"> <tbody> <tr> <th>Activity Name</th> <th>Location</th> <th>Time</th> </tr> <tr> <td>Waterskiing</td> <td>Dock #1</td> <td>9:00 AM</td> </tr> <tr> <td>Volleyball</td> <td>East Court</td> <td>2:00 PM</td> </tr> <tr> <td>Hiking</td> <td>Trail 3</td> <td>3:30 PM</td> </tr> </tbody></table>
扫一扫
4631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
