AJAX概念：AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

AJAX作用：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

AJAX 快速入门

 相关代码可以在W3SCHOOL的AJAX页面直接复制

向服务器发送请求的时候 url要写访问的绝对路径，因为前后端分离，服务器不一样

4表示请求完成并且响应已就绪 

200表示“ok”

顺序：  在html页面script里写上 输入框失去焦点事件onblur 

用get方式传递请求

AXIOS

Axios 对原生的AJAX进行封装，简化书写

官网：https://www.axios-http.cn

 JSON

 转成对象后，就可以用jsObject.name等调用JSON里的数据了

在Axios中，我们无需提前进行转换，因为会自动帮我们转换

 sevlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.调用service查询List brands = brandService.selectAll();//2.将集合转换为JSON数据 序列化String jsonString = JSON.toJSONString(brands);//3.响应数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);
}

html 主要代码

request.getParameter 无法读取JSON数据

所以我们直接获取请求体

servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取请求体数据BufferedReader br = request.getReader();String params =br.readLine();//将JSON字符串转换成java对象Brand brand = JSON.parseObject(params,Brand.class);//调用service添加brandService.add(brand);//响应成功标识response.getWriter().write("success");
}

js: