当前位置：首页 > article >正文

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

article 2025/1/5 6:26:48

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	网页中发生一个事件（页面加载、按钮点击）由 JavaScript 创建 XMLHttpRequest 对象 XMLHttpRequest 对象向 web 服务器发送请求服务器处理该请求服务器将响应发送回网页由 JavaScript 读取响应由 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 的基石。创建 XMLHttpRequest 对象定义回调函数打开 XMLHttpRequest 对象向服务器发送请求

同步异步

	同步	异步
what	同步代码按照代码的顺序逐行执行，每行代码必须等待前一行代码完成后才能继续执行。	异步代码允许程序在等待某些任务（如I/O操作）完成的同时继续执行其他任务。任务完成后，通过回调函数或事件循环机制通知程序。
where	适用于逻辑简单、不需要等待外部资源的场景。	适用于需要等待外部资源（如网络请求、文件读写）的场景，可以提高程序的响应速度和用户体验。
why	简单易读: 由于代码是按顺序执行的，逻辑上更容易理解和调试。资源利用低: 在等待期间，CPU可能会处于空闲状态，导致资源浪费。	高效利用资源: 在等待期间，CPU可以处理其他任务，提高资源利用率。复杂性高: 由于代码不再按顺序执行，逻辑上可能更复杂，调试和维护也更具挑战性。
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").value
				let 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>