js的Ajax请求实验 - 编程论坛

通过这个实例的实验，更加深了java web工程请求的路径的理解。html文件在/ajax目录中，它的请求是listemp，到了web.xml配置文件中要配置为/ajax/listemp,才能匹配。

1、界面文件emp.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>emp.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
        <script type="text/javascript">
            function xmlHttpInit(){
                var xmlHttp;
                if(window.ActiveXObject){
                    try{
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }catch(e){
                        try{
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){
                            alert("create XmlHttpRequest error!");
                        }
                    }
                }else if(window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
                }

                return xmlHttp;

            }
            function sendRequest(){
                var xmlHttp2;
                alert(">>>>>>"+xmlHttp2);
                xmlHttp2=xmlHttpInit();
                alert(">>>>>>"+xmlHttp2);
                xmlHttp2.onreadystatechange=function(){
                        alert("查看ajax状态");
                    if(xmlHttp2.readyState==4){
                    if(xmlHttp2.status==200){
                        alert("请求成功。");
                        //获取服务器返回的XML数据的Document对象
                        var doc = xmlHttp2.responseXML;
                        //var text = xmlHttp2.responseText;
                        alert(doc);//获取根元素emps
                        //获取id元素的集合
                        var ids = doc.getElementsByTagName("id");
                        //获取name元素的集合
                        var names = doc.getElementsByTagName("name");
                        clearTable();//清空表格
                        //将ids和names元素遍历，循环生成列表
                        var tb = document.getElementById("emps");
                        for(i=0;i<ids.length;i++){
                            var tb = document.getElementById("emps");
                            //插入一行tr
                            var tr = tb.insertRow(tb.rows.length);
                            //插入td
                            var id_td = tr.insertCell(tr.cells.length);
                            id_td.innerHTML = ids[i].firstChild.nodeValue;
                            //插入td
                            var name_td = tr.insertCell(tr.cells.length);
                            name_td.innerHTML = names[i].firstChild.nodeValue;
                        }
                    }
                    }
                };
                xmlHttp2.open("get","listemp");
                xmlHttp2.send(null);
            }



            //清空列表数据
        function clearTable(){
            var tb = document.getElementById("emps");
            //循环由后向前删除表格的行
            for(j=tb.rows.length-1;j>0;j--){
                tb.deleteRow(j);
            }
        }

        </script>
  </head>

  <body>
    员工列表. <br>
    <input type="button" value="显示" onclick="sendRequest()">
    <input type="button" value="清空" onclick="clearTable()">

    <table id="emps">
        <tr>
            <td>员工ID</td>
            <td>员工姓名</td>
        </tr>
    </table>
  </body>
</html>

2、配置文件web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
    xmlns="http://java.
    xmlns:xsi="http://www.
    xsi:schemaLocation="http://java.
    http://java.
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
      <servlet-name>tajax</servlet-name>
      <servlet-class>Ajax.EmpListServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>tajax</servlet-name>
      <url-pattern>/ajax/listemp</url-pattern>
  </servlet-mapping>
</web-app>

3、servlet文件 EmpListServlet.java
package Ajax;

import
import
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class EmpListServlet extends HttpServlet{

    public void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException,IOException{

        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out=response.getWriter();
        List<Emp> list=new EmpDAO().getAll();
        System.out.println("ddd");
        out.println("<emps>");
        for(Emp e:list){
            out.println("<emp>");
            out.print("<id> "+e.getId()+"</id>");
            out.print("<name>"+e.getName()+"</name>");
            out.println("</emp>");
        }
        out.println("</emps>");
//        response.setContentType("html/text");
//        PrintWriter out=response.getWriter();
//        out.print("12345");
        out.flush();
        out.close();
    }
    public void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException,IOException{
        this.doGet(request,response);

    }
}

4、模拟的Dao文件EmpDao.java

package Ajax;

import java.util.ArrayList;
import java.util.List;

public class EmpDAO {
    public List<Emp> getAll(){
        List<Emp> list=new ArrayList<Emp>();
        for(int i=0;i<10;i++){
            Emp e=new Emp();
            e.setId(""+i);
            e.setName("abc"+i);
            list.add(e);
        }
        return list;
    }
}