Ajax阶段总结(二维表+思维导图+四种请求方式)

devtools/2025/1/8 8:12:28/

1. 引言

        经过两个半星期的学习,也算是给ajax结了个尾。总之自己的学习速度和其他人相比,仅仅是差不多,并没有快出来,所以仍需要继续加把劲。

        下面是我的学习过程中的二维表和思维导图以及一个简单的案例,希望大家能够获得自己想要的内容。

2.二维表

ajax、axios、jquery

AJAX

axios

JQuery

what

Asynchronous JavaScript And XML.是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。

AJAX 仅仅组合了:

  • 浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据)
  • JavaScript 和 HTML DOM(显示或使用数据)

是一个基于Promise的HTTP客户端,可以运行在浏览器和node.js环境中。它支持发送各种类型的HTTP请求,如GET、POST、PUT、DELETE等,并提供了丰富的配置选项。

是一个快速、简洁的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。它提供了一套完整的工具链,使得开发者能够轻松地操作DOM元素、处理事件、制作动画效果以及进行Ajax请求等。

where

适用于需要局部刷新网页内容的场景,如表单提交后不刷新页面即可显示结果、动态加载数据等。它广泛应用于需要提升用户体验和减少服务器负载的Web应用中。

适用于需要进行复杂HTTP请求操作的场景,如前后端分离的项目、需要跨域请求的项目等。

适用于需要快速构建交互式Web应用的场景。

why

由于不需要重新加载整个网页,因此可以减少服务器负载和带宽消耗。

支持并发请求和取消请求功能,可以避免不必要的网络请求和资源浪费。

通过优化选择器和事件处理机制、使用CDN加速静态资源加载等方式可以提高性能。

how

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由 JavaScript 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JavaScript 读取响应
  7. 由 JavaScript 执行正确的动作(比如更新页面)

$

1、Selector,查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector功能,还包含其对直接查找或间接查找而扩展的一些功能。

2、Dom元素的属性操作。Dom元素可以看作html的标签,对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加,修改,删除,取值等。

3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度,宽度,display等这些常用的CSS的功能。

4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。

5、Event的操作。对Event的兼容做了统一的处理。

6、动画(Fx)的操作。可以看作是CSS样式上的扩展。

四种请求方式

POST(添加)

GET(查询)

DELETE(删除)

PUT(修改)

what

请求用于向指定资源提交数据,通常会导致服务器端的状态发生变化。

请求用于向指定资源发出请求,请求中包含了资源的 URL 和请求参数。

用于请求服务器删除指定的资源,可以理解为对服务器上的资源进行删除操作。

请求用于向服务器更新指定资源,可以理解为对服务器上的资源进行修改操作。

where

  • 向服务器提交表单数据。
  • 向服务器上传文件。
  • 创建资源或提交数据到服务器。
  • 获取资源信息。
  • 对资源进行查询操作。
  • 删除指定的资源。
  • 按照条件删除一组资源。
  • 更新指定的资源。
  • 按照条件更新一组资源。

why

  • 相对更安全,因为请求参数不会被包含在 URL 中。
  • 可以提交比 GET 更大的数据量。
  • 可以被缓存和浏览器保存。
  • 对服务器性能的影响较小。
  • 可以永久删除指定的资源。
  • 可以更新指定的资源。

how

POST /api/user HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 123{"name": "John Doe","email": "johndoe@example.com","age": 30
}

GET /api/user?id=123 HTTP/1.1
Host: example.com
DELETE /api/user?id=123 HTTP/1.1
Host: example.com
PUT /api/user HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 123{"id": 123,"name": "John Doe","email": "johndoe@example.com","age": 30
}

XHR对象和Promise对象

XHR对象

Promise对象

what

XMLHttpRequest对象

Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值

where

XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。

  • Promise对象广泛用于需要进行异步操作的场景,如网络请求、定时器、文件读写等。在这些场景中,Promise可以帮助开发者更好地处理异步操作的结果和异常。

why

这意味着可以更新网页的部分内容,而无需重新加载整个页面。

