一、项目开发的架构模式
1. 架构模式的分类
在项目开发中，架构模式通常分为以下两种类型：
例如，QQ和微信的设计均基于C/S架构。这种架构的本质在于数据的共享与交互，通常需要数据库来做凭据或记录。
2. 访问地址的来源
在架构设计时，访问地址由服务端提供，技术架构的选择必须支持Web服务，以遵循HTTP/HTTPS协议。以下是几种常见的技术栈：
- Go
- Gin
- Beego
- Inris
- Java
- JSP/Servlet
- Struts/Struts2
- Spring MVC
- Spring Boot
3. 服务端地址路由的目的
服务端的路由地址主要用于获取资源或数据。可以将其分为以下两类：
二、同步请求与异步请求
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);});
}
