这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能。
大家好，我是 IT 修真院上海分院的何岳，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网 JS任务五，深度思考中的知识点——什么是AJAX?
1. 背景介绍
什么是AJAX?
async JavaScript and xml，异步的js和xml
ajax之所以称为异步的js和xml，主要原因是：当初最开始用ajax实现客户端和服务器端数据通信的时候，传输的数据格式一般都是xml格式的数据，所以把它称之为异步js和xml（现在一般都是基于json格式来进行数据传输的）
2. 知识剖析
xml和异步的js
xml：可扩展的标记语言，作用是用来存储数据的（通过自己扩展的标记名称清晰的展示出数据结构）
xml:
<?xml version ="1.0" encoding ="UTF-8"?>
<root>
<student>
<name>张三</name>
<age>25</age>
<socre>
<english>100</english>
<math>99</math>
<chinese>89</chinese>
</socre>
<name>李四</name>
<age>24</age>
<socre>
<english>99</english>
<math>97</math>
<chinese>98</chinese>
</socre>
</student>
</root>
异步的js:这里的异步不是说ajax只能基于异步进行请求（虽然建议都是使用异步编程），这里的异步特指的是“局部刷新”
局部刷新vs全局刷新
全局刷新
在非完全前后端分离项目中，前端开发只需要完成页面的制作，并且把一些基础的人机交互效果使用js完成即可，页面中需要动态呈现内容的部分，都是交给后台做数据绑定和基于服务器进行渲染的（服务器端渲染）
局部刷新
前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完成渲染的
1.向服务器端发送ajax请求
2.把从服务器端获取的数据解析处理，拼接成需要展示的html字符串
3.把拼接好的字符串替换页面中的某一部分内容（局部刷新），页面整体不需要重新加载，局部渲染即可
基于原生实现ajax过程
<script>
//-->创建一个ajax对象
let xhr = new XMLHttpRequest(); //不兼容IE6及更低版本浏览器（IE6:ActiveXObject）
//-->打开请求地址（可以理解为一些基础配置，但是并没有发送请求）
xhr.open([method], [URL], [async], [user name], [user password]);
//-->监听ajax，获取响应信息（获取响应头信息，获取响应主体信息）
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
let result = xhr.responseText; //获取响应主体中的内容
}
}
//-->发送ajax请求（括号中的内容就是请求主体的内容）
xhr.send(null);
</script>
ajax请求方式
1.get系列请求（获取）
（1）get
（2）delete：从服务器端删除某些资源文件
（3）head：只想获取服务器端返回的响应头信息（响应内容不需要获取）
（4）...
2.post系列请求（推送）
（1）post
（2）put：向服务器中增加指定的资源文件
（3）...
不管哪一种请求方式，客户端都可以把一些信息传递给服务器端，服务器端也可以把信息返回给客户端，只是get系列一般以获取为主（给的少，拿回来的多）；post系列一般以推送为主（给的多，拿回来的少）；
（1）如果想获取一些动态展示信息，一般使用get请求，因为只需要向服务器端发送请求，告诉服务器端想要什么，服务器端就会把需要的数据返回
（2）在实现注册功能的时候，需要把客户输入的信息发送给服务器端进行存储，服务器端一般返回成功还是失败等状态，此时我们一般都是基于post请求完成的
URL:请求数据地址（API地址）
真实项目中，后端会编写一个API文档，在API文档中汇总了获取哪些数据需要哪些地址，按照文档操作即可
[ASYNC]
ASYNC:异步
SYNC:同步
设置当前ajax请求是异步的还是同步的，不写默认是异步（true），如果设置为false，则代表当前请求是同步的
3. 常见的问题
get和post的区别
4. 解决方案
get系列请求和post系列请求，在真实项目中存在很多的区别：
1.get请求传递给服务器端的内容一般没有post传递给服务器端的多
原因：get请求传递给服务器端的内容一般都是基于URL地址问号传递参数来实现的；而post请求一般都是基于设置请求主体来实现的。各浏览器都有自己关于url最大长度的限制（谷歌：8kb，火狐：7kb，IE：2kb...），超过限制长度的部分，浏览器会自动截取掉，导致传递给服务器的数据缺失。理论上post请求通过请求主体传递是没有大小限制的，真实项目中为了保证传输的速率，也会限制大小（比如上传的资料或者图片会做大小的限制）
2.get请求很容易出现缓存（这个缓存不可控：一般我们都不需要），而post不会出现缓存（除非自己做特殊处理）
原因：get是通过url问好传参传递给服务器信息，而post是设置请求主体，设置请求主体不会出现缓存，但是URL问号传参就会
3.get请求没有post请求安全（post也不是十分安全，只是相对安全）
原因：get是通过url问好传参传递给服务器信息。有一种比较简单的黑客技术：URL劫持，也就是可以把客户端传递给服务器端的数据劫持掉，导致信息泄露
5. 编码实战
6. 扩展思考
全局刷新的优缺点
[优点]
1.动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
2.从服务器端获取的结果就已经是最后要呈现的页面了，不需要客户端做额外的事情，所以页面加载速度快（前提是服务器端处理速度够快，能够处理过来），所以类似jd，taobao这些网站的首屏数据都是经由服务器端渲染的
[缺点]
1.如果页面中存在需要实时更新的数据，每一次想要展示最新的数据，页面都要重新刷新一次，这样是不行的
2.都交给服务器做数据渲染，服务器端压力太大，如果服务器端处理不过来，页面呈现的速度更慢（所以jd，taobao这类网站除了首屏是服务器端渲染的，其他屏都是客户端做数据渲染绑定）
3.这种模式不利于开发（开发效率低）
7. 参考文献
https://www.cnblogs.com/smyhvae/p/8485028.html
8.讨论问题：
问：
1.局部刷新的优缺点？
2.AJAX的状态码？
3.ajax中其他常用的属性和方法
答：
1.[优点]
a.可以根据需求，修改页面中某一部分的内容（例如实时刷新），整体页面不刷新，性能好，体验好（所有表单验证，需要实时刷新的需求都要基于ajax实现）
b.有利于开发，提高开发的效率
（1）前后端完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后端用什么技术，真正意义上实现了技术的划分
（2）可以同时进行开发：项目开发开始，首先制定前后端数据交互的接口文档（文档中包含了调取哪个接口或者那些数据等协议规定），后台把接口先写好
[缺点]
a.不利于SEO优化：第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于SEO收录，后期经过js添加到页面中扥内容，并不会写在页面的源代码中（是源代码不是页面结构）
b.交由客户端渲染，首先需要把页面呈现，然后通过js异步ajax请求获取数据，然后数据绑定，浏览器把动态增加的部分重新渲染，无形中浪费了一些时间，没有服务器渲染页面呈现速度快
2. xhr.readyState
0：UNSENT 未发送，只要创建一个ajax对象，默认就是零
1：OPENED 已经执行了xhr.OPEN这个操作
2：HEADERS_RECEIVED 当前ajax的请求已经发送，并且已经接收到服务器端返回的响应头信息了
3：LOADING 响应主体内容正在返回的路上
4：DONE 响应主体内容已经返回到客户端
3. 通过let xhr = new XMLHttpRequest();
console.dir(xhr); 可以看到所有的属性和方法
感谢观看, 如有出错, 恳请指正
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。
技能树.IT修真院
来源：CSDN
作者：jnshu_it
链接：https://blog.csdn.net/jnshu_it/article/details/84031211