Javaweb - 13 - AJAX

发送请求的几种方式

浏览器的地址框中输入地址，回车
html --> head --> scrip / link

img 自动发送请求，无需手动触发

a 标签，form 表单标签

需要手动控制提交产生，且往往需要在新的页面上获得响应信息

运行 JS 代码产生请求

我们通过事件触发 JS 代码运行，发送请求

响应后我们可以通过 JS 代码动态处理是否要跳转

或者要将响应的信息通过 DOM 编程显示在 dom 树中

通过第 4 中发送请求的方法，就可以实现如下功能：

当用户在注册页面中，用户名为 zhangsan 的时候，这个事件会触发 JS 代码运行，向后端发送请求，可以将响应的信息通过 DOM 编程显示在 dom 树中

什么是 AJAX

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

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

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据，并更新部分前端显示页面的内容

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行

XMLHttpRequest 只是实现 AJAX 的一种方法（原生 JS 的实现方式）

同步交互：发送方发出请求后，必须等待接收方处理并返回，在此期间，发送方会处于"阻塞"状态，无法继续执行其他操作，直到收到响应后才会继续执行。

异步交互：发送方发出请求后，无需等待接收方返回响应，而是继续执行后续操作。接收方处理完请求后，会通过某种方式，将结果反馈给发送方，双方操作在时间上可以"不同步"。

如何实现 AJAX 请求

index.html：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    function getMessage() {
        // 实例化一个 xmlHttpRequest
        var request = new XMLHttpRequest();
        // 设置 xmlHttpRequest 对象的回调函数
        // request.readState 1 2 3 4
        // request.status 响应状态码 响应行状态码
        request.onreadystatechange = function (){
            if (request.readyState == 4 && request.status == 200) {
                // 接收响应结果，处理结果
                // 将响应放到指定的位置
                var inputEle = document.getElementById("message");
                inputEle.value = request.responseText;
            }
        }
        // 设置发送请求的方式和请求的资源路径
        request.open("GET", "/hello?username=zhangsan");
        // 发送请求
        request.send();
    }
</script>
</head>
<body>
<button onclick="getMessage()">按钮</button>
<input type = "text" id = "message" />
</body>
</html>

helloServlet.java：

java 复制代码

@WebServlet("/hello")
public class helloServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收参数
        String username = req.getParameter("username");
        // 做出响应
        resp.getWriter().write("hello" + username);
    }
}

Javaweb - 13 - AJAX

发送请求的几种方式

什么是 AJAX

如何实现 AJAX 请求

完！