【JavaWeb】11—Axios Ajax

这篇具有很好参考价值的文章主要介绍了【JavaWeb】11—Axios Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

⭐⭐⭐⭐⭐⭐
Github主页👉https://github.com/A-BigTree
笔记链接👉https://github.com/A-BigTree/Code_Learning
⭐⭐⭐⭐⭐⭐

如果可以,麻烦各位看官顺手点个star~😊

如果文章对你有所帮助,可以点赞👍收藏⭐支持一下博主~😆

12 Axios Ajax

12.1 Ajax概述

12.1.1 服务器端渲染

【JavaWeb】11—Axios Ajax

12.1.2 Ajax渲染(局部更新)

【JavaWeb】11—Axios Ajax

12.1.3 前后端分离

彻底舍弃服务器端渲染,数据全部通过Ajax方式以JSON格式来传递。

12.1.4 同步与异步

Ajax本身就是Asynchronous JavaScript And XML的缩写,直译为:异步的JavaScript和XML。在实际应用中Ajax指的是:不刷新浏览器窗口不做页面跳转局部更新页面内容的技术。

『同步』 和 *『异步』 *是一对相对的概念,那么什么是同步,什么是异步呢?

同步

多个操作按顺序执行,前面的操作没有完成,后面的操作就必须等待。所以同步操作通常是串行的。

【JavaWeb】11—Axios Ajax

异步

多个操作相继开始并发执行,即使开始的先后顺序不同,但是由于它们各自是在自己独立的进程或线程中完成,所以互不干扰谁也不用等

【JavaWeb】11—Axios Ajax

12.1.5 Axios简介

使用原生的JavaScript程序执行Ajax极其繁琐,所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。

使用Axios和使用Vue一样,导入对应的*.js文件即可。官方提供的script标签引入方式为:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我们可以把这个axios.min.js文件下载下来保存到本地来使用。

12.2 Axios基本用法

12.2.1 测试

前端代码
<html>
  <head>
    <title>Axios Test</title>
  </head>
  <body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <div id="app">
    <button @click="commonParam">普通请求参数</button>
  </div>

  <script>
    const { createApp } = Vue
    const app = createApp({
      data(){},
      methods:{
        commonParam:function (){
          axios({
            method:"post",
            url:"/pro4_axios/AjaxServlet?method=commonParam",
            data: {
              userName: "tom",
              userPwd: "123456"
            }
          }).then(function (response){
            console.log(response);
          }).catch(function (error){
            console.log(error);
          });
        }
      }
    });
    app.mount("#app");
  </script>
  </body>
</html>
后端代码
public class AjaxServlet extends ModelBaseServlet {
    protected void commonParam(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String userName = request.getParameter("userName");
        String userPwd = request.getParameter("userPwd");

        System.out.println("userName = " + userName);
        System.out.println("userPwd = " + userPwd);

        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("服务器返回普通文本字符串");
    }
}
axios程序接收到的响应对象结构
属性名 作用
config 调用axios(config对象)方法时传入的JSON对象
data 服务器端返回的响应体数据
headers 响应消息头
request 原生JavaScript执行Ajax操作时使用的XMLHttpRequest
status 响应状态码
statusText 响应状态码的说明文本
服务器端处理请求失败后
catch(function (error) {     // catch()服务器端处理请求出错后,会调用
    console.log(error);         // error就是出错时服务器端返回的响应数据
    console.log(error.response);        // 在服务器端处理请求失败后,获取axios封装的JSON格式的响应数据对象
    console.log(error.response.status); // 在服务器端处理请求失败后,获取响应状态码
    console.log(error.response.statusText); // 在服务器端处理请求失败后,获取响应状态说明文本
    console.log(error.response.data);   // 在服务器端处理请求失败后,获取响应体数据
});

response对象的结构还是和then()函数传入的回调函数中的response是一样的:

【JavaWeb】11—Axios Ajax

回调函数:开发人员声明,但是调用时交给系统来调用。像单击响应函数、then()、catch()里面传入的都是回调函数。回调函数是相对于普通函数来说的,普通函数就是开发人员自己声明,自己调用。

12.2.2 发送请求体JSON

后端代码

Gson是Google研发的一款非常优秀的JSON数据解析和生成工具,它可以帮助我们将数据在JSON字符串和Java对象之间互相转换。文章来源地址https://www.toymoban.com/news/detail-409939.html

protected void requestBodyJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // 1.由于请求体数据有可能很大,所以Servlet标准在设计API的时候要求我们通过输入流来读取
    BufferedReader reader = request.getReader();

    // 2.创建StringBuilder对象来累加存储从请求体中读取到的每一行
    StringBuilder builder = new StringBuilder();

    // 3.声明临时变量
    String bufferStr = null;

    // 4.循环读取
    while((bufferStr = reader.readLine()) != null) {
        builder.append(bufferStr);
    }

    // 5.关闭流
    reader.close();

    // 6.累加的结果就是整个请求体
    String requestBody = builder.toString();

    // 7.创建Gson对象用于解析JSON字符串
    Gson gson = new Gson();

    // 8.将JSON字符串还原为Java对象
    Student student = gson.fromJson(requestBody, Student.class);
    System.out.println("student = " + student);

    System.out.println("requestBody = " + requestBody);

    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write("服务器端返回普通文本字符串作为响应");
}

12.2.3 服务器端返回JSON数据

