Ajax基本使用

洛克大航海2025-10-11 10:49

第一章 Ajax

1.1 Ajax介绍

1.1.1Ajax概述

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

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

1.1.2 同步异步

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

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

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

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

1.2 原生Ajax

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

    第一步：主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求

    html 复制代码 
    <!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请求的核心对象，提供了各种方法。代码如下：

    js 复制代码 
    //1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

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

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

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

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

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

1.3 Axios

学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

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

  • 引入Axios文件

    html 复制代码 
    <script src="js/axios-0.18.0.js"></script>

  • 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

    • 发送 get 请求

      js 复制代码 
      axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

    • 发送 post 请求

      js 复制代码 
      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.1 请求方法的别名

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请求代码改写成如下：

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

post请求改写成如下：

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

2.1 前后台分离开发

前端开发有2种方式：前后台混合开发 和前后台分离开发。

前后台混合开发

这种开发模式有如下缺点：

  • 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
  • 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
  • 不便管理：所有的代码都在一个工程中
  • 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

前后台分离开发

前后台统一指定一套规范！我们前后台开发人员都需要遵循这套规范开发，这就是我们的接口文档 。接口文档有离线版和在线版本，接口文档示可以查询今天提供资料/接口文档示例里面的资料。

那么基于前后台分离开发的模式下，我们后台开发者开发一个功能的具体流程如何呢？如下图所示：

  1. 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
  2. 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
  3. 前后台并行开发：各自按照接口文档进行开发，实现需求
  4. 测试：前后台开发完了，各自按照接口文档进行测试
  5. 前后段联调测试：前段工程请求后端工程，测试功能

2.1.1 YAPI介绍

前后台分离开发中，我们前后台开发人员都需要遵循接口文档，所以接下来我们介绍一款撰写接口文档的平台。

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。

其官网地址：https://yapi.pro/

YApi主要提供了2个功能：

  • API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
  • Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.1.2 接口文档管理

首先我们登录YAPI的官网，然后使用github或者百度账号登录，没有的话去注册一个，如下图所示：

登录进去后，在个人空间中，选择项目列表->添加测试项目，效果如图所示：

然后点击创建的项目，进入到项目中，紧接着先添加接口的分类，如下图所示

然后我们选择当前创建的分类，创建接口信息，如下图所示：

紧接着，我们来到接口的编辑界面，对接口做生层次的定制，例如：接口的参数，接口的返回值等等，效果图下图所示：

添加接口的请求参数，如下图所示：

添加接口的返回值，如下图所示：

然后保存上述设置，紧接着我们可以来到接口的预览界面，查询接口的信息，其效果如下图所示：篇幅有限，只截取部分

最后，我们还可以设置接口的mock信息，

来到接口的Mock设置窗口，如下图所示：

紧接着我们来到接口的预览界面，直接点击Mock地址，如下图所示：

我们发现浏览器直接打开，并返回如下数据：

如上步骤就是YAPI接口平台中对于接口的配置步骤。

3.1 前端工程化

开发模式存在如下问题：

  • 每次开发都是从零开始，比较麻烦
  • 多个页面中的组件共用性不好
  • js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

  • 模块化：将js和css等，做成一个个可复用模块
  • 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  • 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  • 自动化：项目的构建，测试，部署全部都是自动完成

从而提升开发效率，降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

3.1.1 前端工程化入门

3.1.1.1环境准备

前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli

安装NodeJS
  1. 双击资料中提供的安装包
  1. 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

  1. 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过：

复制代码 
node -v
  1. 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

复制代码 
npm config set prefix "E:\develop\NodeJS"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

  1. 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

复制代码 
npm config set registry https://registry.npmmirror.com/
安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

复制代码 
npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

复制代码 
vue --version
3.1.1.2 Vue项目简介

过Vue-cli创建一个vue项目，然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目:

  • 命令行：直接通过命令行方式创建vue项目

    复制代码 
    vue create vue-project01

  • 图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建

    复制代码 
    vue ui

    图形化界面如下：

创建vue项目

通过第二种图形化界面方式给大家演示。

首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面，如下图所示：

然后进入如下界面：

然后再当前目录下，直接输入命令vue ui进入到vue的图形化界面，如下图所示：

然后我门选择创建按钮，在vue文件夹下创建项目，如下图所示：

然后来到如下界面，进行vue项目的创建

然后预设模板选择手动，如下图所示：

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示：

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

到此，vue项目创建结束

vue项目目录结构介绍

vue项目的标准目录结构以及目录对应的解释如下图所示:

其中我们平时开发代码就是在src目录下

运行vue项目

运行vue项目主要提供了2种方式

第一种方式：图形化界面

  • 通过VS Code提供的图形化界面 ，如下图所示：（注意：NPM脚本窗口默认不显示，可以参考本节的最后调试出来）

    点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端口，我们直接通过浏览器打开地址

    VScode没有此功能的，打开设置，在搜索栏输入npm，勾选Npm: Enable Run From Folder然后刷新就有了。

    最终浏览器打开后，呈现如下界面，表示项目运行成功

    其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码：添加内容Vue

    只要我们保存更新的代码，我们直接打开浏览器，不需要做任何刷新，发现页面呈现内容发生了变化，如下图所示：

    这就是我们vue项目的热更新功能

    对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：

    json 复制代码 
    devServer:{
    port:7000
}

    如下图所示，然后我们关闭服务器，并且重新启动，

​ 重新启动如下图所示：

​

