获取员工列表（AJAX技术+JSON格式）_H5之家 - 中国HTML5教程资源分享第一站

获取员工列表（AJAX技术+JSON格式） (2010-06-25 20:11:39)

标签： ajax xml java 开源框架 json servlet html 分类： JAVA高级软件工程师

需求分析：设计并实现一个web程序,模拟从实现从数据库中取员工信息，并显示在页面中。要求可以异步刷新。

系统分析与设计：设计一个Servlet(EmpServlet)用于生成JSON文件，存放员工信息。并将JSON发送到HTML页面（emplist.html)。emplist.html中的AJAX发送请求给Servlet,Servlet处理后返回结果，emplist.html中的AJAX响应请求。

JSON格式的说明：本程序不采用XML格式了，改用JSON格式。其优点是便于HTML调用。

JSON数组格式

var JSONArray=[{"name":"xuliang","no":"1","sex":"male"},
{"name":"ice","no":"2","sex":"female"},
{"name":"sisi","no":"3","sex":"male"}]

调用时JSONArray[0].name or JSONArray[0].sex等。

本程序需要导入开源JSON的jar包：json-lib-2.2.3-jdk15.jar

//发送Ajax请求
function sendRequest(){...}

//AJax响应处理
function myshow(){....}

//emplistJSON.html中的Ajax发送请求到Servlet，并相应处理

1、emplistJSON.html
<html>
<head>
  <script>
var xmlReq=false;
function sendRequest(){
if(window.ActiveXObject){
  xmlReq=new ActiveXObject("Msxml2.XMLHTTP");
}else{
  xmlReq=new XMLHttpRequest();
}
if(!xmlReq){
  alert("create new xmlRequest failed.");
  return;
}
//AJAX SEND REQUEST TO A SERVLET.
xmlReq.open("post","servlet/EmpServletJson");
xmlReq.setRequestHeader("Content-Type", "application/w-www-form-urlencoded");
xmlReq.onreadystatechange=showme;
xmlReq.send(null);
}
function showme(){

//先清除浏览器表单中原有记录

clearTable();
var tbObj=document.getElementByIdx_x("table");
//取得SERVLET发送过来的JSON格式对象
var xmlDoc=xmlReq.responseText;
var emps=eval_r("("+xmlDoc+")");
for(i=0;i<emps.length;i++){
//先插入行，再插入列，再给单元格赋值。
var newRow=tbObj.insertRow(tbObj.rows.length);
var new_id=newRow.insertCell(newRow.cells.length);
new_id.innerHTML=emps[i].no;
var new_name=newRow.insertCell(newRow.cells.length);
new_name.innerHTML=emps[i].name;
var new_sex=newRow.insertCell(newRow.cells.length);
new_sex.innerHTML=emps[i].sex;
}
}
function clearTable(){
var tbObj=document.getElementByIdx_x("table");

for(var i=tbObj.rows.length-1;i>0;i--){
tbObj.deleteRow(i);

}
}
</script>
</head>
<body>
  <input type="button" value="Clear Employeelist" />
  <input type="button" value="Get EmployeeList" />
  <table background="red">
   <tr>
    <td>
     编号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
   </tr>
  </table>
</body>
</html>

//EmpServletJSON用于处理AJAX请求，并将JSON对象回AJAX。

2、EmpServletJSON

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;

public class EmpServletJson extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/plain;charset=utf-8");
  request.setCharacterEncoding("utf-8");
  PrintWriter out = response.getWriter();
  EmpDAO dao = new EmpDAO();
  // get all employees records from database.
  List<Emp> emps = dao.findAll();
  // transfer from object emps to Json format.
  JSONArray jArray = JSONArray.fromObject(emps);
  out.println(jArray.toString());
  // result of jArray.toString()
  // [{"name":"xuliang","no":"1","sex":"male"},
  // {"name":"ice","no":"2","sex":"female"},
  // {"name":"sisi","no":"3","sex":"male"}]
  System.out.println(jArray.size());
}