1.AJAX的引入
JS 缺乏主动发起Http请求的能力，因此需要代码片段让JS发起Http请求，我们称这样的代码片段为——AJAX（Asynchronous JAvaScript by Xml ）
AJAX借助 JS 中的一个内置对象：XMLHttpRequest，可简写为xhr
2.AJAX的代码片段
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ajax 请求</title></head><body><script><!-- js发送http请求 利用相应的代码片段-->var xhr=new XMLHttpRequest(); <!-- 初始化js中的内置对象XMLHttpRequest-->xhr.open("post","/hhhhhhh");<!-- 提供HTTP请求的 方法和url-->xhr.send();<!-- 发起真正的请求--></script></body></html>
在上面的代码完成后，即完成了由JS构建的请求-响应，接下来需要考虑：当请求-响应完成时（对应事件为 XMLHttpRequest中的load），如何利用JS代码读取响应的数据，这里将用到事件绑定（元素、事件、函数）
前端代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ajax 请求</title></head><body><script>// js发送http请求 利用相应的代码片段-->var xhr=new XMLHttpRequest(); // 初始化js中的内置对象XMLHttpRequest-->//定义 事件绑定中的函数，定义在xhr实例化之后，因为函数中需要xhrfunction success() {console.log("完成请求-响应啦！！！！！！！") //请求响应成功后再打印console.log(xhr.responseText) //拿到 响应的响应体信息,响应正文console.log(xhr.status) //拿到请求的响应状态码}xhr.onload=success;//当请求响应完成后，去执行success函数xhr.open("get","/delay");// 提供HTTP请求的 方法和url-->xhr.send();// 发起真正的请求-->console.log("ajax请求已发送")//先打印</script></body></html>
后端代码：
package servlet;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.concurrent.TimeUnit;@WebServlet("/delay")public class DelayServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//增加延时，在输出响应try {TimeUnit.SECONDS.sleep(3);} catch (InterruptedException e) {e.printStackTrace();}//输出些 响应resp.setCharacterEncoding("utf-8");resp.setContentType("text/plain");resp.getWriter().println("看这里！！！！！！！！！！！");}}
3.通过Ajax 向后端传递数据
没有Ajax之前向后端传递数据：利用form表单Ajax在模拟实现第一种方式时，JS在URL中组织queryString即可，但是这种人为规定的模拟实现方法，在字符串切割时往往会存在一定问题。因此需要引入一种标准的结构化数据格式——Json