Promise对象是JavaScript中进行异步编程的重要工具,它提供了一种简洁、清晰且易于维护的方式来处理异步操作的结果和异常。

How

XMLHttpRequest 对象是 AJAX 的基石。

  1. 创建 XMLHttpRequest 对象
  2. 定义回调函数
  3. 打开 XMLHttpRequest 对象
  4. 向服务器发送请求

同步异步

同步

异步

what

同步代码按照代码的顺序逐行执行,每行代码必须等待前一行代码完成后才能继续执行。

异步代码允许程序在等待某些任务(如I/O操作)完成的同时继续执行其他任务。任务完成后,通过回调函数或事件循环机制通知程序。

where

适用于逻辑简单、不需要等待外部资源的场景。

适用于需要等待外部资源(如网络请求、文件读写)的场景,可以提高程序的响应速度和用户体验。

why

  1. 简单易读: 由于代码是按顺序执行的,逻辑上更容易理解和调试。
  2. 资源利用低: 在等待期间,CPU可能会处于空闲状态,导致资源浪费。
  1. 高效利用资源: 在等待期间,CPU可以处理其他任务,提高资源利用率。
  2. 复杂性高: 由于代码不再按顺序执行,逻辑上可能更复杂,调试和维护也更具挑战性。

how

调用栈

事件循环

是否堵塞代码

是,按顺序执行

响应时间

时间相对较长

时间相对较短

资源使用

在执行过程中可能会占用较多的CPU资源,特别是在等待I/O操作时。

由于非阻塞特性,异步代码在等待I/O操作时可以释放CPU资源,让其他任务得以执行,从而提高了资源利用率。

错误处理

错误处理相对简单,通常使用try...catch语句捕获异常。

错误处理较为复杂,需要在每个回调函数中处理可能出现的错误,或者使用Promise的catch方法来捕获错误。

可读性

由于按顺序执行,同步代码的逻辑通常比较直观,易于理解和调试。

异步代码由于涉及回调函数、Promise链或async/await语法,可能会使逻辑变得复杂,降低代码的可读性和可维护性。

宏任务、微任务

宏任务

微任务

what

由浏览器环境执行的异步代码

由js引擎执行的异步代码

where

由浏览器或Node.js环境发起,如定时器、I/O操作、UI渲染等。

由JavaScript引擎自身发起,如Promise回调函数、MutationObserver等。

why

  • 定时器和I/O操作:宏任务通常用于实现延时执行(如setTimeout)和周期性执行(如setInterval)的功能,这些都是浏览器和Node.js环境中常见的需求。
  • 流畅交互:通过合理利用宏任务和微任务,开发者可以创建更加流畅的用户界面和交互体验,因为微任务可以在不阻塞UI渲染的情况下快速响应用户的输入。
  • DOM变化监听:微任务适用于监听DOM变化并作出即时反应,例如使用MutationObserver API。
  • 后台处理:宏任务适合执行一些不需要即时反馈的后台任务,如数据加载或计算,而微任务则可以用来更新用户界面或处理紧急事件。

how

定时器、I/O操作、UI渲染、事件监听器

Promise、MutationObserve、process.nextTick(Node.js)

How

宏任务队列

微任务队列

优先级

优先级较低,需等待当前事件循环的所有微任务执行完毕才能开始执行。

优先级较高,会在当前事件循环的末尾立即执行。

浏览器环境 和 js引擎环境

浏览器环境

js引擎环境

运行平台

  • JavaScript代码在用户的Web浏览器中运行,如Chrome、Firefox、Safari等。
  • JS引擎可以嵌入到各种环境中,最常见的是浏览器和Node.js环境。例如,V8引擎既用于Chrome浏览器,也用于Node.js。

API提供API提供

  • 提供了丰富的Web API,如DOM操作、AJAX请求、本地存储(localStorage)、IndexedDB等。
  • 主要提供核心JavaScript功能,不直接提供浏览器特有的Web API。Node.js扩展了其功能,提供了文件系统访问、网络通信等服务器端API。

全局对象

