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

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样式上的扩展。 |

四种请求方式

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语法，可能会使逻辑变得复杂，降低代码的可读性和可维护性。 |

宏任务、微任务

浏览器环境和 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

html 复制代码

<!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方式请求

html 复制代码

<!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方式

html 复制代码

<!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方式

html 复制代码

<!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>

总结

仍需要加倍努力。

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

1. 引言

2.二维表

ajax、axios、jquery

四种请求方式

XHR对象和Promise对象

同步异步

宏任务、微任务

浏览器环境 和 js引擎环境

3.思维导图

4.四种请求方式

4.1原生ajax的XHR

4.2JQuery的Ajax以Get方式请求

4.3JQuery的Ajax以Post方式

4.4JQuery的纯Ajax方式

总结

浏览器环境和 js引擎环境