Ajax：回忆与节点
一点回忆
面对我的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 | 创造者 | 装修工 | 信使 |