1. 引言
经过两个半星期的学习，也算是给ajax结了个尾。总之自己的学习速度和其他人相比，仅仅是差不多，并没有快出来，所以仍需要继续加把劲。
下面是我的学习过程中的二维表和思维导图以及一个简单的案例，希望大家能够获得自己想要的内容。
2.二维表
ajax、axios、jquery
AJAX |
axios |
JQuery |
|
what |
Asynchronous JavaScript And XML.是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。 AJAX 仅仅组合了：
|
是一个基于Promise的HTTP客户端，可以运行在浏览器和node.js环境中。它支持发送各种类型的HTTP请求，如GET、POST、PUT、DELETE等，并提供了丰富的配置选项。 |
是一个快速、简洁的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。它提供了一套完整的工具链，使得开发者能够轻松地操作DOM元素、处理事件、制作动画效果以及进行Ajax请求等。 |
where |
适用于需要局部刷新网页内容的场景，如表单提交后不刷新页面即可显示结果、动态加载数据等。它广泛应用于需要提升用户体验和减少服务器负载的Web应用中。 |
适用于需要进行复杂HTTP请求操作的场景，如前后端分离的项目、需要跨域请求的项目等。 |
适用于需要快速构建交互式Web应用的场景。 |
why |
由于不需要重新加载整个网页，因此可以减少服务器负载和带宽消耗。 |
支持并发请求和取消请求功能，可以避免不必要的网络请求和资源浪费。 |
通过优化选择器和事件处理机制、使用CDN加速静态资源加载等方式可以提高性能。 |
how |
|
|
$ 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 |
|
|
|
|
how |
|
|
|
|
XHR对象和Promise对象
XHR对象 |
Promise对象 |
|
what |
XMLHttpRequest对象 |
Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值 |
where |
XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。 |
|
why |
这意味着可以更新网页的部分内容，而无需重新加载整个页面。 |
Promise对象是JavaScript中进行异步编程的重要工具，它提供了一种简洁、清晰且易于维护的方式来处理异步操作的结果和异常。 |
How |
XMLHttpRequest 对象是 AJAX 的基石。
|
|
同步异步
同步 |
异步 |
|
what |
同步代码按照代码的顺序逐行执行，每行代码必须等待前一行代码完成后才能继续执行。 |
异步代码允许程序在等待某些任务（如I/O操作）完成的同时继续执行其他任务。任务完成后，通过回调函数或事件循环机制通知程序。 |
where |
适用于逻辑简单、不需要等待外部资源的场景。 |
适用于需要等待外部资源（如网络请求、文件读写）的场景，可以提高程序的响应速度和用户体验。 |
why |
|
|
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 |
|
|
how |
定时器、I/O操作、UI渲染、事件监听器 |
Promise、MutationObserve、process.nextTick（Node.js） |
How |
宏任务队列 |
微任务队列 |
优先级 |
优先级较低，需等待当前事件循环的所有微任务执行完毕才能开始执行。 |
优先级较高，会在当前事件循环的末尾立即执行。 |
浏览器环境 和 js引擎环境
浏览器环境 |
js引擎环境 |
|
运行平台 |
|
|
API提供API提供 |
|
|
全局对象 |
全局对象是 |
在浏览器中，全局对象同样是 |
模块系统 |
通常使用 |
Node.js使用CommonJS模块规范，可以通过 |
浏览器环境 |
由于安全限制，对本地文件系统和某些敏感操作的访问受限。 |
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>总结
仍需要加倍努力。