一、项目开发的架构模式
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);});
}