Ajax结合xml的应用

写这篇东西，是因为自己在学习Ajax结合xml操作数据库遇到不少问题，现把我已经完成，并通过调试的例子写下来，供大家参考倒也不敢说，可是对于Ajax入门学习者来说，看一看，踩一踩，大约也有一定的作用的。

本例子的编写并无十分规范而言，纯粹为实现数据库(这里选用MySQL)的查询、插入和删除功能而做的实验。query.jsp界面提供三个按钮和两个文本框，其中两个文本框分别为输入查询和删除操作的关键字而设，而插入按钮，更只是为了在后台同时插入50条记录。因此从功能上讲，表面上看来十分的平白。下面将主要介绍查询功能，该功能主要通过在前台输入关键字，利用Ajax发送XMLHttpRequest请求，然后在后台生成结果集，并存储在XML当中，并返回到客户端，客户端通过Ajax里获取XML文件，并转换为HTML显示出来。下面将给出关键代码。

 注：本实例源码将以资源(命名为：Ajax结合xml的应用源码)的形式上传，欢迎大家进来下载（免费）。

首先将发送请求：

if(type==1){//查询类型为1
    var keyword=document.forms["queryForm"].keyword.value;
    var keywordPattern = //w/;
    if(!keywordPattern.exec(keyword)){
     alert("请输入关键字！");
     return false;
    }
    sendString="keyword="+keyword; //关键字
   }else if(type==2){//删除类型为2
    var deluser = document.forms["queryForm"].deluser.value;
    sendString="deluser="+deluser;
   }
            var url = "../../java_tut/Query?type="+type+"&"+sendString; //向后台Servlet Query发送请求
   xmlHttp.open("POST", url, true);
            xmlHttp.onreadystatechange = QueryHandle; //处理操作
            xmlHttp.send(null);

服务器进行处理：

String keyword = request.getParameter("keyword");
         try{
           MySqlConn mySqlConn = new  MySqlConn();      //数据库操作javaBean
     String sqlQuery = "select * from member where username like '%"+keyword+"%'";//requery after
           ResultSet rs = mySqlConn.getResultSet(sqlQuery);
     //out.println("<table border=1><tr><th>username</th><th>password</th><th>gender</th><th>pwdQuestion</th><th>pwdAnswer</th><th>hobbies</th><th>operTime</th>");
    while(rs.next())
    {//循环显示记录
     member = new Member(); //自定义的javaBean，用以存放个人信息
     member.setUsername(rs.getString("username"));
     member.setPassword(rs.getString("password"));
     member.setGender(rs.getString("gender"));
     member.setPwdQuestion(rs.getString("pwdQuestion"));
     member.setPwdAnswer(rs.getString("pwdAnswer"));
     member.setHobbies(rs.getString("hobbies"));
     member.setOpertime(rs.getString("opertime"));
     vMember.add(member);
    }
   //out.println("</table>");
   out.print(this.parasToXML(vMember)); //转换为XML格式
   rs.close();
   mySqlConn.closeConn();
         }catch(SQLException e){
          //out.println("<tr><td>error</td></tr>"+e.getMessage());
         }

parasToXML转换XML格式的方法如下：

public String parasToXML(Vector v){
      StringBuffer buf = new StringBuffer();
      buf.append("<?xml version=/"1.0/" encoding=/"utf-8/"?>");
      buf.append("<root>");
      for(int i=0;i < v.size();i++){
       Member member = (Member)v.get(i);
       buf.append("<message id=/""+member.getUsername()+"/">");
       buf.append("<username>"+member.getUsername()+"</username>");
       buf.append("<password>"+member.getPassword()+"</password>");
       buf.append("<gender>"+member.getGender()+"</gender>");
       buf.append("<pwdQuestion>"+member.getPwdQuestion()+"</pwdQuestion>");
       buf.append("<pwdAnswer>"+member.getPwdAnswer()+"</pwdAnswer>");      
       buf.append("<hobbies>"+member.getHobbies()+"</hobbies>");
       buf.append("<opertime>"+member.getOpertime()+"</opertime>");
       buf.append("</message>");
      }
      buf.append("</root>");
      return buf.toString();
     }

客户端接收服务器端的响应，进行如下处理：

if(xmlHttp.readyState == 4){
    if(xmlHttp.status == 200){
     //var mes = xmlHttp.responseText;
     if(requestType == 1){
      var mes = parasData(); //将XML转换为HTML方法
      document.getElementById("queryResult").innerHTML = mes;

其中parasData方法如下：

function parasData(){
   var xmlData = xmlHttp.responseXML;
   var message = xmlData.getElementsByTagName("message");
   var mes = "<table border=1><tr><th>username</th><th>password</th><th>gender</th><th>pwdQuestion</th><th>pwdAnswer</th><th>hobbies</th><th>operTime</th></tr>";
   //alert(message.length);
   for(var i=0;i<message.length;i++){
    var usernameNode = message[i].getElementsByTagName("username");
    var passwordNode = message[i].getElementsByTagName("password");
    var genderNode = message[i].getElementsByTagName("gender");
    var pwdQuestionNode = message[i].getElementsByTagName("pwdQuestion");
    var pwdAnswerNode = message[i].getElementsByTagName("pwdAnswer");
    var hobbiesNode = message[i].getElementsByTagName("hobbies");
    var opertimeNode = message[i].getElementsByTagName("opertime");
    mes+="<tr>";
    mes+="<td>"+usernameNode[0].firstChild.nodeValue+"</td>";
    mes+="<td>"+passwordNode[0].firstChild.nodeValue+"</td>";
    mes+="<td>"+genderNode[0].firstChild.nodeValue+"</td>";
    mes+="<td>"+pwdQuestionNode[0].firstChild.nodeValue+"</td>";
    mes+="<td>"+pwdAnswerNode[0].firstChild.nodeValue+"</td>";
    mes+="<td>"+hobbiesNode[0].text+"</td>";
    mes+="<td>"+opertimeNode[0].firstChild.nodeValue+"</td>";
    mes+"</tr>";
   }
   mes +="</table>";
   return mes;
  }

最后将在<span id="queryResult"></span>将显示查询结果，比如在客户端输入查询关键字“bbjs1”，然后点击“Query”按钮，将得到如下结果：

 

username	password	gender	pwdQuestion	pwdAnswer	hobbies	operTime
bbjs10	111111	m	pwdQ	pwdA	swimming	2008-01-17 11:42:52.0
bbjs12	111111	m	pwdQ	pwdA	swimming	2008-01-17 11:42:52.0
bbjs14	111111	m	pwdQ	pwdA	swimming	2008-01-17 11:42:52.0
bbjs16	111111	m	pwdQ	pwdA	swimming	2008-01-17 11:42:52.0
bbjs18	111111	m	pwdQ	pwdA	swimming	2008-01-17 11:42:52.0

  注：本实例源码将以资源(命名为：Ajax结合xml的应用源码)的形式上传，欢迎大家进来下载（免费）。