全局对象是window,所有全局变量和方法都属于这个对象。

在浏览器中,全局对象同样是window;在Node.js中,全局对象是global

模块系统

通常使用<script>标签引入外部脚本文件。现代浏览器也支持ES Modules或通过构建工具如Webpack来处理模块化代码。

Node.js使用CommonJS模块规范,可以通过require()函数引入模块。

浏览器环境

由于安全限制,对本地文件系统和某些敏感操作的访问受限。

Node.js允许访问文件系统、执行系统命令等,更加灵活。

JS引擎环境

现代浏览器的JS引擎(如V8)具有高度优化的JIT编译器,能够显著提高JavaScript代码的执行效率。

同样具备高效的执行性能,Node.js利用V8引擎在服务器端也能高效地运行JavaScript代码。

3.思维导图

按照358原则,一步步抽象

第一版思维导图

        只是简单的将黑马的课和AR的课都罗列了一遍

第二版

        将两个课融合了一下

第三zz

第四版

4.四种请求方式

4.1原生ajax的XHR

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>原生Ajax实现前后端交互</title></head><body><h1>原生Ajax实现前后端交互</h1>用户名<input type="text" id="name" placeholder="请输入用户名" /><br>评论<input type="text" id="text1" placeholder="请输入评论" /><br><button type="submit" onclick="doAjax()">提交</button><div id="dynamicContainer"></div><script type="text/javascript">function doAjax() {let ajax = new XMLHttpRequest();let name = document.getElementById("name").valuelet text1 = document.getElementById("text1").value// 将接口参数传入let url = "http://localhost:8080/getAjaxTest?name=" + encodeURIComponent(name) + "&text1=" + encodeURIComponent(text1);ajax.onreadystatechange = function() {if (ajax.readyState == 4 && ajax.status == 200) {var datal = ajax.responseText;console.log(datal)let newTag = document.createElement("p");newTag.textContent = datal;let container = document.getElementById("dynamicContainer");container.appendChild(newTag);}}ajax.open("GET", url, true)ajax.send();}</script></body>
</html>

4.2JQuery的Ajax以Get方式请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery以Get请求方法实现前后端交互</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><h1>JQuery以Get请求方法实现前后端交互</h1>用户名<input type="text" id="name" placeholder="请输入用户名" /><br>评论<input type="text" id="text1" placeholder="请输入评论" /><br><button type="submit" onclick="doAjax2()">提交</button><div id="dynamicContainer"></div><script>function doAjax2() {let ajax = new XMLHttpRequest();let name = $("#name").val();let text1 = $("#text1").val();$.get('http://localhost:8080/getAjaxTest', { name: name, text1: text1 },function(datal) {let newTag = document.createElement("p");newTag.textContent = datal;let container = document.getElementById("dynamicContainer");container.appendChild(newTag);}).fail(function() {console.error("An error occurred"); });}</script>
</body>
</html>

4.3JQuery的Ajax以Post方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery以Get请求方法实现前后端交互</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><h1>JQuery以Get请求方法实现前后端交互</h1>用户名<input type="text" id="name" placeholder="请输入用户名" /><br>评论<input type="text" id="text1" placeholder="请输入评论" /><br><button type="submit" onclick="doAjax2()">提交</button><div id="dynamicContainer"></div><script>function doAjax2() {let ajax = new XMLHttpRequest();let name = $("#name").val();let text1 = $("#text1").val();$.get('http://localhost:8080/getAjaxTest', { name: name, text1: text1 },function(datal) {let newTag = document.createElement("p");newTag.textContent = datal;let container = document.getElementById("dynamicContainer");container.appendChild(newTag);}).fail(function() {console.error("An error occurred"); });}</script>
</body>
</html>

4.4JQuery的纯Ajax方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是个纯Ajax方式进行提交</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><h1>这是个纯Ajax方式进行提交</h1>用户名<input type="text" id="name" placeholder="请输入用户名" /><br>评论<input type="text" id="text1" placeholder="请输入评论" /><br><button type="submit" onclick="doAjax2()">提交</button><div id="dynamicContainer"></div><script>function doAjax2() {let ajax = new XMLHttpRequest();let name = $("#name").val();let text1 = $("#text1").val();$.ajax({url: 'http://localhost:8080/postAjaxTest', method: 'POST', data: {name: name,text1: text1},success: function(datal) {let newTag = document.createElement("p");newTag.textContent = datal;let container = document.getElementById("dynamicContainer");container.appendChild(newTag);},error: function(jqXHR, textStatus, errorThrown) {console.error("An error occurred: " + textStatus,errorThrown); // Handle any errors that occur during the request}});}</script></body>
</html>

总结

        仍需要加倍努力。


http://www.ppmy.cn/devtools/148464.html

相关文章

基于深度学习算法的AI图像视觉检测

基于人工智能和深度学习方法的现代计算机视觉技术在过去10年里取得了显著进展。如今&#xff0c;它被广泛用于图像分类、人脸识别、图像中物体的识别等。那么什么是深度学习&#xff1f;深度学习是如何应用在视觉检测上的呢&#xff1f; 什么是深度学习&#xff1f; 深度学习是…

构建现代化的AI流水线:从数据处理到模型部署

人工智能&#xff08;AI&#xff09;的快速发展促使越来越多的开发者关注如何快速、有效地从数据中提取价值。然而&#xff0c;从数据处理到模型部署&#xff0c;这一过程涉及多个复杂步骤。本篇文章旨在介绍构建现代化AI流水线的主要环节&#xff0c;并详细探讨一种常用技术的…

智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之13 方案再探之4:特定于领域的模板 之 div模型(完整版)

前景提要 整个“方案再探”篇 围绕着如何将项目附件文档中Part 1 部分中给出的零散问题讨论整理、重组为一个结构化的设计文档。为此提出了讨论题目&#xff1a; 特定于领域的模板--一个三套接的hoc结构 它是本项目actors 的剧本原型。其地位&#xff1a; 祖传代码脚本模板…

XGBoost 分类模型优化:超参数调优与性能提升的协同攻略

XGBoost 分类模型优化&#xff1a;超参数调优与性能提升的协同攻略 &#x1f9fe; 1. 极端梯度提升&#xff08;XGBoost&#xff09; XGBoost是一个开源软件库&#xff0c;它为C、Java、Python、R、Julia、Perl和Scala提供了一个正则化的梯度提升框架&#xff0c;它适用于Lin…

机器学习周报-ModernTCN文献阅读

文章目录 摘要Abstract 0 提升有效感受野&#xff08;ERF&#xff09;1 相关知识1.1 标准卷积1.2 深度分离卷积&#xff08;Depthwise Convolution&#xff0c;DWConv&#xff09;1.3 逐点卷积&#xff08;Pointwise Convolution&#xff0c;PWConv&#xff09;1.4 组卷积(Grou…

【OpenCV】使用Python和OpenCV实现火焰检测

1、 项目源码和结构&#xff08;转&#xff09; https://github.com/mushfiq1998/fire-detection-python-opencv 2、 运行环境 # 安装playsound&#xff1a;用于播放报警声音 pip install playsound # 安装opencv-python&#xff1a;cv2用于图像和视频处理&#xff0c;特别是…

CDP集群安全指南-动态数据加密

[〇]关于本文 集群的动态数据加密主要指的是加密通过网络协议传输的数据&#xff0c;防止数据在传输的过程中被窃取。由于大数据涉及的主机及服务众多。你需要更具集群的实际环境来评估需要为哪些环节实施动态加密。 这里介绍一种通过Cloudera Manager 的Auto-TLS功能来为整个…

网络安全技能试题总结参考

对网络安全技能测试相关的试题进行了总结,供大家参考。 一、单选题 1.(单选题)以下属于汇聚层功能的是 A.拥有大量的接口,用于与最终用户计算机相连 B.接入安全控制 C.高速的包交换 D.复杂的路由策略 答案:D 2.(单选题)VLAN划分的方法,选择一个错误选项 A.基于端口…