Ajax技术

顿河顿河

已于 2023-08-22 10:34:47 修改

阅读量113

点赞数

分类专栏： vue JavaScript 文章标签： ajax 前端 javascript

于 2023-08-22 09:17:14 首次发布

本文链接：https://blog.csdn.net/m0_61123567/article/details/132420426

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

1.1 Ajax介绍

1.1.1 Ajax概述

我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。

在这里插入图片描述

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

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

1.1.2 Ajax作用

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

与服务器进行数据交互

如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

如下图所示，当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高。

1.1.3 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。

同步请求发送过程如下图所示：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
异步请求发送过程如下图所示：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

1.2 原生Ajax

对于Ajax技术有了充分的认知了，我们接下来通过代码来演示Ajax的效果。此处我们先采用原生的Ajax代码来演示。因为Ajax请求是基于客户端发送请求，服务器响应数据的技术。所以为了完成快速入门案例，我们需要提供服服务器端和编写客户端。

服务器端

因为我们暂时还没学过服务器端的代码，所以此处已经直接提供好了服务器端的请求地址，我们前端直接通过Ajax请求访问该地址即可。后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

上述地址我们也可以直接通过浏览器来访问，访问结果如图所示：只截取部分数据

在这里插入图片描述

客户端

客户端的Ajax请求代码如下有如下4步，接下来我们跟着步骤一起操作一下。

第一步：首先我们再VS Code中创建AJAX的文件夹，并且创建名为01. Ajax-原生方式.html的文件，提供如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
     
    }
</script>
</html>

第二步：创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法。代码如下：

//1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

第三步：调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求，代码如下：

  //2. 发送异步请求
  xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
  xmlHttpRequest.send();//发送请求

第四步：我们通过绑定事件的方式，来获取服务器响应的数据。

  //3. 获取服务响应数据
  xmlHttpRequest.onreadystatechange = function(){
      //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
      if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
          document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
      }
  }

最后我们通过浏览器打开页面，请求点击按钮，发送Ajax请求，最终显示结果如下图所示：

在这里插入图片描述

并且通过浏览器的f12抓包，我们点击网络中的XHR请求，发现可以抓包到我们发送的Ajax请求。XHR代表的就是异步请求

1.3 Axios

上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

1.3.1 Axios的基本使用

Axios的使用比较简单，主要分为2步：

引入Axios文件

<script src="js/axios-0.18.0.js"></script>

使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下
- 发送 get 请求
```
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
```
- 发送 post 请求
```
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});
```
axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：
- method属性：用来设置请求方式的。取值为 get 或者 post。
- url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
- data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

1.3.2 Axios快速入门

后端实现

查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端实现

首先在VS Code中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件，工程结果如图所示：

在这里插入图片描述

然后在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
    }

    function post(){
        //通过axios发送异步请求-post
    }
</script>
</html>

然后分别使用Axios的方法，完整get请求和post请求的发送

get请求代码如下：

//通过axios发送异步请求-get
 axios({
     method: "get",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
 }).then(result => {
     console.log(result.data);
 })

post请求代码如下：

//通过axios发送异步请求-post
 axios({
     method: "post",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
     data: "id=1"
 }).then(result => {
     console.log(result.data);
 })

浏览器打开，f12抓包，然后分别点击2个按钮，查看控制台效果如下：

在这里插入图片描述

完整代码如下：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ajax-Axios</title>
      <script src="js/axios-0.18.0.js"></script>
  </head>
  <body>
      
      <input type="button" value="获取数据GET" onclick="get()">
  
      <input type="button" value="删除数据POST" onclick="post()">
  
  </body>
  <script>
      function get(){
          //通过axios发送异步请求-get
          axios({
              method: "get",
              url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
          }).then(result => {
              console.log(result.data);
          })
  
  
      }
  
      function post(){
         // 通过axios发送异步请求-post
          axios({
              method: "post",
              url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
              data: "id=1"
          }).then(result => {
              console.log(result.data);
          })
  
      }
  </script>
  </html>

1.3.3 请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

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

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

post请求改写成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

1.3.4 异步数据加载的案例

对于案例，我们只差最后的数据了，而数据的mock地址已经提供：http://yapi.smart-xwork.cn/mock/169327/emp/list

这个后端接口返回json数据：

