前端视频AJAX基础总结：

webp是Chrome出的一个图片格式，很强大

学习AJAX之前，我们可以通过以下几种方式让浏览器发出对服务端的请求：1地址栏输入地址，回车，刷新2特定元素的href属性或者src属性3表单提交。那如果我们可以用js直接通过代码的方式进行发出网络请求，那么就会强大的很多。

可以拿到服务端给的响应头响应体这种叫网络编程

编辑语言能做到的上限取决于什么？取决于API，取悦于平台提供的接口

说白了，AJAX就是浏览器提供的一套API，可以通过js调用，实现通过代码控制请求与响应，实现网络编程，类比于DOM BOM

为甚么要用js来发送请求，因为资源都在服务端，之前拿东西要刷新才行，用这个不用刷新就可以拿到数据。场景："加载更多"。

F12 —Network选项卡—XHR选项卡中就是AJAX请求（通过js发送的请求）

最开始AJAX返回的响应体是xml格式的，因为以前大返回的大多是HTML页面，现在拿的更多是数据，所以json合适。清晰体量小。

AJAX是一套API，核心提供的类型（构造函数）：XMLHttpRequest。

三行核心代码：

var xhr=new XMLHttpRequest();//初始化，请求代理对象，即安装浏览器（用户代理）xhr类似浏览器作用，发送请求接受响应

xhr.open('GET','http://day-11.io/time.php');//建立一个与服务端特定端口的连接，即：打开浏览器，输入网址。

xhr.send();//敲回车键，开始请求。参数为请求体，按照思路，这行代码应该会返回我们要的东西，但是如果我们在这里接收，代码会卡在这一行。js是单线程的，只能做一件事情，那么就会堵塞，所以不能这么简单拿到。所以采用事件的机智（通知的感觉）

xhr.onreadystatechange=function(){console.log(this.readyState)};//这个事件在xhr状态改变时就会触发。创建/打开/发送等。

这行代码如果放在send后面会打印出：2 3 4 ,那么0 和1呢？因为注册事件的时候xhr已经open了，所以没有1的输出，如果放在open的前面，就会输出1，其实所有的状态都可以拿到，只是注册事件的早晚而已。

在事件中打印出xhr：if(this.readyState!==4)return conlose.log(this) 的结果就可以看到响应体的内容this.responseText属性中

推荐这样来注册事件：避免覆盖的情况，因为上面用了on：

这个代码的执行结果是：0 1 1 2 3 4

readyState=2：已经接收到了响应报文的响应头，通过：this.getAllResponseHeaders();或this.getResponseHeader('server')获取指定键，可以得到服务器的信息，比如Apache/2.4.27(win64)PHP/7.1.9。用wapplayzer插件点击右上角php是可以获取到服务器的信息的，如何知道的，就是通过响应报文。真正开发的时候是要去掉的。

readyState=3:正在下载响应报文的响应体，这个状态有可能响应体为空，有可能不完整。

readyState=4：一切OK（整个响应报文已经完整下载下来了）

设置请求头/体：