📄 demoxml.jsp
字号:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>读取XML内容片段</title>
<script type="text/javascript">
/* 创建一个新的 XMLHttpRequest 去调用远程的WEB服务*/
var xmlHttp = false;
/* 在 Microsoft 浏览器上创建 XMLHttpRequest 对象 */
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
/* 处理 Mozilla 和非 Microsoft 浏览器 */
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp){
alert("AJAX服务对象创建失败！");
}
/*
* 发出请求
*/
function loadUser() {
// 建立远程连接的WEB对应的URL地址
var url = "AjaxXmlDemoServlet?"+new Date().getTime();
// 打开一个对服务器的连接
xmlHttp.open("GET", url, true);
// 设置一个函数，当从服务器读取数据后返回时调用
xmlHttp.onreadystatechange = updatePage;
// 开始发送HTTP请求
xmlHttp.send(null);
}
/*
* 处理服务器响应
*/
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseXML;
dealXML(response);
}
}
//处理XML内容
function dealXML(xml){
var tbody = document.getElementById("tbody");
while (tbody.childNodes.length > 0) {
tbody.removeChild(tbody.firstChild);
}
var users = xml.getElementsByTagName("user");
for(var i=0;i<users.length;i++) {
var user = users[i];
var id = user.getElementsByTagName("id")[0].firstChild.data;
var name = user.getElementsByTagName("name")[0].firstChild.data;
var sex = user.getElementsByTagName("sex")[0].firstChild.data;
var newTr = document.createElement("tr");
var newTd = document.createElement("td");
newTd.innerHTML = id;
newTr.appendChild(newTd);
newTd = document.createElement("td");
newTd.innerHTML=name;
newTr.appendChild(newTd);
newTd = document.createElement("td");
newTd.innerHTML=sex;
newTr.appendChild(newTd);
tbody.appendChild(newTr);
}
}
</script>
</head>
<body>
<input type="button" value="AJAX加载XML数据" onclick="loadUser();">
<br>
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<thead>
<tr>
<td colspan="4" align="center"><strong>用户信息</strong></td>
</tr>
<tr>
<td width="25%" bgcolor="#abcdef">编号</td>
<td width="25%" bgcolor="#abcdef">姓名</td>
<td width="25%" bgcolor="#abcdef">性别</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -