ajax实现无刷新验证用户名是否存在

 

实现用的是jdbc+jsp+servlet,数据库用的是mysql

表就2个字段

实现原理获得text的值后,通过调用servlet查询数据库里是否存在,在通过xml传到前台

OperationName.java

response.setContentType("text/xml;charset=UTF-8")这句很重要,没有他前台获得不到xml,之前做的时候没有加

所以前台获得不到xml

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
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 OperationName extends HttpServlet
...{

    /** *//**
     * Constructor of the object.
     */
    public OperationName()
    ...{
        super();
    }

    /** *//**
     * Destruction of the servlet. <br>
     */
    public void destroy()
    ...{
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /** *//**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    ...{
        String names = request.getParameter("names");
        Collection students = null;
        Connection con = null;
        Statement st = null;
        ResultSet rs = null;
        try
        ...{ 
            Class.forName("org.gjt.mm.mysql.Driver");
            con = DriverManager.getConnection("jdbc:mysql:"+
                    "//127.0.0.1:3306/test?useUnicode=true&amp;characterEncoding=GBK","root","eetrust");
            st = con.createStatement();
            rs = st.executeQuery("select count(*) from test where name='"+names+"'");
            StringBuffer result = new StringBuffer();
            result.append("<OperationNames>");
            System.out.println(result);
            while(rs.next())
            ...{
                int num = rs.getInt(1);
                result.append("<OperationName>" + num + "</OperationName>");    
            }
            result.append("</OperationNames>");
            String responseHtml = result.toString();
            response.setCharacterEncoding( "UTF-8");
            response.setContentType("text/xml;charset=UTF-8");
            response.setHeader("Pragma","No-cache"); 
            response.setHeader("Cache-Control","no-cache"); 
            response.setDateHeader("Expires", 0); 
            response.getWriter().write(responseHtml);
        }catch(Exception e)
        ...{
            e.printStackTrace();
        }finally
        ...{
            try
            ...{
                rs.close();
                  st.close();
                  con.close();
            }catch(Exception e)
            ...{
                e.printStackTrace();
            }
        }    
    }

    /** *//**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    ...{
        this.doGet(request,response);
    }

    /** *//**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occure
     */
    public void init() throws ServletException
    ...{
        // Put your code here
    }

}

 index.jsp

ajax("servlet/OperationName?names=" + newOperationName + "&form=form1");"&form=form1"可去掉

<%...@ page language="java" contentType="text/html;charset=GBK"%>
<%...
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <Script language="javascript">...
        <!--
        function ajax(url)...{
            if (window.ActiveXObject) ...{                    
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                
            }else if(window.XMLHttpRequest)...{
                xmlHttp = new XMLHttpRequest();
            }
            xmlHttp.onreadystatechange = processResponse;
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
        }
        function processResponse()...{
            if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")...{
                if(xmlHttp.status==200)
                ...{
                    var result = xmlHttp.responseXML;
                    var operationName = result.getElementsByTagName("OperationName");
                    if(operationName[0].firstChild.nodeValue == "0")...{
                        document.all.ShowInfo.innerHTML = "<B>不存在<B>";
                    }else...{
                        //alert(22222);
                        document.all.ShowInfo.innerHTML = "<B>存在<B>";
                    }
                        //document.all.ShowInfo.innerHTML = "<font color="red">*</font>";
                    
                }
                return true;
            }
        }
        function aaa()
        ...{
            var newOperationName = document.all.names.value;
            ajax("servlet/OperationName?names=" + newOperationName + "&form=form1");
        }
-->
    </Script>
  </head>
  
  <body>
  <form action="index.jsp" >
  <table>
    <tr>
    <td>
    <input type="text" name="names" value="" Onblur="aaa()">
    </td>
    </tr>
    <tr>
    <TD bgcolor="#EEEEEE" id="ShowInfo">
    asdas
    </TD>
    </tr>
    <tr>
    <!--input type="button" onclick="aaa();" value="提交"-->
     </tr>
     </table> 
  </form>
  </body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
    <servlet-name>OperationName</servlet-name>
    <servlet-class>servlet.OperationName</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>OperationName</servlet-name>
    <url-pattern>/servlet/OperationName</url-pattern>
</servlet-mapping>
</web-app>

 刚刚接触ajax不久,如有不合理的地方还望指点,谢谢!