• AJAX---Axios异步框架、JSON

     ✨✨个人主页:沫洺的主页

    📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                               📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                               📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

    💖💖如果文章对你有所帮助请留下三连✨✨

    🍃AJAX介绍

    概念：

    • AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XM

    AJAX作用：

    • 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
    • 使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了
    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

    🍁同步和异步的区别 

    同步

    • 所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

    异步

    • 将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

    总结

    • 同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，再响应用户，用户体验不好。
    • 异步，不用等所有操作都做完，就相应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

    🌿Axios 异步框架

    Axios 对原生的AJAX进行封装，简化书写(原生的AJAX的使用非常繁琐,所以就需要通过对其封装简化编码,并增加可读性)

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

    🍂Axios 入门案例

    1. 引入 axios 的 js 文件

    2. 使用axios 发送请求，并获取响应结果

    链接：https://pan.baidu.com/s/1NgM50O0X71Qm6LncPyReiw?pwd=wznb 
    提取码：wznb 

    get

     post

    1. <script>
    2.     axios({
    3.         method:"get",
    4.         //协议://端口/虚拟目录/映射路径?url传参
    5.         url:"http://localhost:8080/moming/axiosServlet?username=zhangsan"
    6.     }).then(function (resp){
    7.         //resp表示服务器的响应对象,我们可以面向resp对象,调用data属性即可得到服务器响应的内容
    8.         alert(resp.data);
    9.     })
    10. script>

    axios是工具提供相当于的一个静态方法,直接调用即可,里面需要传递一个{},在大括号中,有固定的key,分别是:method表示请求方式,url标签请求路径,data表示参数,then表示服务器响应之后要做的事,resp是自定义的形参名,data中的data是固定的

    🌾 Axios 请求方式别名

    为了方便起见， Axios 已经为所有支持的请求方法提供了别名。

    方法名

    作用

    get(url)

    发起GET方式请求

    post(url,请求参数)

    发起POST方式请求

    axios.get(url[,config])
    axios.delete(url[,config])
    axios.head(url[,config])
    axios.options(url[,config])
    axios.post(url[,data[,config]])
    axios.put(url[,data[,config]])
    axios.patch(url[,data[,config]])

    发送get请求

    1. <script>
    2.     axios.get("url")
    3.         .then(function(resp){
    4.         alert(resp.data);
    5.     })
    6. script>

    发送post请求

    1. <script>
    2.     axios.post("url","传参")
    3.        .then(function(resp){
    4.        alert(resp.data);
    5.     })
    6. script>

    请求别名

    2. <script src="js/axios-0.18.0.js">script>
    3. <script>
    4.     //get
    5.     axios({
    6.         method:"get",
    7.         url:"http://localhost:8080/moming/axiosServlet?username=zhangsan"
    8.     }).then(function (resp){
    9.         alert(resp.data);
    10.     })
    11.     //别名
    12.     axios.get("http://localhost:8080/moming/axiosServlet?username=zhangsan")
    13.         .then(function (resp){
    14.         alert(resp.data);
    15.     })
    16.     //post
    17.     axios({
    18.         method:"post",
    19.         url:"http://localhost:8080/moming/axiosServlet",
    20.         data:"username=zhangsan"
    21.     }).then(function (resp){
    22.         alert(resp.data);
    23.     })
    24.     //别名
    25.     axios.post("http://localhost:8080/moming/axiosServlet","username=zhangsan")
    26.         .then(function (resp){
    27.         alert(resp.data)
    28.     })
    29.  
    30. script>

    🌲JSON 

    概念：JavaScript Object Notation。JavaScript 对象表示法

    由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

    🌳JSON 基础语法

    定义：

    var 变量名 = '{"key1": value1,"key2": value2,...}';

    示例：

    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}';

    JSON字符串转为JS对象：

    var jsObject = JSON.parse(jsonStr);

    JSON对象转为JS字符串：

    var jsonStr2 = JSON.stringify(jsObject);

    Axios中，JSON字符串和JS对象自动进行转换

    value 的数据类型为：

    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true 或 false）
    • 数组（在方括号中）
    • 对象（在花括号中）
    • null

    💐JSON 数据和Java对象转换 

    • 请求数据：JSON字符串转为Java对象
    • 响应数据：Java对象转为JSON字符串

    API

    Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

    使用：

    1. 导入坐标

    1. <dependency>
    2.     <groupId>com.alibabagroupId>
    3.     <artifactId>fastjsonartifactId>
    4.     <version>1.2.62version>
    5. dependency>

    2. Java对象转JSON

    String jsonStr = JSON.toJSONString(obj);

    3. JSON字符串转Java对象

    User user = JSON.parseObject(jsonStr, User.class);

    🌷JSON入门

    异步请求响应json

    Person

    1. package com.moming.json;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @AllArgsConstructor
    9. @NoArgsConstructor
    10. public class Person {
    11.     private String username;
    12.     private String password;
    13. }

    json.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <script src="js/axios-0.18.0.js">script>
    10. <script>
    11.     //1.给服务器发送异步请求,携带json格式的数据,服务器收到请求之后,给浏览器响应json格式的数据
    12.     axios({
    13.         method:"post",
    14.         url:"http://localhost:8080/moming/js",
    15.         data:{"username":"张三","password":"123"}
    16.     }).then(function (resp){
    17.         let d = resp.data;
    18.         alert(d);
    19.         //此时的d就是一个json对象,可以面向对象,根据json的key,获取对应的value
    20.         alert(d.a);
    21.         alert(d.b);
    22.     })
    23. script>
    24. body>
    25. html>

    JsonServelt

    1. package com.moming.json;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4.  
    5. import javax.servlet.*;
    6. import javax.servlet.http.*;
    7. import javax.servlet.annotation.*;
    8. import java.io.IOException;
    9.  
    10. @WebServlet("/js")
    11. public class JsonServlet extends HttpServlet {
    12.     @Override
    13.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    14.         //获取浏览器传递的json数据,注意,不能使用request.getPparameter(),只能使用字符流读数据
    15.         String s = request.getReader().readLine();
    16.         //此时的js就是浏览器请求的时候,发过来的json字符串
    17.         System.out.println("从浏览器获取的数据是:"+s);
    18.         //利用工具,将s字符串转成javabean对象
    19.         Person person = JSON.parseObject(s, Person.class);
    20.         System.out.println("转成javabean是:"+person);
    21.         //给浏览器响应一个json字符串
    22.         response.setContentType("text/json;charset=utf-8");
    23.         response.getWriter().print("{\"a\":\"响应\",\"b\":\"json\"}");
    24.     }
    25.  
    26.     @Override
    27.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    28.         doGet(request, response);
    29.     }
    30. }

  • 相关阅读:
    如何解决iQOO手机运行uniapp真机调试时无法识别的问题
    文心一言 VS 讯飞星火 VS chatgpt （85）-- 算法导论8.2 2题
    TensorFlow机器学习实战指南 PDF书籍推荐
    主成分分析用于ERP研究的实用教程－机遇和挑战（附代码）
    【计算机视觉 | 图像模型】常见的计算机视觉 image model（CNNs & Transformers） 的介绍合集（九）
    一、Linux入门：购买服务器，与服务器建立连接
    巧用clang 的sanitize解决realloc，malloc,calloc失败
    美国FBA海运专线究竟是什么?美国fba海运专线都有那些?
    linux系统中通配符与常用转义字符
    CAS Java实现与原理
  • 原文地址：https://blog.csdn.net/HeyVIrBbox/article/details/126733826