AJAX,JSON用户名校验

效果

开发结构

1，src部分有两个包dao和servlet

1.1dao包下有两个数据库工具类文件

SqlHelper.java

 package org.guangsoft.dao;

 import java.io.InputStream;
 import java.sql.CallableStatement;
 import java.sql.Connection;
 import java.sql.DriverManager;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;
 import java.sql.Statement;
 import java.util.Properties;
 /**
  *
  * @author guanghe
  */
 public class SqlHelper
 {
     //定义连接资源
     private static Connection ct = null;
     private static PreparedStatement ps = null;
     private static CallableStatement cs = null;
     private static ResultSet rs = null;

     //定义配置参数
     private static String driver = null;
     private static String url = null;
     private static String username = null;
     private static String password = null;

     private static Properties pp = null;
     private static InputStream is = null;

     //读取配置参数，加载驱动
     static
     {
         try
         {
             pp = new Properties();
             is = SqlHelper.class.getClassLoader().getResourceAsStream("org/guangsoft/dao/db.properties");
             pp.load(is);
             driver = pp.getProperty("driver");
             url = pp.getProperty("url");
             username = pp.getProperty("username");
             password = pp.getProperty("password");
             Class.forName(driver);
         }
         catch (Exception e)
         {
             e.printStackTrace();
             System.exit(0);
         }
         finally
         {
             try
             {
                 is.close();
             }
             catch (Exception e)
             {
                 e.printStackTrace();
             }
             is = null;
         }
     }

     //获取连接
     public static Connection getConnection()
     {
         try
         {
             ct = DriverManager.getConnection(url, username, password);
         }
         catch (Exception e)
         {
             e.printStackTrace();
         }
         return ct;
     }

     public static PreparedStatement getPs()
     {
         return ps;
     }

     public static ResultSet getRs()
     {
         return rs;
     }

     //执行DQL查询
     public static ResultSet executeQuery(String sql, String[] parameters)
     {
         try
         {
             ct = getConnection();
             ps = ct.prepareStatement(sql);
             if (parameters != null)
             {
                 for (int i = 0; i < parameters.length; i++)
                 {
                     ps.setString(i + 1, parameters[i]);
                 }
             }
             rs = ps.executeQuery();
         }
         catch (Exception e)
         {
             e.printStackTrace();
             throw new RuntimeException(e.getMessage());
         }
         return rs;
     }

     //执行DML更新
     public static int executeUpdate(String sql, String[] parameters)
     {
         try
         {
             ct = getConnection();
             ps = ct.prepareStatement(sql);
             if (parameters != null)
             {
                 for (int i = 0; i < parameters.length; i++)
                 {
                     ps.setString(i + 1, parameters[i]);
                 }
             }
             return ps.executeUpdate();
         }
         catch (Exception e)
         {
             e.printStackTrace();
             throw new RuntimeException(e.getMessage());
         }
         finally
         {
             close(ct, ps, rs);
         }
     }

     //执行DML批处理
     public static int executeUpdate2(String[] sql, String[][] parameters)
     {
         try
         {
             ct = getConnection();
             ct.setAutoCommit(false);

             for (int i = 0; i < sql.length; i++)
             {

                 if (null != parameters[i])
                 {
                     ps = ct.prepareStatement(sql[i]);
                     for (int j = 0; j < parameters[i].length; j++)
                     {
                         ps.setString(j + 1, parameters[i][j]);
                     }
                     return ps.executeUpdate();
                 }

             }
             ct.commit();
         }
         catch (Exception e)
         {
             e.printStackTrace();
             try
             {
                 ct.rollback();
             }
             catch (Exception e1)
             {
                 e1.printStackTrace();
             }
             throw new RuntimeException(e.getMessage());
         }
         finally
         {
             close(ct, ps, rs);
         }
         return 0;
     }

     //执行存储过程
     public static CallableStatement callPro1(String sql, String[] parameters)
     {
         try
         {
             ct = getConnection();
             cs = ct.prepareCall(sql);
             if (parameters != null)
             {
                 for (int i = 0; i < parameters.length; i++)
                 {
                     cs.setObject(i + 1, parameters[i]);
                 }
             }
             cs.execute();
         }
         catch (Exception e)
         {
             e.printStackTrace();
             throw new RuntimeException(e.getMessage());
         }
         finally
         {
             close(ct, cs, rs);
         }
         return cs;
     }

     //执行高级存储过程
     public static CallableStatement callPro2(String sql, String[] inparameters,
             Integer[] outparameters)
     {
         try
         {
             ct = getConnection();
             cs = ct.prepareCall(sql);
             if (inparameters != null)
             {
                 for (int i = 0; i < inparameters.length; i++)
                 {
                     cs.setObject(i + 1, inparameters[i]);
                 }
             }
             if (outparameters != null)
             {
                 for (int i = 0; i < outparameters.length; i++)
                 {
                     cs.registerOutParameter(inparameters.length + 1 + i, outparameters[i]);
                 }
             }
             cs.execute();
         }
         catch (Exception e)
         {
             e.printStackTrace();
             throw new RuntimeException(e.getMessage());
         }
         finally
         {
             close(ct, cs, rs);
         }
         return cs;
     }

     //关闭所有资源连接
     public static void close(Connection ct, Statement ps, ResultSet rs)
     {
         if (rs != null)
         {
             try
             {
                 rs.close();
             }
             catch (Exception e)
             {
                 e.printStackTrace();
             }
             rs = null;
         }
         if (ps != null)
         {
             try
             {
                 ps.close();
             }
             catch (Exception e)
             {
                 e.printStackTrace();
             }
             ps = null;
         }
         if (null != ct)
         {
             try
             {
                 ct.close();
             }
             catch (Exception e)
             {
                 e.printStackTrace();
             }
             ct = null;
         }
     }
 }