{
  "code": 1,
  "message": "success",
  "data": [
      {
        "id": 1,
        "name": "张某某1",
        "image": "1.jpg",
        "gender": 1,
        "job": "教师",
        "entrydate": "2019-01-05",
        "updatetime": "2021-06-18"
      },
      {
        "id": 2,
        "name": "李某某2",
        "image": "2.jpg",
        "gender": 2,
        "job": "程序员",
        "entrydate": "2018-06-10",
        "updatetime": "2022-09-30"
      },
      {
        "id": 3,
        "name": "张某某3",
        "image": "3.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2020-02-12",
        "updatetime": "2020-10-01"
      },
      {
        "id": 4,
        "name": "王某某4",
        "image": "4.jpg",
        "gender": 2,
        "job": "销售",
        "entrydate": "2017-09-28",
        "updatetime": "2023-07-15"
      },
      {
        "id": 5,
        "name": "刘某某5",
        "image": "5.jpg",
        "gender": 1,
        "job": "设计师",
        "entrydate": "2016-04-10",
        "updatetime": "2022-05-02"
      },
      {
        "id": 6,
        "name": "陈某某6",
        "image": "6.jpg",
        "gender": 2,
        "job": "运营",
        "entrydate": "2019-11-22",
        "updatetime": "2021-12-10"
      },
      {
        "id": 7,
        "name": "赵某某7",
        "image": "7.jpg",
        "gender": 1,
        "job": "项目经理",
        "entrydate": "2018-08-16",
        "updatetime": "2023-03-09"
      },
      {
        "id": 8,
        "name": "钱某某8",
        "image": "8.jpg",
        "gender": 2,
        "job": "市场营销",
        "entrydate": "2020-07-03",
        "updatetime": "2022-11-24"
      },
      {
        "id": 9,
        "name": "孙某某9",
        "image": "9.jpg",
        "gender": 1,
        "job": "财务",
        "entrydate": "2017-03-14",
        "updatetime": "2020-09-28"
      },
      {
        "id": 10,
        "name": "杨某某10",
        "image": "10.jpg",
        "gender": 2,
        "job": "市场策划",
        "entrydate": "2019-05-09",
        "updatetime": "2022-07-14"
      },
      {
        "id": 11,
        "name": "吴某某11",
        "image": "11.jpg",
        "gender": 1,
        "job": "客服",
        "entrydate": "2018-02-28",
        "updatetime": "2021-09-06"
      },
      {
        "id": 12,
        "name": "郑某某12",
        "image": "12.jpg",
        "gender": 2,
        "job": "人力资源",
        "entrydate": "2016-12-15",
        "updatetime": "2022-03-21"
      },
      {
        "id": 13,
        "name": "黄某某13",
        "image": "13.jpg",
        "gender": 1,
        "job": "前端开发",
        "entrydate": "2019-07-20",
        "updatetime": "2020-12-12"
      },
      {
        "id": 14,
        "name": "徐某某14",
        "image": "14.jpg",
        "gender": 2,
        "job": "测试工程师",
        "entrydate": "2018-04-01",
        "updatetime": "2023-02-28"
      },
      {
        "id": 15,
        "name": "何某某15",
        "image": "15.jpg",
        "gender": 1,
        "job": "产品经理",
        "entrydate": "2020-01-15",
        "updatetime": "2021-08-02"
      }
  ]
}

我们最后要做的就是异步加载数据，所以我们需要使用axios发送ajax请求。

在vue项目中，对于axios的使用，分为如下2步：

安装axios: npm install axios
需要使用axios时，导入axios: import axios 'axios'

接下来我们先来到项目的执行终端，然后输入命令，安装axios，具体操作如下图所示：

在这里插入图片描述

然后重启项目，来到我们的EmpView.vue组件页面，通过import命令导入axios，代码如下：

import axios  'axios';

那么我们什么时候发送axios请求呢？页面加载完成，自动加载，所以可以使用之前的mounted钩子函数，并且我们需要将得到的员工数据要展示到表格，所以数据需要赋值给数据模型tableData，所以我们编写如下代码：

 mounted(){
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
        .then(resp=>{
            this.tableData=resp.data.data; //响应数据赋值给数据模型
    });
}

此时浏览器打开，呈现如下效果：

在这里插入图片描述

基本上没问题了，但是还有点小bug，性别和图片的内容显示不正确，所以我们需要修复。

首先我们来到ElementUI提供的表格组件，找到如下示例：

在这里插入图片描述

我们仔细对比效果和功能实现代码，发现其中涉及2个非常重要的点：

<template> : 用于自定义列的内容
- slot-scope: 通过属性的row获取当前行的数据

所以接下来，我们可以通过上述的标签自定义列的内容即可，修改性别列的内容代码如下：

 <el-table-column prop="gender"    label="性别" width="140">
     <template slot-scope="scope">
    	 {{scope.row.gender==1?"男":"女"}}
     </template>
 </el-table-column>

性别一列的值修复成功。

图片内容的修复和上述一致，需要借助<template>标签自定义列的内容，需要需要展示图片，直接借助<img>标签即可，并且需要设置图片的宽度和高度，所以直接修改图片列的代码如下：

<el-table-column prop="image"     label="图像" width="180">
    <template slot-scope="scope">
        <img :src="scope.row.image" width="100px" height="70px">
    </template>
</el-table-column>

图片展示修复成功。

项目效果：

在这里插入图片描述

此时整个案例完整，其完整代码如下：

<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <!--header-->
      <el-header style="font-size:40px; background-color: rgb(68, 171, 244); color: azure">智能学习系统</el-header>
      <el-container>
        <!--侧边栏-->
        <el-aside width="230px" style="border: 1px solid #eee">
          <!--default-openeds 默认展开的菜单项-->
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-menu"></i>系统信息管理</template>
                <el-menu-item index="1-1">
                  <router-link to="/dept">部门管理</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/emp">员工管理</router-link>
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--主展示区-->
        <el-main>
          <!--form表单-->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="姓名">
              <!--输入框-->
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <!--下拉列表-->
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!--日期选择器-->
              <el-date-picker
                  v-model="searchForm.entrydate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!--表格，border可以加边框-->
          <el-table :data="tableData" border>
            <!--注意：列名的prop属性与后台数据保持一致-->
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
              <!--插槽-->
            </el-table-column>
            <el-table-column label="性别" width="140">
              <!--插槽-->
              <template slot-scope="scope">
                {{scope.row.gender == 1 ? "男" : "女"}}
              </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作" >
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>

          <br>
          <!--分页条-->
          <!-- Pagination分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              layout="sizes,prev, pager, next,jumper,total"
              :total="1000">
          </el-pagination>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'

  export default {
    data() {
      return {
        tableData: [],
        searchForm: {
          name: "",
          gender: "",
          entrydate:[]
        }
      }
    },
    methods: {
      onSubmit: function() {
        alert("查询数据")
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    mounted() {
      // 发送异步请求，获取数据
      axios.get("https://yapi.pro/mock/63614/emp/list").then(resp=>{
            //响应数据赋值给数据模型
            this.tableData = resp.data.data;
          });
    }
  }
</script>

<style>
</style>

顿河顿河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax技术

我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并。
复制链接

扫一扫

专栏目录