黑马JavaWeb开发笔记07——Ajax、Axios请求、前后端分离开发介绍、Yapi详细配置步骤

---

前言

本篇文章是2023年最新黑马JavaWeb企业级开发笔记07：Ajax、Axios请求、前后端分离开发介绍、Yapi配置步骤的总结，帮助需要学习Web开发的朋友温故而知新。

1. Ajax
2. Axios
3. 前后端分离开发介绍
4. Yapi接口管理配置步骤

---

一、Ajax

1. 概述

• Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
• 前端页面中的数据，应该来自于后台，后台和前端是互不影响的2个程序，那么前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到Ajax技术。

2. 作用

• 与服务器进行数据交互

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

• 异步交互

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

3. 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。

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