Ajax：回忆与节点

news2025/1/11 2:28:33

一点回忆

面对我的Ajax学习，实现前后端交互，最开始我采用的使用网络寻找intellij IDEA Ultimate破解方法，然后最终成功，然后按照相关教程配置java ee项目，然后中间又去配置了Tomcat服务器，然后又去学习了一点jsp以及servlet的相关知识，最终我无法实现从第一个jsp页面跳转到其他Ajax交互实现方法的jsp页面而告终。

尽管我的第一次尝试挺轻松的，直到我不用写后端，直接把后端的jar包发给我，相应的接口文档也有介绍，只能说，当时确实被打击到了，觉得似乎前端不是很难，难度直接从100变成10，当时就给我干懵了，我前前后后用了几天配置环境等等，最后告诉我，我那些都用不上了，然后我用了二十分钟实现了需求。

直到今天，我了解到为什么JavaScript是单线程，以及它的效率不高，还有同步等等问题，我只能说，它这个东西一点都不简单，小看它了，也是给我提了个很强烈的醒，不要失去敬畏之心。

在我第一次验收的时候，我似乎是走歪了路，我对Ajax的重要的技术点漏了很多，然后之后又想补上漏了的知识点，然后似乎又有点偏激了，直接开始抄写文档了，学习了XMLHttpRequest（XHR）的每一个属性，标准属性与非标准属性，还有继承而来的属性，以及非继承的属性，现在想想，确实是太偏激了，应该止于了解常用的，现阶段不该太深入的，然后就是用了这么久，学习了接近一个月的在校时间，可能就是因为开学了之后浮躁了好多，然后现在我用这么久才学了一个Ajax。不过，也是长记性了，博客需要每周都写，不然容易忘记自己的阶段情况，容易堕落了，这个写博客的习惯，我觉得有必要延续到以后写工作。

然后下面就是我的Ajax笔记，作为一个节点留下为自己作为纪念。

思维导图+二维表

比较内容	XMLHttpRequest	jQuery	axios
是什么	Ajax 功能实现依赖的对象	一个 js 的代码库，一个轻量级的框架	一个基于 Promise 的网络请求库
有什么用	通过 HTTP 在浏览器和 web 服务器之间收发 XML 或其他数据	封装了 JavaScript 的基本内容	可以用在浏览器和 node.js 中，但是符合最新的 ES 规范
哪里用	进行前后端交互的地方	快速获取文档元素，提供漂亮的页面动态效果，创建 AJAX 无刷新网页	可以用在浏览器和 node.js 中
怎么用	写在 js 代码中，通过创建对象，设置标头，发送	针对选择器和事件处理	从浏览器创建 XHR，从 node.js 创建 http 请求
封装有什么不同		主要封装了 ES、DOM、BOM，只有很小一部分是 ajax	本质上就是 ajax，简单来说就是发送 http 请求的（GET 和 POST）

比较项目	普通文件	XML 文件	JSON 文件
是什么	计算机中用来存储和组织数据的基本单位	同样是基本单位，但是它有自己的规范要求	是基于ECMAScript的一个子集设计的，是一种开放标准的文件格式和数据交换格式
为什么	系统设置，存储任意内容	只针对规范进行存储	简洁和清晰的层次结构有效提升了网络传输效率，易于人认识，易于机器解析和生成，与服务器之间的 web 应用程序的数据交换很好
哪里使用	存储任意数据	存储指定数据，比如列表、json 字符串等等	存储指定的 JSON 结构的数据序列
怎么使用	通过记事本或其他文本编辑器	同样是通过记事本或其他文本编辑器	通过记事本或文本编辑器

JavaScript 中，同步（Synchronous)和异步（Asynchronous)是两种处理代码执行顺序的主要方式。

比较项目	同步 JavaScript	异步 JavaScript
what	前一个任务结束后再执行后一个任务，程序执行顺序与任务的排列顺序是一致同步的	不按照代码顺序执行，一个异步过程不再与原有的序列有顺序关系，程序的执行顺序与任务的排列顺序是不一致的
why	这是 js 语言自身的特定，所以他是单线程	从主线程发射一个子线程来完成任务
where	正常的嵌入 HTML 或者单独的 js 文件	同样嵌入 HTML 或者 js
how	直接嵌入到 HTML 文件中	只有在进行 Ajax 调用的意义上是异步

比价项目	阻塞	非阻塞
what	调用（函数），（函数）没有接收完数据或者没有得到结果之前，不会返回。	调用（函数），（函数）立即返回，通过select通知调用者
why	线程进入了不可执行状态，此时，CPU 不会给线程分配时间片，即线程暂停运行	不能立刻得到结果返回之前，该调用不会阻塞当前线程
where	调用者等待返回结果	调用者等待返回结果
how	常常出现在多线程编程，比如 Thread.sleep,还有 Object.wait	常常出现等待异步操作完成时保持响应，而不是阻塞整个应用程序。比如： 1.回调函数 2.Promise 对象 3.事件循环和 setTimeout

XMLHttpRequest	构造函数	实例方法	属性	事件
what	一个特殊的方法，用来实例化一个对象	XMLHttpRequest 这个类封装的方法	它是这个对象的特性或者说数据成员	一个代表性的事情
why	因为不调用构造或其他方式获得一个对象的话，什么都干不了	不能只有一个人，而没有这个人生存的方法	因为它的存在是为了更好的表示方法的状态等等	触发对象具有的事情，然后会有返回值，此时就可以更轻松的让计算机弄懂它怎么了
where	在要进行前后端交互：准备对象	对象进行操作	直接就是对象然后.属性	直接就是判断对应的事件的返回值，然后就可以了
how	var xhr = new XMLHttpRequest()	xhr.open()/xhr.send()	比如 onreadystatechange 属性,然后 xhr.onreadystatechange = function(){ if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){ console.log(xhr.responseText); } }	比如： function doSomething() { if (request.readyState == 4) { // 处理响应数据 } }

比较方法	open	setRequestHeader	send
what	使用 XHR 对象时首先调用的方法	js 中用于设置头部信息的函数	一个用来发送 HTTP 请求的方法
why	初始化一个请求	发送 Ajax 请求前，需要先设置请求头（自定义）	设置好要发送到后端的数据，需要有发送这一步，就像发送邮件一样
where	需要一个请求的地方	在 open 方法与 send 方法之间	在你设置完你要发送的东西，以及指定好指定的发送格式以及返回格式之后
how	使用这个方法，填入对应的参数，请求方法，URL，是否异步	xhr.setRequestHearder(header, value); header 参数是 HTTP 请求头部字段的字符串，value 参数是与 header 关联的值。 header 可以写 Content-Type 用来指定发送到服务器的数据类型；Accept:指定客户端可以接收到的内容数据类型，可以写 application/json 还有字符串数字日期和时间等等	xhr.send() send 中可以写空，也可以写 null；在使 get 或者 HEAD 方法的时候应该写 null ，也可以不写，不写的话会被默认为 null；然后这个还和请求是同步或者异步有一定的关系，如果是同步的话，需要到它全部完成才会返回，如果是异步的话，直接就会返回。如果没有设置过标头的话，就是 Accept 头部信息，就会发送“/”的 Accept 头部。
role	创造者	装修工	信使