Ajax异步请求实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39544980/article/details/108456102

简单的Ajax案例

运行效果

在这里插入图片描述

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>AAA</title>
    <script>
        function sendAjax(){
            // 1. 核心对象 xhr  发送异步请求  处理请求响应
            if(window.ActiveXObject){
                // IE  IE
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }else {
                // webkit   chrome safiri   opera  ff  IE7+
                var xhr = new XMLHttpRequest();
            }
            // 2. 初始化  请求方式   请求地址   请求参数
            xhr.open("get","${pageContext.request.contextPath}/ajax?username="+document.getElementById("uname").value);
            // 3. 发送
            xhr.send();
            // 4. 接收响应
            // xhr.readyState  0=未初始化  1=初始化   2=已发送  3=开始接收到响应  4=响应的所有内容接收完毕
            xhr.onreadystatechange=function(){
                if(xhr.readyState ==4 ){
                    // 要响应
                    var ret = xhr.responseText;
                    // DOM 将响应内容  刷新到页面的某个局部上
                    document.getElementById("msg").innerHTML=ret;
                }
            }
        }
    </script>
  </head>
  <body>
  <input type="text" id="uname"><span id="msg"></span><br>
  <input type="button" value="send_ajax" onclick="sendAjax();">

  </body>
</html>

后端servlet

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username:"+username);
        // 响应
        /**
         * 不再需要一个完整的页面，需要一个字符串
         */
        resp.setCharacterEncoding("utf-8");
        if("zhangsan".equals(username)){
            resp.getWriter().write("用户名重复");
        }else{
            resp.getWriter().write("用户名可用");
        }
        resp.getWriter().close();
    }
}