JavaWeb之Ajax

一、Ajax简介

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，能够与服务器交换数据并更新部分网页的技术。AJAX允许网页在不失去用户当前状态的情况下与服务器进行异步通信，这使得用户体验更加流畅，页面响应更快。

工作原理：

1. 发送请求：使用JavaScript（通常借助XMLHttpRequest对象）向服务器发送HTTP请求
2. 处理请求：服务器接收请求，并进行处理，生成响应数据
3. 处理响应：浏览器接收到服务器的响应后，JavaScript可以处理这些数据

二、原生Ajax

1.GET

<script>
  // XMLHttpRequest用来向后端发送请求
  var request = new XMLHttpRequest();
  // 向后端的servlet以get方式发送请求
  request.open("GET", "/user/login");
  //设置请求头，发送json数据，使用UTF-8字符集
  request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  
  // 设置请求完成时的回调函数
  request.onreadystatechange = function () {
    // 如果成功返回
    if (request.readyState == 4 && request.status == 200) {
      // request.responseText获得的是响应体中的内容
      // 对应后端response.getWriter().write(json)写入响应体中的数据
      // JSON.parse将字符串转为JSON
      var result = JSON.parse(request.responseText);

      // 处理后端响应的数据
    }
  };
  
  // 发送请求
  request.send();
</script>

2.POST

var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200) {
        var result = JSON.parse(request.responseText);
        
        // 处理数据相关代码
    };
    request.open("POST", "/user/login");
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    
    var data = {
        username: "user",
        password: "pass"
    };
    request.send(JSON.stringify(data)); // 以POST方式发送字符串化的数据
}

3.回调函数

所谓回调函数，即将一个函数作为参数传入另一个函数中并调用

function loginUser(data, callback) {
    var request = new XMLHttpRequest();
    request.open("POST", "/user/login");
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    // 将callback作为参数传递给XMLHttpRequest的回调函数
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200){
            var result = JSON.parse(request.responseText);
            callback(result); // 成功时调用回调函数
        }
    };

    request.send(JSON.stringify(data));
}

var userData = {
    username: "myusername",
    password: "mypassword"
};

// 调用loginUser函数
loginUser(userData, function(userData) {
    console.log('Login successful:', userData);
    // 处理登录成功的逻辑
});

之所以不在loginUser中直接调用该函数而是使用回调函数是因为这样的话函数就被固定在在loginUser函数内部了。如果需要以不同的方式处理数据，则需要修改loginUser函数本身，缺乏灵活性和可重用性