protected void responseBodyJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // 1.准备数据对象
    Student student = new Student();
    student.setStuId(10);
    student.setStuName("tom");
    student.setSchool(new School(11,"atguigu"));
    student.setSubjectList(Arrays.asList(new Subject("java", 95.5), new Subject("php", 93.3)));

    Map<String, Teacher> teacherMap = new HashMap<>();
    teacherMap.put("t1", new Teacher("lili", 25));
    teacherMap.put("t2", new Teacher("mary", 26));
    teacherMap.put("t3", new Teacher("katty", 27));

    student.setTeacherMap(teacherMap);

    // 2.创建Gson对象
    Gson gson = new Gson();

    // 3.将Java对象转换为JSON对象
    String json = gson.toJson(student);
    
    // 4.设置响应体的内容类型
    response.setContentType("application/json;charset=UTF-8");
    response.getWriter().write(json);
}

到了这里,关于【JavaWeb】11—Axios Ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JAVAWeb11-服务器渲染技术 -JSP-01-JSP基础

    1、JSP 使用情况 2、Thymeleaf 使用情况, 通常和 SpringBoot 结合(也会讲) 3、Vue 使用情况 目前主流的技术是 前后端分离 (比如: Spring Boot + Vue/React ), 我们会讲的.[看一下] JSP 技术使用在逐渐减少,但 使用少 和没有使用是两个意思,一些老项目和中小公司还在使用 JSP,工作期间,你

    2024年02月02日
    浏览(44)
  • JAVAWeb11-服务器渲染技术 -JSP-03-JSTL(会使用)

    JSTL 标签库 是指 JSP Standard Tag Library :JSP 标准标签库 EL 表达式是为了替换 jsp 中的表达式脚本, JSTL 是为了替换代码脚本。这样 jsp 页面变得更佳简洁 JSTL 由 五个标签库组成 使用 JSTL,需要导入相关的 jar 包 注意细节 ● taglib 引入标签,要放在行首 ● 导入 jstl jar 包后,要重

    2024年02月03日
    浏览(44)
  • JavaWeb_LeadNews_Day11-KafkaStream实现实时计算文章分数

    Kafka Stream: 提供了对存储与Kafka内的数据进行流式处理和分析的功能 特点: Kafka Stream提供了一个非常简单而轻量的Library, 它可以非常方便地嵌入任意Java应用中, 也可以任意方式打包和部署 除了Kafka外, 无任何外部依赖 通过可容错地state, store实现高效地状态操作(如windowed join和

    2024年02月09日
    浏览(33)
  • axios是什么?axios使用axios和ajax

    Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它是由 GitHub 用户 mzabriskie 开发的,并且得到了广泛的社区支持。Axios 的设计目标是提供一种简洁、易用且功能强大的 HTTP 请求方式,以替代传统的 Ajax(Asynchronous JavaScript and XML)技术。 Axios 与 Ajax 的比较 Aj

    2024年04月15日
    浏览(37)
  • JavaWeb期末大作业 Javaweb项目 Javaweb Servlet html

    1.进入之后是一个分页查询所有数据的内容  该页面有基础的增删改查  还有分页查询  批量删除  进行条件查询  有什么不对的地方欢迎提出  谢谢  2.增删改查 1.添加 添加成功 2.删除  将刚才添加的OPPO删除 3.修改     4.查询的话就是主页查询所有  页面所用的是分页查询

    2024年02月10日
    浏览(42)
  • JavaWeb——1.JavaWeb概述

    这是我们javaweb的第一篇文章,首先我们来介绍一下什么是Javaweb JavaWeb: 使用java语言完成服务器端程序开发 如下面这张图所示: 可能不太好理解,那么就用通俗的语言来解释一下。 任何的一个应用程序,首先它会有页面,这也就是前端的内容;然后你可以用这个应用程序来

    2024年02月03日
    浏览(37)
  • 【axios】-- axios 二次封装

    如baseUrl,超出时间等 出于权限和安全考虑的密钥设置到请求头 主要针对于错误的情况做全局统一处理 把对接口的请求封装为一个方法 例子

    2024年02月09日
    浏览(46)
  • 【JavaWeb】Tomcat&JavaWeb&HTTP

    Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache、Sun 和其他一些公司及个人共同开发而成。最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发

    2024年02月05日
    浏览(59)
  • Vue的Axios 的使用(axios简介、axios与vue钩子结合使用、实验)全解

    什么是 Axios Axios 基本用法 Axios 与 Vue 的钩子函数的结合使用 什么是 Axios Axios 是一个基于 Promise 语法的、用于浏览器和 Node.js 的 HTTP 库。简单的理解就是对 Ajax 的封装,且具有易用、简洁、高效等特点。 Axios 的特点 它本身具备以下作用: 可以从浏览器中创建 XMLHttpRequest。

    2024年02月02日
    浏览(48)
  • JavaWeb | 常用的HTML(JavaWeb)标签

    HTML ( 超文本标记语言 ) ,构成 网页文档 的 主要语言 。一般情况下,用户在网页上看到的文字、图形、动画、声音、表格、链接等元素大部分都是HTML语言描述。 HTML 有 单标签 和 双标签 。 HTML 对 大小写不敏感 。html /html 也可以写成:HTML /HTML 。 标签 有 属性 ,如 a href=pa

    2024年02月10日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包