Ajax一用户名是否存在判断

最新推荐文章于 2023-07-20 12:01:56 发布

奋斗的小菜菜

最新推荐文章于 2023-07-20 12:01:56 发布

阅读量197

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_40539437/article/details/102488458

版权

java 专栏收录该内容

79 篇文章 2 订阅

订阅专栏

学习Ajax需要会的技能

您应当具备的基础知识

在继续学习之前，您需要对下面的知识有基本的了解：

HTML / XHTML
CSS
JavaScript / DOM

什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Sugges

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，
JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

AJAX - 向服务器发送请求

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求：

index.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">

        function  ajaxFunction(){
            var xmlHttp;
            try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            }
            catch (e){
                try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }

            return xmlHttp;
        }

        //执行get请求
        function get() {
            //1.创建xmlhttprequest 对象
            var request = ajaxFunction();
            //2.发送请求

            /*
              参数一 : 请求类型 get post
              参数二 : 请求路径
              参数三 : 是否异步 , true or false
             */


            //2.发送请求
            request.open("GET","/ServletDemo01",true);


            //获取相应数据 注册监听的意思. 一但准备的状态发生了变化,那么就执行 = 号右面的方法
            request.onreadystatechange = function () {
                //前半段表示已经能够正常处理了.在判断状态码是否是200
                if(request.readyState == 4 && request.status == 200){
                    alert(request.responseText);

                }
            };
            request.send();
        }

    </script>
  </head>
  <body>
  <a href="" onclick="get()">使用Ajax方式发送Get请求</a>
  </body>
</html>

ServletDemo01.java文件

package com.cs.demo01;

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

@WebServlet("/ServletDemo01")
public class ServletDemo01 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到请求了......................");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("收到请求了...................");
    }
}

结果: 单击一下页面的连接就会收到一个请求

收到请求了......................
收到请求了......................
收到请求了......................
收到请求了......................

POST请求

demo02.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>

        function  ajaxFunction(){
            var xmlHttp;
            try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            }
            catch (e){
                try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }

            return xmlHttp;
        }

        function post() {
            //1.创建对象
            var request = ajaxFunction();
            //2.发送请求
            request.open("post","/ServletDemo01",true);
            //如果使用的是post方式带数据,那么这里要添加头,说明提交的数据类型是一个经过url编码的form表单数据
            request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //携带的数据  如果不带数据 request.send();
			
			//接收服务器传过来的值
			request.onreadystatechange = function () {
              if(request.readyState == 4 && request.status == 200){
                  alert(request.responseText);
              }
            };
            request.send("name=cs&age=16");
        }
    </script>
</head>
<body>
<a href="" onclick="post()">使用Ajax方式发送post()请求</a>
</body>
</html>

ServletDemo01.java

package com.cs.demo01;

import com.sun.org.apache.xpath.internal.SourceTree;

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

@WebServlet("/ServletDemo01")
public class ServletDemo01 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("现在来post请求了      执行下面的get代码");
        this.doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到请求了......................");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println("name="+ name );
        System.out.println("age="+ age);
        response.getWriter().write("收到请求了...................");
    }
}

结果:

现在来post请求了      执行下面的get代码
收到请求了......................
name=cs
age=16

Ajax案例动态获取用户名
register.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/10 0010
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function  ajaxFunction(){
            var xmlHttp;
            try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            }
            catch (e){
                try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }

            return xmlHttp;
        }

        function checkname() {
            var username = document.getElementById("username").value;
            var request = ajaxFunction();
            request.open("POST","/userServlet",true);
            request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            request.onreadystatechange = function () {
                if(request.readyState == 4 && request.status == 200){
                    var data = request.responseText;

                    if(data == "1"){
                            document.getElementById("un").innerText = "用户已存在";
                    }else{
                        document.getElementById("un").innerText = "";
                        //alert("用户不存在");
                    }
                }
            };
            request.send("username=" + username);

        }

    </script>
</head>
<body>
<form onclick="checkname()" >
    <table border="1px">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username"><span id="un"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" name="password" id="password"><span id="ps"></span></td>
        </tr>
        <tr>
            <td rowspan="2"><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

UserDao .java

package com.cs.user.dao;

public interface UserDao {
    boolean checkUsername(String username);
}

UserDaoImp .java

package com.cs.user.dao;

import com.cs.user.domain.User;
import com.cs.user.util.Util;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

public class UserDaoImp implements UserDao {
    @Override
    public boolean checkUsername(String username) {
        List<User>  list = null;
        try {


            JdbcTemplate jdbcTemplate = new JdbcTemplate(Util.getDataSource());

            String sql = "select * from user where username=?";
            list = jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(User.class),username);
        } catch (DataAccessException e) {
            e.printStackTrace();
        }

        return list.size() > 0;
    }
}

User.java

package com.cs.user.domain;

public class User {
    private Integer id;
    private String username;
    private String password;

    public User() {
    }

    public User(Integer id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

userService .java

package com.cs.user.service;

import com.cs.user.dao.UserDao;
import com.cs.user.dao.UserDaoImp;

public class userService {
    UserDao userDao = new UserDaoImp();
    public boolean checkUsername(String username){
        return userDao.checkUsername(username);
    }
}

Util .java 数据库连接德鲁伊工具类

package com.cs.user.util;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

public class Util {

    private static DataSource dataSource;

    static{
        try {
            InputStream fis = Util.class.getClassLoader().getResourceAsStream("druid.properties");
            Properties properties = new Properties();
            properties.load(fis);
            dataSource = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static DataSource getDataSource(){
        return  dataSource;
    }

    public static Connection getConnection(){

        try {
            return getDataSource().getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return  null;
    }

    public static void closeAll(ResultSet rs, Statement sta,Connection con){
        if(rs != null){
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                rs = null;
            }
        }

        if(sta != null){
            try {
                sta.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                sta = null;
            }
        }

        if(con != null){
            try {
                con.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                con = null;
            }
        }
    }

    public static void  closeOther(Statement sta,Connection con){
        closeAll(null,sta,con);
    }
}

UserWeb .java (Servlet)

package com.cs.user.web;

import com.cs.user.service.userService;

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

@WebServlet("/userServlet")
public class UserWeb extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        userService userService = new userService();
        boolean cn = userService.checkUsername(username);
        if(cn) {
            response.getWriter().write("1");
        }else {
            response.getWriter().write("2");
        }


    }

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

druid.properties(配置文件)

# \u6570\u636E\u5E93\u57FA\u672C\u56DB\u9879
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/test
username=root
password=root

# \u521D\u59CB\u5316\u4E2A\u6570
initialSize=5
# \u6700\u5927\u8FDE\u63A5\u4E2A\u6570
maxActive=10
# \u7B49\u5F85\u65F6\u95F4\uFF0C\u6BEB\u79D2
maxWait=3000

文件路径
在这里插入图片描述

奋斗的小菜菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax一用户名是否存在判断

学习Ajax需要会的技能您应当具备的基础知识在继续学习之前，您需要对下面的知识有基本的了解：HTML / XHTMLCSSJavaScript / DOM什么是AjaxAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据...
复制链接

扫一扫

专栏目录