Ajax总结

引言

这是属于前端的部分了，先是学习了三件套（HTML,JS,CSS没怎么学，但是大概能理解）之后就开始学习这个了，学习之前应该要知道她是做什么的，但是我没有做这一步，之后会先了解为什么要学习这门技术这个知识点，他们是干什么的。了解清楚之后，学习才会清楚，不然就糊里糊涂的学完了，到最后了才开始总结。

Ajax介绍

是什么？

Ajax（Asynchronous JavaScript and XML）技术在现代Web开发中扮演着至关重要的角色。它允许我们在不重新加载整个页面的情况下，与服务器交换数据和更新部分网页内容。

工作原理

1. 传统Web请求与响应模型 在了解Ajax之前，我们先来看看传统的Web请求与响应模型。在传统模式下，用户发起一个请求，服务器处理请求并返回整个页面的数据，浏览器再重新加载整个页面。

2. 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吧！