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>