一、认识Ajax
1.1、介绍Ajax
Ajax(Asyncchronous JavaScript and XML)：异步JavaScript和XML的简写。
Ajax中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功响应后，浏览器才会开始处理响应数据。
传输的内容：原本前后端进行传输的是XML(可扩展标记语言)，如今不怎么使用了，比较常用的就是JSON.
目的：在不重新加载整个页面的情况下，对页面的某个部分进行更新！
1.2、Ajax的基本使用(含测试)
四步骤如下：
<script> const url = "https://www.imooc.com/api/http/search/suggest?words=js"; //1、创建xhr对象 const xhr = new XMLHttpRequest(); //4、监听事件，处理响应(为了更好的兼容性写在open()方法前) //onreadystatechange：监听事件。也可以使用写成xhr.addEventLisener('readystatechange',()=>{},false) xhr.onreadystatechange = () => { console.log(xhr.readyState); //xhr.readyState监听状态有四个，监听开始到结束该函数会执行4次，直到4表示执行完，这里直接过滤掉前面三种状态 if (xhr.readyState != 4) return; //若是状态码为200-300之间表示响应正常或者说是重定向(未修改) if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { //打印响应的内容(字符串形式) console.log(xhr.responseText); } } //2、准备发送请求(参数1：请求方式。参数2：请求地址。参数3：是否异步，这里为true) //请求方式如：GET、POST、PUT、delete xhr.open("GET", url, true); //3、发送请求，参数为请求体携带的数据 xhr.send(null); </script>
补充：
1、其他变量，如xhr.statusText表示HTTP状态说明。
2、readyState的五个状态(状态0不会调用函数)。
0：未初始化，尚未调用open() 1：启动。已经调用open()，但尚未调用send() 2：发送，已经调用send()，但尚未接收到响应 3、接收，已经接收到部分响应数据。 4、完成，已经接收到全部响应数据，而且已经可以在浏览器中使用了！
3、对于readystatechange事件最好放在open()方法之前来进行定义！！！
二、请求方式(含携带数据与数据编码)
2.1、GET请求
携带数据
GET请求不能通过请求体来携带数据，但是可以通过请求头来携带。
说明：对于GET请求，在send()中填写参数实际是无效的，不会将请求参数传递出去。
携带方式：直接在请求路径后面写?key=value&key1=value1来表示请求参数。
或者你还可以使用form表单提交方式，点击提交按钮会自动拼接form表单中带有name的表单元素到url请求路径中发送请求。
数据编码
为什么要进行编码？
若是想要传递请求参数为中文的，尽量对其进行编码，否则后端可能会无法解析(不同的浏览器也会对中文进行编码，不过编码方式可能会不同。所以我们对于中文字体尽量自己去编码来进行传递请求参数)。
如何编码？
使用encodeURIComponent()API来进行编码。解码为：decodeURIComponent //直接对请求参数来进行编码即可！！！ const url = `https://www.imooc.com/api/http/search/suggest?words=${encodeURIComponent('学习')}`;
2.2、POST
携带数据
如何携带数据？
写在请求路径后。
对于Ajax发送POST请求，可以将指定的请求参数写在send()方法中作为参数放置在请求体里。
携带方式：
//① 直接写在请求路径后 const url = `https://www.imooc.com/api/http/search/suggest?words=${encodeURIComponent('学习')}`; ....... //2、准备发送请求 xhr.open("POST", url, true); //3、发送请求，参数为请求体携带的数据 //② 写在send()方法中，通过指定格式携带。 //第一种形式是key=value&key1=value1;第二种形式就是将对象转换为json字符串进行传递，后端来进行转换为对象。 xhr.send("username=changlu&sex=男");
其他方式也是通过form表单来进行POST请求，表单元素信息都是通过请求体来携带传输。
数据编码
同样也是使用encodeURIComponent()来进行编码。
示例：
xhr.send(`username=changlu&sex=${encodeURIComponent('男')}`);
