最近写了个数据库增删改查的小程序,有几个地方碰到了难题,今天整理下来。

    主要实现的功能是在一个页面上实现数据库查询、删除、插入、更改。而且在操作时尽可能少的刷新页面,主要是用AJAX技术。

     难题1:查询数据库数据时如何解析XML数据。

     首先生成一个请求对象,请求对象向服务器发送请求,服务器端的servlet会查询出数据库所有的数据,这些数据需要表示成为XML数据。

    conn = connect();
     stmt = conn.createStatement();
     String sql = "select * from Tb";
     rs = stmt.executeQuery(sql);
     PrintWriter out = response.getWriter(); 
     out.println("<?xml version='1.0' encoding='UTF-8'?>"); 
     out.println("<table>"); 
     while(rs.next()){ 
      out.println("<device>"); 
      out.println("<id>"+String.valueOf(rs.getInt("id"))+"</id>"); 
      out.println("<deviceid>"+String.valueOf(rs.getInt("deviceid"))+"</deviceid>"); 
      out.println("<subdevicename>"+rs.getNString("subdevicename")+"</subdevicename>"); 
      out.println("<subdevicetag>"+rs.getNString("subdevicetag")+"</subdevicetag>"); 
      out.println("<orderno>"+String.valueOf(rs.getInt("orderno"))+"</orderno>"); 
      out.println("</device>"); 
      }
      out.println("</table>"); 
      out.flush(); 
      out.close(); 

    不要忘记这一句:response.setContentType("text/xml");
                    response.setCharacterEncoding("utf-8");

    然后浏览器得到服务器的响应之后,要解析XML数据,IE浏览器和FireFox浏览器解析xml的方式不同,所以可以先判断一下浏览器的类型。

    if(navigator.userAgent.indexOf("MSIE")>0) {   //IE浏览器
          var doc = new ActiveXObject("MSxml2.DOMDocument")
          doc.loadXML(xmlhttp.responseText);
          devices=doc.getElementsByTagName("device");
     }
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){   //firefox浏览器
          devices=xmlhttp.responseXML.getElementsByTagName("device");
     }

    难题2:xml数据如何表示为表格

     for(i=0;i<device.length;i++){
       id = device[i].getElementsByTagName("id")[0].firstChild.nodeValue;
       deviceid = device[i].getElementsByTagName("deviceid")[0].firstChild.nodeValue;
        subdevicename = device[i].getElementsByTagName("subdevicename")[0].firstChild.nodeValue;
        subdevicetag = device[i].getElementsByTagName("subdevicetag")[0].firstChild.nodeValue;
       orderno = device[i].getElementsByTagName("orderno")[0].firstChild.nodeValue;
     addTableRow(id, deviceid, subdevicename,subdevicetag,orderno);
    }

    function addTableRow(id, deviceid, subdevicename,subdevicetag,orderno) {
            var row = document.createElement("tr");
            var cell = createCellWithText(id);
            row.appendChild(cell);
            cell = createCellWithText(deviceid);
            row.appendChild(cell);
            cell = createCellWithText(subdevicename);
            row.appendChild(cell);
            cell = createCellWithText(subdevicetag);
            row.appendChild(cell);
            cell = createCellWithText(orderno);
            row.appendChild(cell);
            cell = createCellShanChu(id);
            row.appendChild(cell);
            cell = createCellGengGai();
            row.appendChild(cell);
            document.getElementById("tt").appendChild(row);
        }
               
        function createCellWithText(text) {
            var cell = document.createElement("td");
            cell.innerHTML="<input type='text' value='"+text+"'>";
            return cell;
        }
        function createCellShanChu(id) {
            var cell = document.createElement("td");
            cell.innerHTML="<button οnclick='shanchu("+id+",this.parentElement.parentElement.rowIndex);'>删除</button>";
            return cell;
        }
        function createCellGengGai() {
            var cell = document.createElement("td");
            cell.innerHTML="<button οnclick='validate(this.parentElement.parentElement.rowIndex);'>更改</button>";
            return cell;
        }