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

项目开发的架构模式与异步请求(AJAX)

一、项目开发的架构模式

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

http://www.mrgr.cn/news/61934.html

相关文章:

  • 2024网鼎杯青龙组初赛 web2
  • 聊一聊Elasticsearch的一些基本信息
  • 【数据仓库】
  • 小红书图文无水印下载
  • Java 虚拟机是什么?——探秘 JVM 的核心机制!
  • 堆(数据结构)——C语言
  • 香橙派Orangepi 5plus 配置Hailo-8/Hailo-8L
  • 2024 Rust现代实用教程:1.2编译器与包管理工具以及开发环境搭建
  • 荒野大镖客:救赎 PC版整合包
  • 【K8S系列】Kubernetes 中 NodePort 类型的 Service 无法访问的问题【已解决】
  • 基于安卓Android的助农商城系统APP(源码+文档+部署+讲解)
  • Rust 力扣 - 54. 螺旋矩阵
  • 数据结构算法学习方法经验总结
  • git快速合并代码dev->master
  • ECharts 折线图 / 柱状图 ,通用配置标注示例
  • JAVA基础-Map集合
  • 三格电子——RS485转光纤点对点式【MS-F155-M】
  • 数据结构与算法——(Hash)哈希表与哈希算法
  • 【生物学&水族馆】金鱼成体幼苗检测活体识别系统源码&数据集全套:改进yolo11-Parc
  • 打工人不上班之后,躺平还是躺赢?
  • 数据结构和算法-动态规划(3)-经典问题
  • 自闭症摘帽:突破束缚的新方式
  • YOLO即插即用模块--PPA
  • 【LeetCode】两数之和、大数相加
  • Brainpy的jit编译环境基础
  • Linux_02 Linux常用软件——vi、vim