<%--
  Created by IntelliJ IDEA.
  User: 巢yf
  Date: 2022/1/19
  Time: 20:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="app" value="点击">点击</button>
<div id="ass"></div>
<script type="text/javascript">

    var app = document.getElementById("app");
    var ass = document.getElementById("ass");
    //语法: element.addEventListener(event,function,Boolean);
    // 其中第一个参数是事件的类型（如'click 或 'mousedown'）
    // 第二个参数是事件触发后调用的函数。
    // 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
    // 注意：不要使用 'on' 前缀。例如，使用 'click',而不是使用 'onclick'.
    app.addEventListener("click",function (){
        //1,获取XMLHttpRequest对象
        var xml = new XMLHttpRequest();
        //2.向数据库发送信息
        // data 指路径
        xml.open("POST","data",true);
        //--如果想要HTML表单那样POST数据,请通过setRequestHeader(header,value)
        xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xml.send("name=sss&age=aaa");
        //3.当接收到响应时,执行函数
        xml.onreadystatechange = function(){
            //4.判断返回的状态
            if(xml.readyState == 4 && xml.status == 200){
                ass.innerText = xml.responseText;
            }
        }
    });
</script>
</body>
</html>

方法:

add.addEventListener()方法详解

事件监听；

// 其中第一个参数是事件的类型（如'click 或 'mousedown'）
// 第二个参数是事件触发后调用的函数。
// 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
// 注意：不要使用 'on' 前缀。例如，使用 'click',而不是使用 'onclick'.

var xml = new XMLHttpRequest();

1.对象是AJax技术的核心
2.上面代码代表创建了一个XMLHttpRequest对象
3.浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

xml.open()

open(method, url, async)规定请求的类型

method：请求的类型：GET 还是 POST
url：服务器（文件）位置
async：true（异步）或 false（同步）

xml.send()

向服务器发送请求--如果没有参数就是get请求,如果携带参数就是post请求

xml.abort()

取消当前请求

setRequestHeader()

向要发送的报头添加标签/值对向请求添加 HTTP 头部

header：规定头部名称
value：规定头部值 \

固定写法:xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

属性

onreadystatechange

onreadystatechange:定义了当 readyState 属性发生改变时所调用的函数。

readyState

保存了 XMLHttpRequest 的状态。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪

status

200: "OK"
403: "Forbidden"
404: "Page not found"

statusText

返回状态文本（例如 "OK" 或 "Not Found"）

responseText获取字符串形式的响应数据

responseXML 获取 XML 数据形式的响应数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户注册中心</title>
  </head>
  <style>
    #app{
      width:320px;
      margin: 0px auto;
    }
  </style>
  <body>
  <div></div>
  <div id="app">
    <form action="zc">
      账&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号:<input type="text" name="username" id="aa" onkeyup="aaa(this.value)"><label id="u">123</label>
      密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码:<input type="password" name="pwd1"></br>
      确认密码:<input type="password" name="pwd2"></br>
      <input type="submit" value="注册"><input type="reset" value="重写">
    </form>
  </div>
    <script>

      var xml = new XMLHttpRequest();
      function aaa(t) {
          //1,获取XMLHttpRequest对象
          //2.向数据库发送信息
          // data 指路径
          xml.open("POST","zc",true);
          xml.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded;");
          xml.send("username="+t);
          //3.当接收到响应时,执行函数
          xml.onreadystatechange = function (){
            //4.判断返回的状态
            if(xml.readyState == 4 && xml.status == 200) {
              var s1 = xml.responseText;
              var sa = "";
              if (s1 == 1) {
                sa = "账号可用!";
              } else {
                sa = "账号不可用!";
              }
              document.getElementById("u").innerText = sa;
            }
          }
      }
    </script>
  </body>
</html>

package cn.detu.demo1;

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("/zc")
public class ZuCeZhongXin extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        System.out.println("接受到浏览器请求:");
        String username = req.getParameter("username");
        System.out.println("注册账号:"+username);
        String pwd = req.getParameter("pwd1");
        System.out.println("注册的密码为:"+pwd);
        if(username.equals("chaoyunfei")){
            System.out.println("该用户已存在");
            resp.getWriter().print(0);
        }else{
            System.out.println("该用户可用");
            resp.getWriter().print(1);
        }


    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

代码解析

方法: