原生的JS实现Ajax

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun(){
            //发送异步请求
            //1.创建核心浏览器对象
            var xmlHttp = new XMLHttpRequest();

            //2.回调函数
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //获取服务器的响应结果
                    var responseText = xmlHttp.responseText;
                    alert(responseText);
                }
            }
            //3.建立连接
            xmlHttp.open("GET","ajaxServlet?username=tom",true);
            //4.发送请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>

import java.io.IOException;
@javax.servlet.annotation.WebServlet("/ajaxServlet")
public class AjaxServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //打印username
        System.out.println(username);
        //响应
        response.getWriter().write("hello:"+username);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        this.doPost(request, response);
    }
}

在这里插入图片描述

原生的JS实现Ajax

相关推荐

一个分享Java & Python知识的社区