用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代码
员工信息
"button" value="查询员工" id="btnEmp" />
(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
PrintWriter out = response.getWriter();
out.println("");
out.println("
for (int i = 0; i < entities.size(); i++) {
Employee entity = entities.get(i);
out.println("
out.println("
out.println("
out.println("
out.println("
out.println("
out.println("");
}
out.println("");
out.flush();
out.close();
}