当前位置：首页 > news >正文

项目开发的架构模式与异步请求（AJAX）

news 2024/10/30 18:15:23

一、项目开发的架构模式

1. 架构模式的分类

在项目开发中，架构模式通常分为以下两种类型：

B/S架构（浏览器/服务端）
C/S架构（客户端/服务端）

例如，QQ和微信的设计均基于C/S架构。这种架构的本质在于数据的共享与交互，通常需要数据库来做凭据或记录。

2. 访问地址的来源

在架构设计时，访问地址由服务端提供，技术架构的选择必须支持Web服务，以遵循HTTP/HTTPS协议。以下是几种常见的技术栈：

Go
- Gin
- Beego
- Inris
Java
- JSP/Servlet
- Struts/Struts2
- Spring MVC
- Spring Boot

3. 服务端地址路由的目的

服务端的路由地址主要用于获取资源或数据。可以将其分为以下两类：

资源
- 适合单体架构：动态资源（HTML）和静态资源（CSS/JS/图片）。
数据
- 适合前后端分离架构：数据以JSON等格式在前后端之间传输。

二、同步请求与异步请求

1. 同步请求

同步请求的处理通常通过表单进行，用户的操作会导致页面跳转。例如，在登录流程中，成功后跳转到首页，失败则返回合理的提示。同步请求的缺陷包括：

页面交互需要在多个页面间完成，导致用户体验不佳。
服务器负担较重，可能造成性能问题。

2. 异步请求

异步请求（AJAX）是一种更为高效的网络请求方式。AJAX的优势在于不需要重新加载整个页面，就能与服务器交换数据并更新部分网页内容。AJAX依赖JavaScript事件来触发请求。

3. AJAX的工作原理

AJAX的核心组件是XMLHttpRequest对象，以下是其主要组成部分：

onreadystatechange：监听请求状态变化。
open：设置请求的类型（GET/POST）和URL。
send：发送请求。

4. AJAX的具体实现

以下是一个使用AJAX进行异步请求的简单示例：

准备Mock数据

{"message": "ok","status": 200,"data": {"username": "飞哥","age": 20}
}

HTML与JavaScript代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
</head>
<body><div id="myDiv"><h2>使用 AJAX 获取服务端数据</h2></div><button type="button" onclick="loadData()">加载服务端数据</button><script>function loadData(){var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200){document.getElementById("myDiv").innerHTML = xmlhttp.responseText;}}xmlhttp.open("GET", "/json/data.json", true);xmlhttp.send();}</script>
</body>
</html>

封装AJAX请求

为了提高复用性，可以将AJAX请求进行封装：

var ajax = function(url, method, successFn, failFn){var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');request.open(method, url);request.onreadystatechange = () => {if (request.readyState === 4) {if (request.status == 200) {successFn(request.response);} else if (request.status >= 400) {failFn(request, request.status);}}};request.send();
};function loadData() {ajax("/model/data.json", "get", function(res) {console.log(res);});
}