专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

JavaWEB: Axios简介、入门案例，手把手教你编写代码

ins518 2025-09-18 00:51:57 技术文章 16 ℃ 0 评论

使用原生的JavaScript程序执行AJAX的过程极其烦琐，为了解决XMLHttpRequest的AJAX请求封装的复杂性，以及便于后续增加请求响应等拦截器的常用功能，还可以考虑使用第三方类库Axios。Axios 是目前最流行的前端AJAX 框架。

Axios 是一个具有独立开发功能且目标明确的请求类库，它基于Promise，是一个既可用于浏览器又可以用于Node.js服务器端的HTTP请求模块。

本质上它是符合最新ES规范，使用Promise实现的、原生XHR的封装。在服务端，它使用原生Node.js 的HTTP模块实现；而在客户端，它则使用XMLHttpRequest对象实现。因为对于请求操作，Axios进行了常用功能的封装，所以开发人员若想实现网络请求功能，则只需要直接安装使用它，就可以拥有它带来的诸多新的特性内容，主要包括以下几点。

  • 支持从浏览器创建XMLHttpRequest对象。
  • 支持从Node.js创建HTTP请求。
  • 支持Promise API。
  • 拦截请求和响应。
  • 转换请求和响应数据。
  • 取消请求。
  • 自动转换JSON数据。

通过一个案例简单演示Axios的使用。在页面创建一个按钮，单击按钮发送异步请求，触发后台Servlet代码，并实现获取请求参数，在控制台输出。采用Axios异步框架向后台发送请求的步骤如下。

  1. 导入Axios框架（axios.min.js文件）。
  2. 调用axios（）函数，该函数用来发送异步请求，并传入请求路径、请求方式等参数，设置请求的具体信息。
  3. 服务器端通过输出流的方式输出数据（返回给JavaScript）。
  4. 接收服务器端的响应数据，语法格式如下。
axios({}).then(responce=>{回调函数})
  1. 如果服务器出现500错误，就执行catch（）中的回调函数，语法格式如下。
// 链式编程
axios({}).then(responce=>{请求成功的回调函数}).catch(error=>{请求失败，出现500错误的回调函数})

HTML页面如下，发送异步请求到服务器端(Servlet)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</head>
<body>
  <h1>demo090801</h1>
  <input type="button" value="点击" @click="fun01" />
</body>
<script>
  new Vue({
    el: '#demo090801',
    data: {},
    methods: {
      fun01:function () {
        alert(100)
        axios({
          method: 'get',
          url: 'http://localhost:8080/api/demo/demo090801',
          params: {
            message: "hello AJAX"
          }
        }).then(function (response) {
          var message = response.data;
          alert(message);
        }).catch(function (error) {
          alert(error);
        })
      }
    }
  })
</script>
</html>

创建AJAXTestServlet，继承HttpServlet，获取请求参数并返回响应数据。

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxTestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getParameter("message");

        resp.getWriter().write("hello world");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

运行代码，Axios的入门案例首页所示。单击按钮，查看后端控制台。同时再次查看前端页面，成功接收到后台返回的响应数据。




Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011147号-25