JavaWeb --- AJAX、Axios、JSON
一、AJAX
概念
AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML
1、Ajax = 异步 JavaScript 和XML
2、Ajax是一种用于创建快速动态网页的技术
3、通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
4、传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面
AJAX作用
1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
2 、异步交互： 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等...
同步和异步
1、同步：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作
2、异步：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作
快速入门
服务端代码
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 响应数据response.getWriter().write("hello,ajax~");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
客户端代码
Title
二、Axios
Axios 是对原生的 AJAX 进行封装，简化书写
快速入门
axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：
method 属性：用来设置请求方式的。取值为 get 或者 post
url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为：url?参数名1=参数值2&参数名2=参数值2
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值
then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调的函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据
请求方法别名
三、JSON
概念
JSON最常见的用法之一是从Web服务器上读取JSON数据(作为文件或HttpRequest)，将JSON数据转换为JavaScript对象，然后在网页中使用该数据
JSON基础语法
Title
JSON串和Java对象的相互转换
请求数据：JSON字符串转为Java对象
响应数据：Java对象转为JSON字符串
public class FastJsonDemo {public static void main(String[] args) {//1. 将Java对象转为JSON字符串User user = new User();user.setId(1);user.setUsername("zhangsan");user.setPassword("123");String s = JSON.toJSONString(user);System.out.println(s);//{"id":1,"password":"123","username":"zhangsan"}//2. 将JSON字符串转为Java对象User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);System.out.println(u);}
}