db.properties

 driver = com.mysql.jdbc.Driver
 url = jdbc:mysql://localhost:3306/student
 username = root
 password =root

1.2servlet包下有一个文件Servlet

CheckUname.java

 package org.guangsoft.servlet;

 import java.io.IOException;
 import java.io.PrintWriter;
 import java.sql.Connection;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;

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

 import org.guangsoft.dao.SqlHelper;

 public class CheckUname extends HttpServlet
 {

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

     public void doPost(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException
     {
         processRequest(request, response);
     }

     protected void processRequest(HttpServletRequest request,
             HttpServletResponse response) throws ServletException, IOException
     {
         request.setCharacterEncoding("UTF-8");
         response.setCharacterEncoding("UTF-8");
         response.setContentType("text/html; charset=utf-8");
         PrintWriter out = response.getWriter();
         String username = request.getParameter("username");
         Connection connection = null;
         PreparedStatement prepareStatement = null;
         ResultSet resultSet = null;
         try
         {
             connection = SqlHelper.getConnection();
             String sql = "select * from user where username=?";
             prepareStatement = connection.prepareStatement(sql);
             prepareStatement.setString(1,username);
             resultSet = prepareStatement.executeQuery();
             while(resultSet.next())
             {
                 response.getWriter().print("true");
                 return;
             }
             response.getWriter().print("false");
         }
         catch(Exception e)
         {
             e.printStackTrace();
         }
         finally
         {
             SqlHelper.close(connection, prepareStatement, resultSet);
         }
     }

 }

2，webRoot部分有两个文件js工具类和jsp页面

2.1 js工具类封装了操作json数据的函数

AjaxUtil.js

 function sendAjaxReq(method,url,param,fun200,fun404,fun500)
       {
           var req;
           if(window.XMLHttpRequest)
           {
               req = new XMLHttpRequest();
           }
           else if(window.ActiveXObject)
           {
               req = new ActiveXObject("Msxml2.XMLHTTP");
     }
     req.open(method,url);
     req.onreadystatechange = function()
     {
         if(req.readyState == 4)
         {
             if(req.status == 200)
             {
                 if(fun200)
                 {
                       fun200(req.responseText);
                 }
             }
             else if(req.status == 404)
             {
                 if(fun404)
                 {
                     fun404();
                 }
             }
             else if(req.status == 500)
             {
                 if(fun500)
                 {
                     fun500();
                 }
             }
         }
     }
     if(method.toUpperCase() == "GET")
     {
         req.send(null);
     }
     else if(method.toUpperCase() == "POST")
     {
         req.setRequestHeader("context-type", "application/x-www-form-urlencoded");
         req.send(param);
     }
 }

2.2 jsp页面是显示页面

index.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
 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%>">
     <style>
         .success
         {
             color:green;
         }
         .fail
         {
             color:red;
         }
     </style>
     <script src="/ajax/js/AjaxUtil.js"></script>
     <script>
         function checkUname(unameValue)
         {
             if(unameValue != "")
             {
                 sendAjaxReq("get","checkUname?username="+unameValue,null,function(data)
                 {
                     if(eval(data))
                     {
                         document.getElementById("unameSpan").innerHTML="该用户名已被注册!";
                         document.getElementById("unameSpan").className="fail";
                     }
                     else
                     {
                         document.getElementById("unameSpan").innerHTML="恭喜，可以注册!";
                         document.getElementById("unameSpan").className="success";
                     }
                 });
             }
         }

     </script>
   </head>

   <body>
       <form method="get" action="/ajax/checkUname">
           <table>
               <tr>
                   <td>用户名：</td>
                   <td>
                       <input type="text" name="username" id="username"
                       onblur="checkUname(this.value);"
                       onkeypress="document.getElementById('unameSpan').innerHTML='';" />
                   </td>
                   <td><span name="unameSpan" id="unameSpan"></span></td>
               </tr>
               <tr>
                   <td>密 码：</td>
                   <td><input type="password" name="password" /></td>
               </tr>
           </table>
           <input type="submit" value="提交">
       </form>

   </body>
 </html>