用AJAX异步交互返回xml文件从jsp页面中读取并用表格显示
用ajax的异步交互去获取用hibernate的技术得到的数据库中的值并且用xml的形式返回jsp页面，用dom元素读取并用表格的形式显示
这里需要注意的是hibernate的搭建，我在搭建hibernate的时候得到一个结论，在MyEclipse8.6和MyEclipse9.0中使用的hibernate.cfg.xml中的语句不一样。要注意！最好是用工具生成！
在用AJAX技术来实践异步交互，用七步，在写的其中，要注意该有分号的有，不该有的别有。
（1）创建xmlhttpRequest对象
因为ajax其实就是xmlhttpRequest，所以要创建xmlhttpRequest
（1）
（2） //创建xmlHttpRequest对象
（3） function createXMLHttpRequest() {
（4） var xmlHttp;
（5） try {
（6） //在firefox opera等非浏览器中运行的
（7） xmlHttp = new XMLHttpRequest();
（8）
（9） } catch (ex) {
（10） try {
（11） //在IE中运行 运行的是第二个版本
（12） xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
（13） } catch (e) {
（14） // 在IE中运行第一个版本
（15） xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
（16） }
（17） }
（18） return xmlHttp;
（19） }
（2）使用的html代码
<body>
<div align="center">
<h1>
员工信息
</h1>
<br />
<input type="button" value="查询员工" id="btnEmp" />
<br />
<br />
<br />
<div id="list">
<table id="empList" border="1px">
</table>
</div>
</div>
</body>
（3）初始化对象并通过触发事件来请求到servlet中
//页面加载并调用匿名函数
window.onload = function() {
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
var btnEmpNode = document.getElementById("btnEmp");
btnEmpNode.onclick = function() {
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//通过判断返回的状态码来 验证返回的页面是否正确
if (xmlHttp.status == 200) {
var xmlDoc = xmlHttp.responseXML;
//第六步：客户端接受
var empNodes = xmlDoc.getElementsByTagName("emp");
var len = empNodes.length;
//第七步：修改内容
for ( var i = 0; i < len; i++) {
//第一种方法是从获取到的dom元素中读取出来 ，但是读取的是每一个emp下的所有的的字符，因为输出不可以换行，所以读取到jsp页面的没有table的效果
//var empTextNodes = empNodes[i].textContent;
//alert(empTextNodes);
//所以用到第二种方法 ：先得到emp下的子标签，在通过子标签的属性得到text文本
//创建tr标签
var trNodes = document.createElement("tr");
//得到的是emp的子节点
var childrenNode = empNodes[i].children;
var length = childrenNode.length;
for ( var j = 0; j < length; j++) {
//动态创建td节点
var tdNodes = document.createElement("td");
//获取到子节点中的的text
var childvalue = childrenNode[j].firstChild.nodeValue;
//创建文本，把获取大的text放到创建的文本中
var value = document.createTextNode(childvalue);
//把value值放到td中
tdNodes.appendChild(value);
//把td放到tr中
trNodes.appendChild(tdNodes);
}
//获取table的id
var empListNodes = document.getElementById("empList");
//把tr插入到table中
empListNodes.appendChild(trNodes);
}
}
}
}
//第二步：规定请求的参数
xmlHttp.open("GET", "./employeeServlet.do?timeStamp="
+ new Date().getTime(), true);
//在这里用的是get方法，不用post方法
xmlHttp.send(null);
}
}
在servelt中获取请求和应答分别是第四步和第五步
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
List<Employee> entities = employeeServlet.findAll();
PrintWriter out = response.getWriter();
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<emps>");
for (int i = 0; i < entities.size(); i++) {
Employee entity = entities.get(i);
out.println("<emp id='" + entity.getId() + "'>");
out.println("<name>" + entity.getHrName() + "</name>");
out.println("<sex>" + entity.getHrSex() + "</sex>");
out.println("<age>" + entity.getHrAge() + "</age>");
out.println("<birth>"+entity.getHrBirth()+"</birth>");
out.println("<salary>" + entity.getHrSalary() + "</salary>");
out.println("</emp>");
}
out.println("</emps>");
out.flush();
out.close();
}
|
