用AJAX异步交互返回xml文件从jsp页面中读取并用表格显示

lyunabc

浏览: 563244 次
性别:

最近访客更多访客>>

u012363178

jacktan123

403304773

shang2012

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用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>

<h1>

员工信息

</h1>

<br />

<br />

</table>

</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();

}

分享到：

使用数组和范型来实现栈结构？ | dom加xml的三级联动源码

2012-02-24 10:48
浏览 823
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论