目录
了解Ajax
同步与异步
原生Ajax
Axios
Axios入门
前后端分离开发
介绍
了解Ajax
Ajax
- 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。
- 作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
Ajax 不是一种新的编程语言，而是一种使用现有标准的技术组合。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，更新网页的部分内容，从而提高用户体验。
同步与异步
- 同步交互是指客户端发起请求后，会等待服务端处理请求并返回结果，在这个过程中客户端会处于阻塞状态，直到接收到服务端的响应。
- 例如，客户端向服务端发送一个查询请求，然后等待服务端返回查询结果，在等待期间客户端不能进行其他操作。
- 异步交互则是客户端发起请求后，不会等待服务端的响应，而是继续执行其他操作。服务端处理完请求后，会主动通知客户端或者将结果存储在某个地方，客户端可以在合适的时候去获取结果。
- 例如，客户端发送一个异步任务请求给服务端，然后客户端可以去处理其他事情，服务端处理完任务后会通知客户端，客户端再去获取任务的结果结果。
原生Ajax
原生的Ajax通常需要以下流程：
- 准备好数据地址
- 创建XMLHttpRequest对象：用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
原生 Ajax 的代码相对较为复杂，需要处理较多的细节，如创建 XMLHttpRequest 对象、设置请求头、处理回调函数等，这导致开发效率降低。相比于使用现成的库或框架，原生 Ajax 需要开发者自己编写更多的代码，增加开发成本。
由于比较繁琐，现在已经几乎不使用了。
Axios
- 介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。
- 官网：Axios中文文档 | Axios中文网
Axios入门
- 引入Axios的js文件
<script src="js/axios-0.18.0.js"></script> - 使用Axios发送请求，并获取响应结果
//通过axios发送异步请求-get axios({method: "get",url: "http://......" }).then(result => {console.log(result.data); })//通过axios发送异步请求-post axios({ method: "post", url: "http://......", data: "id=1" }).then(result => { console.log(result.data); })
前后端分离开发
介绍
先介绍一下前后端混合开发：
- 前后端混合开发是一种将前端和后端的代码逻辑在同一项目中进行混合编写的开发方式。
但是这种开发方式存在一些缺点：
- 沟通成本高：由于前后端工作混合在一起，可能导致前后端开发人员之间的沟通变得复杂，对于需求的理解和协作可能会出现偏差，增加沟通成本。
- 分工不明确：前后端的职责界限不清晰，容易导致工作重叠或遗漏，影响开发效率和质量。
- 不便管理：混合开发使得项目的管理变得更加困难，包括代码的组织、版本控制、测试等方面，可能会出现混乱的情况。
- 不便维护扩展：当项目需要进行维护或扩展时，由于代码的耦合性较高，可能会影响到整个系统的稳定性，增加维护和扩展的难度。
为了避免这些缺点，通常会采用前后端分离的开发方式，明确前后端的职责分工，提高开发效率、可维护性和扩展性。
- 前后端分离开发是一种将前端和后端的开发工作分开进行的开发模式。
在前后端分离的架构中，前端专注于用户界面的设计和实现，负责页面的展示、交互逻辑等；后端则专注于服务器端的业务逻辑处理、数据库操作等。
前后端之间通过 API 进行数据交互。前端通过发送请求到后端的 API，获取数据并进行展示；后端接收前端的请求，处理业务逻辑，返回相应的数据。
开发步骤：
需求分析 -> 接口定义（API接口文档）-> 前后端并行开发（遵守规范） -> 测试（前端、后端） -> 前后端联调测试
END
学习自：黑马程序员——JavaWeb课程