原生的ajax判断用户名是否占用

最新推荐文章于 2019-03-28 15:58:24 发布

My_____Dream

最新推荐文章于 2019-03-28 15:58:24 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏：原生ajax

本文链接：https://blog.youkuaiyun.com/My_____Dream/article/details/80186581

原生ajax 专栏收录该内容

1 篇文章

订阅专栏

原生的ajax判断用户名是否占用

当我们在注册页面上输入用户名之后,点击下一个地方,去数据库中查询有无该用户名,最后提示信息

jax
   异步JavaScript和XML,
   AJAX 是一种用于创建快速动态网页的技术。
   通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
   传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
ajax入门程序:
   步骤:
       1.创建一个核心对象 XMLHttpRequest
       2.编写一个回调函数
       3.编写请求方式和请求的路径(open操作)
       4.发送请求(send操作)
ajax-api详解
   常用属性:
       onreadystatechange:检测readyState状态改变的时候
       readyState:ajax核心对象的状态
           0:核心对象创建
           1:调用了open方法
           2:调用了send方法
           3:部分响应已经生成(没有意思)
           4:响应已经完成(使用的是这个状态)
       status:状态码
           if(xmlhttp.readyState==4 && xmlhttp.status==200){
           }
       responseText:响应回来的文本
   常用方法:
       open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径
       send(["参数"]):发送请求参数是请求方式为post的时候的参数
       setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型必须放在send方法之前.
步骤分析:
   1.数据库和表
       CREATE TABLE `user` (
          `id` INT(11) NOT NULL AUTO_INCREMENT,
          `username` VARCHAR(20) DEFAULT NULL,
          `password` VARCHAR(20) DEFAULT NULL,
          `email` VARCHAR(20) DEFAULT NULL,
          `name` VARCHAR(20) DEFAULT NULL,
          `sex` VARCHAR(10) DEFAULT NULL,
          `birthday` DATE DEFAULT NULL,
          `hobby` VARCHAR(50) DEFAULT NULL,
          PRIMARY KEY (`id`)
       ) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
       INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');
   2.新建项目
       导入 jar包工具类配置文件
   3.新建一个注册页面表单在用户名文本框上输入用户名失去焦点
       发送ajax请求,将输入的值发送到servlet
   4.checkUsername4Ajax
       接受用户名
       调用service完成查询操作返回一个用户
       判断user是否为空
           若为空 :写1 代表可以使用
           若不为空:写0
   5.在表单接受响应的数据
       判断一下,
           若为0,则提示用户名已被占用表单不可用提交提交按钮禁用

document.getElementById("sub").disabled=true;

hello.jsp

get.jsp

post.jsp

demo1

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
   <form method="post">
       <tr>
           <td>用户名</td>
           <td><input type="text" name="username"onblur="checkUsername(this)"></td>
           <td><span id="username_msg"></span></td>
       </tr><br>
       <tr>
           <td>密码</td>
           <td><input type="text" name="password"></td>

       </tr>
       <tr>
           <td colspan="3"><input type="submit" id="sub"></td>

       </tr>
   </form>
</body>
<script type="text/javascript">
   //失去焦点发送ajax
   function checkUsername(obj) {
       // alert(obj.value);

       //创建核心对象
       xmlhttp = null;
       if (window.XMLHttpRequest) {

           xmlhttp = new XMLHttpRequest();
       } else if (window.AactiveXObject) {
           xmlhttp = new AactiveXObject("Microsoft.XMLHTTP");
       }
       //编写回调函数
          xmlhttp.onreadystatechange=function(){
           if(xmlhttp.readyState==4 &&xmlhttp.status==200){
               //alert(xmlhttp.responseText);
               if(xmlhttp.responseText==1){
                    document.getElementById("username_msg").innerHTML="<font color='green'>用户名可以使用</font>";
                    document.getElementById("sub").disabled=false;
               }else{
                   document.getElementById("username_msg").innerHTML="<font color='red'>用户名不可以使用</font>";
                   document.getElementById("sub").disabled=true;
               }
           }
       }
       //open操作
        xmlhttp.open("get","${pageContext.request.contextPath}/checkUsername4Ajax?username="+obj.value);

       //send操作
        xmlhttp.send();
   }
</script>

</html>

Ajax1Servlet

demo2

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    $(function(){
       //给username 派发一个失去焦点事件发送ajax请求
       $("input[name='username']").blur(function(){
           //获取输入的值
              var $value= $(this).val();
              //alert($value);
              $.get("/webfour4/checkUsername4Ajax","username="+$value,function(d){
                  //alert(d);
                  if(d==1){
                      $("#username_msg").html($("<font color='green'>用户名可以使用</font>"));
                  }else{
                      $("#username_msg").html($("<font color='red'>用户名已被使用</font>"));
                  }
              });
       });
    })
