引言
这是属于前端的部分了，先是学习了三件套（HTML,JS,CSS没怎么学，但是大概能理解）之后就开始学习这个了，学习之前应该要知道她是做什么的，但是我没有做这一步，之后会先了解为什么要学习这门技术这个知识点，他们是干什么的。了解清楚之后，学习才会清楚，不然就糊里糊涂的学完了，到最后了才开始总结。
Ajax介绍
是什么？
Ajax（Asynchronous JavaScript and XML）技术在现代Web开发中扮演着至关重要的角色。它允许我们在不重新加载整个页面的情况下，与服务器交换数据和更新部分网页内容。
工作原理
传统Web请求与响应模型 在了解Ajax之前，我们先来看看传统的Web请求与响应模型。在传统模式下，用户发起一个请求，服务器处理请求并返回整个页面的数据，浏览器再重新加载整个页面。
Ajax请求与响应模型 Ajax的工作原理是在用户与服务器之间建立一个中间层（Ajax引擎），使得用户操作与服务器响应异步化。以下是Ajax的工作流程：大约是这么一个流程，不全的话后面再补充（这里使用的是XHR）。
XMLHttpRequest
| 方法 | 描述 |
|---|---|
| open(method , url , async) | 规定请求的类型 * method：请求的类型：GET 还是 POST * url：服务器（文件）位置 * async：true（异步）或 false（同步） |
| send() | 向服务器发送请求（用于 GET） |
| send(string) | 向服务器发送请求（用于 POST） |
四种请求方法
|------|---------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|---------------------------------------------------------------------------------------|
| | get | post | put | delete |
| 介绍 | GET 请求用于向指定资源发出请求，请求中包含了资源的 URL 和请求参数。服务器端通过解析请求参数来返回相应的资源，不会修改服务器端的状态。 | POST 请求用于向指定资源提交数据，通常会导致服务器端的状态发生变化。例如，在 Web 表单中填写用户信息并提交时，就是使用 POST 请求方式将表单数据提交到服务器存储。 | PUT 请求用于向服务器更新指定资源，可以理解为对服务器上的资源进行修改操作。使用 PUT 请求方式会覆盖原有的资源内容，因此需要谨慎使用。 | DELETE 请求用于请求服务器删除指定的资源，可以理解为对服务器上的资源进行删除操作。使用 DELETE 方式请求会导致指定的资源被永久删除，因此需要谨慎使用。 |
| 优点 | 可以被缓存和浏览器保存。 对服务器性能的影响较小。 | 可以提交比 GET 更大的数据量。 相对更安全，因为请求参数不会被包含在 URL 中。 | PUT 请求用于向服务器更新指定资源，可以理解为对服务器上的资源进行修改操作。使用 PUT 请求方式会覆盖原有的资源内容，因此需要谨慎使用。 | 可以永久删除指定的资源。 |
| 缺点 | 不适合用于提交敏感数据。 仅适用于对资源进行查询操作，不能修改服务器端的状态。 | 对服务器性能的影响较大。 不适用于对同一资源进行多次操作。 | 对服务器性能的影响较大。 不适用于对同一资源进行多次操作。 | 对服务器性能的影响较大。 不适用于对同一资源进行多次操作。 |
| 应用场景 | 获取资源信息。 对资源进行查询操作。 | 向服务器提交表单数据。 向服务器上传文件。 创建资源或提交数据到服务器。 | 更新指定的资源。 按照条件更新一组资源。 | 删除指定的资源。 按照条件删除一组资源。 |
| 说明 | | | post 请求所代表的写入数据是一种数据创建行为、从无到有的过程，而 put 则是数据更新行为。 HTML 不支持 put 请求方法 | HTML 不支持 delete请求方法, 要尝试 Delete 请求方法和 put 请求方法，只能使用专门的 REST 测试工具，例如 Postman 来发起请求。 |
两种加载的对比
|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 对比项 | load | loaded |
| 基本含义 | 通常表示加载的动作或过程正在进行中，强调 "加载" 这一行为的发生。 | 更侧重于表示已经完成加载的状态，即 "已加载"。 |
| 常见使用场景 | - 在网页开发中，window.onload 事件用于在整个页面（包括所有资源，如图片、脚本、样式表等）加载完成后执行特定的 JavaScript 代码，这里的 load 强调页面加载这个过程结束的瞬间触发的动作。 - 例如 document.getElementById('myImage').onload = function() { /* 图片加载完成后执行的操作 */ }，当图片开始加载，到加载结束的这个过程中，onload 事件在加载完成的那一刻被触发，执行后续的函数代码，关注的是加载动作的完成时刻及后续操作。 | - 当讨论一个资源（如图片、脚本文件等）已经被成功加载到内存中，处于可使用的状态时，会用 loaded 来描述这种状态。比如，我们可能会说 "这个脚本文件已经 loaded，可以调用其中的函数了"，此时强调的是资源当前所处的已加载完成的状态，而非加载过程。 - 在一些库或框架中，可能会有属性或变量来标记某个模块或资源是否已经 loaded，以便在程序中判断是否可以安全地使用该资源，避免在未完全加载时出现错误。 |
| 语法及使用方式 | - 作为事件时，通常以 onload 的形式出现，绑定到某个元素或对象上，如上述的 window.onload 和 img.onload 等，后面跟着一个函数，当加载完成时，该函数会被调用执行。 - 在某些情况下，也可以作为动词使用，例如 loadData() 这样的函数名，表示执行加载数据的操作，但这种用法相对较为灵活，具体含义取决于函数的实现逻辑和上下文，不过总体上还是围绕 "加载" 这个动作展开。 | - 一般作为形容词或过去分词使用，用来修饰名词，表明该名词所代表的事物处于已加载的状态，如 loadedResource（已加载的资源）；或者在程序逻辑中作为一个状态标记，通过判断某个变量是否为 loaded 来决定后续的操作流程，例如 if (moduleLoaded) { /* 执行依赖于该模块已加载的操作 */ }。 |
思维导图的迭代
个人思维导图介绍
一般我的第一版的思维导图都是从笔记中提炼出来的，不管怎么样现有一个开始，然后又逐渐根据358原则进行修改和整合，所以说第一版的是比较多的，因为纯粹是知识点的堆积，之后才是概括，
思维导图的作用
下面是AI出来的，给自己灌一下心灵鸡汤，总之是有用的，不然也不会发明，推荐使用Xmind,里面的模板比较好看，配色也很好看
知识整理与归纳
- 系统性梳理：能够将复杂的知识体系、繁多的信息内容进行系统的梳理和分类，以清晰的结构呈现出来，帮助用户快速把握知识的整体框架和逻辑关系。例如，在学习历史时，可以将各个历史时期的政治、经济、文化等方面的内容分别展开，形成一个完整的历史知识体系思维导图。
- 要点提炼：便于从大量的文字资料中提取出关键要点，去除冗余信息，使重点更加突出，让用户一眼就能看到核心内容。比如，在阅读一本专业书籍后，通过制作思维导图可以提炼出书中的核心观点、重要概念和关键论据等。
记忆与学习辅助
- 增强记忆效果：由于思维导图采用了图形、线条、颜色等多种视觉元素，相较于纯文字内容，更能刺激大脑的记忆中枢，帮助用户更好地记住信息。研究表明，人们对图形的记忆能力要远远强于对文字的记忆能力。
- 促进理解吸收：通过将知识以可视化的方式展示出来，能够帮助用户更好地理解知识之间的内在联系和逻辑关系，从而加深对知识的理解和吸收。例如，在学习数学公式的推导过程时，利用思维导图可以将各个步骤之间的逻辑关系清晰地展现出来，使学生更容易理解。
- 复习回顾便捷：在复习时，思维导图可以作为一个快速回顾的工具，用户可以根据思维导图中的关键词和逻辑关系，迅速回忆起所学的内容，提高复习效率。
思维激发与创意拓展
- 激发创新思维：在绘制思维导图的过程中，不断地对中心主题进行分支和扩展，能够激发大脑的联想和创造力，帮助用户产生新的想法和思路。例如，在进行产品创意设计时，以产品的核心功能为中心主题，通过思维导图可以拓展出各种不同的设计方向和创新点。
- 多角度思考问题：思维导图可以引导用户从不同的角度去思考问题，对一个主题进行全方位的分析和探讨。比如，在分析一个企业的市场营销策略时，可以从产品、价格、渠道、促销等多个角度展开，帮助企业全面了解市场情况，制定更有效的营销策略。
- 团队头脑风暴：在团队协作中，思维导图是一种非常有效的头脑风暴工具。团队成员可以围绕一个主题共同绘制思维导图，将各自的想法和观点展示出来，促进团队成员之间的思想碰撞和交流，激发团队的创造力和创新能力。
沟通与表达
- 清晰展示思路：在向他人传达自己的想法、观点或计划时，思维导图可以作为一种直观、清晰的展示工具，让对方能够快速理解你的思路和意图。例如，在做项目汇报时，使用思维导图可以将项目的目标、任务、进度、风险等内容一目了然地展示给团队成员和上级领导。
- 促进有效沟通：由于思维导图能够将复杂的内容简化和可视化，减少了因语言表达不清晰或信息传递不准确而导致的误解，从而促进了沟通的有效性。在团队讨论、会议交流等场合，使用思维导图可以让大家更加聚焦于主题，提高沟通效率。
- 个性化表达观点：每个人绘制的思维导图都具有独特的风格和结构，能够体现个人的思维方式和观点，因此在表达个人观点时，思维导图可以更加生动、形象地展示自己的独特见解，增强说服力。
计划与组织
- 任务规划：可以用于制定详细的工作计划、学习计划、项目计划等，将任务按照时间顺序、重要程度、优先级等进行合理的安排和分配，使计划更加清晰、有条理。例如，在制定一个项目计划时，通过思维导图可以将项目的各个阶段、任务、责任人、时间节点等都明确地列出来，方便项目团队成员了解各自的工作职责和任务进度。
- 资源管理：在组织活动或项目时，思维导图可以帮助组织者对所需的资源进行全面的梳理和管理，包括人力资源、物力资源、财力资源等，确保资源的合理配置和有效利用。
- 目标分解：将一个大的目标逐步分解为具体的、可操作的小目标和任务，使目标更加明确和可实现。例如，在制定个人职业发展规划时，通过思维导图可以将长期目标分解为短期目标和具体的行动计划，帮助自己更好地朝着目标前进。
思维导图在知识整理、记忆学习、思维激发、沟通表达以及计划组织等方面都发挥着重要的作用，能够帮助个人和团队提高工作效率、提升学习效果、拓展创新思维等。
第一版
第二版
这一版比较草率，可以说是半成品，凑合着看吧，因为自己整理到这里的时候也是有点晕的
第三版
这一版的是结合了AI的，内容比较多，后续肯定会删除掉一些的，内容太多，照片放上去肯定看不清，我自己知道是什么就好了
第四版
这是最终的版本了，之后应该还会再改的，毕竟学Ajax的时候不是纯的，参和着axios，之后还有jQuery要学
到这里的话基本上是结束了，期待下一次的jQuery吧！
