项目开发的架构模式与异步请求（AJAX）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36372352/article/details/143369791

一、项目开发的架构模式

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);
    });
}