​ 端口更改成功，可以通过浏览器访问7000端口来访问我们之前的项目

第二种方式：命令行方式

直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve即可，如下图所示：

补充：NPM脚本窗口调试出来

第一步：通过设置/用户设置/扩展/MPM更改NPM默认配置，如下图所示

然后重启VS Code，并且双击打开package.json文件 ，然后点击资源管理器处的3个小点 ，勾选npm脚本选项，如图所示

然后就能都显示NPM脚本小窗口了。

3.1.1.3 Vue项目开发流程

对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

js 复制代码 
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上述代码中，包括如下几个关键点：

  • import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
  • router: 路由，详细在后面的小节讲解
  • render: 主要使用视图的渲染的。

来到public/index.html 中，我们删除div的id=app属性，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？这就涉及到render中的App了，如下图所示：

那么这个App对象怎么回事呢，我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

vue的组件文件包含3个部分
  • template: 模板部分，主要是HTML代码，用来展示页面主体结构的
  • script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分，主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例：

此时我们可以打开App.vue，观察App.vue的代码，其中可以发现，App.vue组件的template部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：

接下来我们可以简化模板部分内容，添加script部分的数据模型，删除css样式，完整代码如下：

html 复制代码 
<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

保存直接，回到浏览器，我们发现首页展示效果发生了变化，如下图所示：

4.1Vue组件库Element

4.1.1 Element介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。

学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。其官网地址：https://element.eleme.cn/#/zh-CN，我们主要学习的是ElementUI中提供的常用组件

4.1.2快速入门

  • 首先我们要掌握ElementUI的快速入门，接下来同学们就一起跟着步骤来操作一下。

    • 首先，我们先要安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：

      npm install element-ui@2.15.3

    • 然后我们需要在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：

    js 复制代码 
    import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
    • 在src/views目录下创建一个vue组件文件
    html 复制代码 
    <template>

</template>

<script>
export default {

}
</script>

<style>

</style>

    • 最后我们只需要去ElementUI的官网，找到组件库，然后找到按钮组件，抄写代码即可

    • 最后，我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件，具体操作步骤如下：

    • 然后App.vue组件中的具体代码如下，代码是我们通过上述步骤引入element-view组件时自动生成的。【需要下载vetur插件在VSCode中】

    html 复制代码 
    <template>
  <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

    然后运行我们的vue项目，浏览器直接访问之前的7000端口

    到此，我们ElementUI的入门程序编写成功。

4.1.3 Element组件

4.1.3.1 Table表格

https://element.eleme.cn/#/zh-CN

4.1.3.2 Pagination分页

https://element.eleme.cn/#/zh-CN

4.1.3.3 Dialog对话框

https://element.eleme.cn/#/zh-CN

4.1.3.4 Form表单

https://element.eleme.cn/#/zh-CN

5.1 Vue路由

5.1.1 路由介绍

前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系

当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。

vue官方提供了路由插件Vue Router,其主要组成如下：

  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>：请求链接组件，浏览器会解析成<a>
  • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

其工作原理如下图所示：

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击，发出路由请求;

接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；

最后VueRouter会切换<router-view>中的组件，从而进行视图的更新

5.1.2 路由入门

首先我们需要先安装vue-router插件，可以通过如下命令

复制代码 
npm install vue-router@3.5.1

但是我们不需要安装，因为当初我们再创建项目时，已经勾选了路由功能，已经安装好了。

在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代码如下：

js 复制代码 
import Vue  'vue'
import VueRouter  'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

注意需要去掉没有引用的import模块。

6.1 打包部署

主要分为2步：

  1. 前端工程打包

    • 直接通过VS Code的NPM脚本中提供的build按钮来完整
    • 然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源

  2. 通过nginx服务器发布前端工程

    • nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。

    • niginx在windows中的安装是比较方便的，直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下，直接解压即可，如下图所示就是nginx的解压目录以及目录结构说明：

复制代码 
 **很明显，我们如果要发布，直接将资源放入到html目录中。**

  • 将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下

  • 双击nginx下得nginx.exe文件来启动nginx

  • nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可，其中80端口可以省略

  • 如果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。

相关推荐
要一起看日出3 小时前
数据结构-----栈&队列
java·数据结构·栈·队列
用户916357440953 小时前
LeetCode热题100——11.盛最多水的容器
javascript·算法
Mr_Chester3 小时前
mybatis OGNL+优雅处理简单逻辑
java·tomcat·mybatis
凡大来啦3 小时前
v-for渲染的元素上使用ref
前端·javascript·vue.js
道可到4 小时前
阿里面试原题 面试通关笔记05 | 异常、泛型与反射——类型擦除的成本与优化
java·后端·面试
练习前端两年半4 小时前
🔍 你真的会二分查找吗？
前端·javascript·算法
晴殇i4 小时前
告别 localStorage！探索前端存储新王者 IndexedDB
前端·javascript·面试
Mintopia4 小时前
Next.js 的分布式基础思想：从 CAP 到事件风暴，一路向“可扩展”的银河系巡航
前端·javascript
神仙别闹4 小时前
基于Java（Spring Boot）+MySQL实现电商网站
java·spring boot·mysql
热门推荐
01BongoCat - 跨平台键盘猫动画工具02两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答03智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践04GitHub 镜像站点05UV安装并设置国内源0646个Nano-banana 精选提示词，持续更新中07Cursor Plan Mode：AI 终于知道先想后做了08Linux下V2Ray安装配置指南09GitLab 零基础入门指南：从安装到项目管理全流程10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示