Ajax和原生js的两种对异步的处理

Ajax和原生js的两种对异步的处理

<%--
  Created by IntelliJ IDEA.
  User: tomel
  Date: 2022/6/1
  Time: 8:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script>
        function funmove(){
            //id的属性用$("#id")获取
            //判断她为空的话，给span一个文本发生
            if (null== $("#userid").val()||''==$("#userid").val()){
                 $("#spanid").text("用户名不能为空")
                return
            }
            //这里是用户看到后进行输入，再次执行清空sqan的操作；就不执行if了
            $("#spanid").text("")
            //发送异步请求
            $.ajax(
                {
                    type:"GET",//method的方式
                    url:"unameCheckServlet.do?",// 请求的后台服务的路径
                    data:"username="+$("#userid").val(),// 提交的参数
                    success:function (msg) {// 响应成功执行的函数
                        $("#spanid").text(msg)
                    }
                }
            )
        }
    </script>
</head>
<body>
<form method="get" action="unameCheckServlet.do">
    账号：<input id="userid" name="username" type="text" onblur="funmove()">
    <span id="spanid" style="color: red"></span><br/>
    密码：<input name="password" type="password"><br/>
    <input type="submit" value="提交">
</form>
</body>
</html>


<%--
  Created by IntelliJ IDEA.
  User: tomel
  Date: 2022/5/31
  Time: 10:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style>
      table{
        border: 3px solid antiquewhite  ;
        margin: 0px auto;
        padding: 0px;
      }
      tr,td{
        border:2px solid green ;
          margin: 0px auto;
          padding: 0px;
      }
      td{
        align : "center"

      }
      .row{
          padding-left: 85px;
      }
    </style>
      <script>
          var xhr;
          function checkUname(){
              //获取输入框中的id对象
              let id = document.getElementById("unameI");
              //获取通过对象获取输入框内容
              let value = id.value;
              //获取标签span的对象，调用方法innertext在标签中打印提示内容
              let elementById = document.getElementById("unameInfo");
              if(value==null||value==''){
                  // elementById.innerText="用户名不能为空";
                  return;
              }

              elementById.innerText=""
          }
          // 发送异步请求
          // 获取一个 XMLHttpRequest对象 ,对象可以帮助我们发送异步请求
          xhr = new XMLHttpRequest();
          // 使用xhr对象设置打开链接,设置请求方式和参数xhr.open("请求方式","请求的URL",是否使用异步方式);
          xhr.open("GET","unameCheckServlet.do?uname="+unameText,true);
          // 设置回调函数
          xhr.onreadystatechange=showReturnInfo;
          // 正式发送请求
          xhr.send(null);

          function showReturnInfo() {
              if (xhr.readyState == 4 && xhr.status == 200) {
                  //获取相应文本msg
                  var returnInfo = xhr.responseText;
                  var unameInfoDom = document.getElementById("unameInfo");
                  unameInfoDom.innerText = returnInfo;
              }
          }

      </script>
  </head>
  <body>
  <form action="" method="get" >
    <table>

        <tr>
          <td>
              账号:
          </td>
            <td >
                <input id="unameI" name="username" type="text" onblur="checkUname()">
                <span id="unameInfo" style="color: red"></span><br/>
            </td>
        </tr>
        <tr>
          <td >
              密码:
          </td>
            <td >
                <input name="password" type="password" >
            </td>
        </tr>
        <tr>
          <td colspan="2" class="row">
              <input type="submit" value="登 录" width=>
          </td>
        </tr>
    </table>

  </form>
  </body>
</html>


package com.msb;

import com.sun.net.httpserver.HttpServer;

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("/unameCheckServlet.do")
public class servlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String parameter = req.getParameter("username");
        String info= "";
        if (parameter==null||parameter==""){
            info="用户名不能为空";
        }else if ("msb".equals(parameter)){
            info="用户名已经被用";
        }
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().println(info);
    }
}
posted @ 2022-06-01 08:58  爱豆技术部  阅读(92)  评论(0)    收藏  举报