JavaWeb开发教程day04_Ajax

最新推荐文章于 2025-08-27 17:04:20 发布

原创

最新推荐文章于 2025-08-27 17:04:20 发布 · 3.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #javascript #html #ajax #前端

文章目录

Ajax
- 1 定义
- 2 同步和异步
- 3 Axios
- - 3.1 步骤：
  - 3.2 Axios-请求方式别名
- 4 案例-异步获取数据

Ajax

1 定义

介绍：Asynchronous JavaScript And XML，的JavaScript和XML①。
作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

我们详细的解释一下Ajax技术的2个作用：

与服务器进行数据交互
如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。
[图片]
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
如下图所示，当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高。

2 同步和异步

在这里插入图片描述

3 Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/

3.1 步骤：

- 引入Axios的js文件（参照官网）

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

- 使用Axios发送请求，并获取响应结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Axios入门程序</title>
</head>
<body>

  <button id="getData">GET</button>
  <button id="postData">POST</button>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    //GET请求
    document.querySelector('#getData').onclick = function() {
   
   
      axios({
   
   
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
        method:'get'
      }).then(function(res) {
   
   
        console.log(res.data);
      }).catch(function(err) {
   
   
        console.log(err);
      })
    }
    
    //POST请求
    document.querySelector('#postData').onclick = function() {
   
   
      axios({
   
   
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
        method:'post'
      }).then(function(res) {
   
   
        console.log(res.data);
      }).catch(function(err) {
   
   
        console.log(err);
      })
    }
  </script>
</body>
</html>

对应参数解释

method：请求方式，GET/POST
url：请求路径
data：请求数据(POST)
params：发送请求时携带的url参数 如：...?key=val

3.2 Axios-请求方式别名

Axios还针对不同的请求，提供了别名方式的api，具体格式如下：
axios.请求方式(url [, data [, config]])
具体如下

在这里插入图片描述
我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

格式：axios.请求方式(url [, data [, config]])

  axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
   
   
    console.log(result.data);
  }).catch((err) => {
   
   
    console.log(err);
  });