</script>
</head>
<body>
   <form method="post">
       <tr>
           <td>用户名</td>
           <td><input type="text" name="username"></td>
           <td><span id="username_msg"></span></td>
       </tr><br>
       <tr>
           <td>密码</td>
           <td><input type="text" name="password"></td>

       </tr>
       <tr>
           <td colspan="3"><input type="submit" id="sub"></td>

       </tr>
   </form>
</body>
<script type="text/javascript">
   //失去焦点发送ajax

</script>

</html>

Ajax2Servlet

package com.feizhu.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* get 请求
*/
public class Ajax2Servlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //接受参数
       String username=request.getParameter("username");
       username=new String(username.getBytes("iso8859-1"),"utf-8");
       System.out.println(username);

       //响应数据
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().println("姓名"+username);
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       System.out.println(request.getMethod());
       request.setCharacterEncoding("utf-8");
       //接受参数
       String username=request.getParameter("username");
       System.out.println(username);

       //响应数据
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().println("post姓名"+username);
   }

}

CheckUsername4AjaxServlet

package com.feizhu.web.servlet;

import java.io.IOException;
import java.sql.SQLException;

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

import com.feizhu.domain.User;
import com.feizhu.service.UserService;

/**
* 原生ajax检测用户名是否被占用
*/
public class CheckUsername4AjaxServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //设置编码

       //接受用户名
       String username=request.getParameter("username");
       username=new String(username.getBytes("iso-8859-1"),"utf-8");
       System.out.println(username);

       //调用service 完成查询返回值为user

        User user = null;
       try {
           user = new UserService().checkUsername4Ajax(username);
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }

       //判断user 写回信息
       if(user==null) {
           response.getWriter().println("1");
       }
       else {
           response.getWriter().println("0");
       }
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       doGet(request, response);
   }

}

UserService

package com.feizhu.service;

import java.sql.SQLException;

import com.feizhu.dao.UserDao;
import com.feizhu.domain.User;

public class UserService {

   /**
   * 检测用户名是否被占用
   * @param username
   * @return
   * @throws SQLException
   */
   public User checkUsername4Ajax(String username) throws SQLException {

       return new UserDao().getUserByUsername4Ajax(username);
   }

}

UserDao

package com.feizhu.dao;

import java.sql.SQLException;

import javax.sql.DataSource;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.feizhu.domain.User;
import com.feizhu.utils.DataSourceUtils;

public class UserDao {

   /**
   * 通过用户名获取一个用户
   * @param username
   * @return
   * @throws SQLException
   */
   public User getUserByUsername4Ajax(String username) throws SQLException {
       QueryRunner qr= new QueryRunner(DataSourceUtils.getDataSource());
       String sql="select *from user where username=? limit 1";
       return qr.query(sql, new BeanHandler<>(User.class),username);
   }


}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>webfour4_ajax</display-name>
<welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
    <description></description>
    <display-name>Ajax1Servlet</display-name>
    <servlet-name>Ajax1Servlet</servlet-name>
    <servlet-class>com.feizhu.ajax.Ajax1Servlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Ajax1Servlet</servlet-name>
    <url-pattern>/ajax1</url-pattern>
</servlet-mapping>
<servlet>
    <description></description>
    <display-name>Ajax2Servlet</display-name>
    <servlet-name>Ajax2Servlet</servlet-name>
    <servlet-class>com.feizhu.ajax.Ajax2Servlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Ajax2Servlet</servlet-name>
    <url-pattern>/ajax2</url-pattern>
</servlet-mapping>
<servlet>
    <description></description>
    <display-name>CheckUsername4AjaxServlet</display-name>
    <servlet-name>CheckUsername4AjaxServlet</servlet-name>
    <servlet-class>com.feizhu.web.servlet.CheckUsername4AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CheckUsername4AjaxServlet</servlet-name>
    <url-pattern>/checkUsername4Ajax</url-pattern>
</servlet-mapping>
<servlet>
    <description></description>
    <display-name>JqueryAjaxServlet</display-name>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <servlet-class>com.feizhu.jquery_ajax.JqueryAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <url-pattern>/jqueryAjax</url-pattern>
</servlet-mapping>
<servlet>
    <description></description>
    <display-name>SearchKwServlet</display-name>
    <servlet-name>SearchKwServlet</servlet-name>
    <servlet-class>com.feizhu.web.servlet.SearchKwServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>SearchKwServlet</servlet-name>
    <url-pattern>/searchKw</url-pattern>
</servlet-mapping>
<servlet>
    <description></description>
    <display-name>SelectProServlet</display-name>
    <servlet-name>SelectProServlet</servlet-name>
    <servlet-class>com.feizhu.web.servlet.SelectProServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>SelectProServlet</servlet-name>
    <url-pattern>/selectPro</url-pattern>
</servlet-mapping>
<servlet>
    <description></description>
    <display-name>SelectCityServlet</display-name>
    <servlet-name>SelectCityServlet</servlet-name>
    <servlet-class>com.feizhu.web.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>SelectCityServlet</servlet-name>
    <url-pattern>/selectCity</url-pattern>
</servlet-mapping>
</web-app>