Javaweb - 13 - AJAX
发送请求的几种方式
1. 浏览器的地址框中输入地址，回车
2. html --> head --> scrip / link
img 自动发送请求，无需手动触发
3. a 标签，form 表单标签
需要手动控制提交产生，且往往需要在新的页面上获得响应信息
4. 运行 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：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<script>function getMessage() {// 实例化一个 xmlHttpRequestvar 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：
@WebServlet("/hello")
public class helloServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收参数String username = req.getParameter("username");// 做出响应resp.getWriter().write("hello" + username);}
}