一.ajax的基本步骤
function getData() {
// 1.创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2.设置请求的地址，请求方式，是否异步
xhr.open("get", "http://118.178.238.19:3001/api/banner/list");
// 3.设置后端相应回来后需要干什么
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 5.获取后端响应回来的数据：xhr.responseText
console.log("xhr.responseText", xhr.responseText);
}
}
// 4.xhr发送请求
xhr.send();
}
// ==========================XMLHttpRequest=====================================
// 1.XMLHttpRequest对象: AJAX的核心对象是XMLHttpRequest，和服务器交互主要依赖该对象。
// 这是官方对象。XMLHttprequest对象提供了对 HTTP 协议的完全的访问
// XMLHttpRequest的理解： 使用XMLHttpRequest对象，可以把浏览器解脱出来，
// 让浏览器只负责显示及用户交互，而完成和后端交互的事情由XMLHttpRequest对象负责。
// 这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白。
// ==========================属性1：readyState===================================
// 对象状态值： 也就是请求和响应整个过程中进行到哪一步了。后端处理的状态随时会告诉前端
// 0 = 未初始化（uninitialized）对象创建完毕就是0
// 1 = 正在加载（loading） 装载，准备工作，调用open函数后就是1，
// 2 = 加载完毕（loaded） 表示到了后端。
// 3 = 交互（interactive）服务器在处理……
// 4 = 完成（complete） 服务器端处理完毕了。表示响应完成了，但是，不保证结果是否正确
// ==========================属性2：onreadystatechange============================
// 每次状态改变所触发事件的事件处理程序，1 -> 2 2 -> 3 3 -> 4; 只触发三次
// ==========================属性3：responseText==================================
// 从服务器进程返回的数据的字符串形式
// ==========================属性4： status=======================================
// 从服务器返回的数字代码，如404（未找到）或 200（就绪）
// 代表响应结果
// 200：表示响应正确
// 500：表示服务器端出错，拿不到应有的结果
// 404：表示你请求的资源不存在。
// ==========================方法1： open=========================================
// open('method','URL', 是否异步)
// 建立对服务器的调用，
// 方法通常是post或get，URL可以绝对路径或相对路径
// ==========================方法2： send(content)================================
// 向服务器发送请求，参数可以是null
// ==========================方法3： setRequestHeader(”header”, ”value”)==========
// 设置HTTP请求的首部信息，可以向服务器传递参数，这个方法必须在open之后调用。
// ==========================HTTP的响应状态码================================
// 200 服务器已成功处理了请求并提供了请求的网页
// 404 服务器找不到请求的网页
// 500 服务器遇到错误，无法完成响应了
二.readyState属性和state属性
function getData() {
// 1.创建XMLHttpRequest
let xhr = new XMLHttpRequest();
console.log("创建对象后xhr.readyState", xhr.readyState);// 0 = 未初始化（uninitialized）对象创建完毕就是0
// 2.发送请求方式，地址，是否异步
xhr.open("get", "http://118.178.238.19:3001/api/pro/categorybrandlist");
console.log("调用open后xhr.readyState", xhr.readyState);// 1 = 正在加载（loading） 装载，准备工作，调用open函数后就是1，
// 3.后端响应后要做的事情
xhr.onreadystatechange = function () {
console.log("onreadystatechange:xhr.readyState", xhr.readyState);
// readyState==2 表示：后端接收到了请求。
// readyState==3 表示：后端正在处理
// readyState==4 表示：后端处理完毕，但是，不保证结果是否正确。
// status==200 表示，后端响应回来了正确的结果。
if (xhr.readyState == 4 && xhr.status == 200) {
// 5、获取后端响应回来的数据：xhr.responseText
console.log("xhr.responseText", xhr.responseText);
}
}
// 4.调用send;
xhr.send();
}
三.请求方式get
function getData() {
// 1.创建XMLHttpRequest
let xhr = new XMLHttpRequest();
// 2.获取请求方式，地址，是否异步
// get请求方式携带参数：是在地址后面用问号开头。问号后面是键值对（键=值），多个键值对用 & 分开
xhr.open("get", "http://118.178.238.19:3001/api/pro/list?count==1&limitNum==15")
// 3.后端响应后做什么
xhr.onreadystatechange = function () {
// console.log("onreadystatechange:xhr.readyState", xhr.readyState);
// 5.获取后端响应回来的数据：xhr.responseTextb
if (xhr.readyState == 4 && xhr.status == 200) {
let obj = JSON.parse(xhr.responseText);
console.log("第一页商品", obj);
}
}
// 4.调用send;
xhr.send();
}
四.请求方式post
function getData() {
// 1.创建XMLHttpRequest
let xhr = new XMLHttpRequest();
// 2.发送请求方式，地址，是否异步
xhr.open("post", "http://121.89.205.189:3000/api/user/dofinishregister")
// 3.后端响应后做什么
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let obj = JSON.parse(xhr.responseText)
console.log("后端响应的内容", obj);
}
}
// post请求，需要在请求头里设置传递给后端的数据格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
// post请求传递给后端参数。写在send函数的参数里。参数个数和get一样
let str = `tel=17795885498&password==123456`
// 4.调用send;
xhr.send(str);
}
五.form发送请求get方式
<!-- 用form表单发送请求，其实就是用浏览器发送请求（而不是ajax)，所以，后端响应回来的内容，直接交给了浏览器 -->
<!-- 获取商品数据 -->
<form method="get" action="http://118.178.238.19:3001/api/pro/list">
<p>
页码：
<input type="text" name="count" />
</p>
<p>
每页多少条数据：
<input type="text" name="limitNum" />
</p>
<p>
<input type="submit" value="获取数据" >
</p>
</form>
六.form发送请求post方式
<!-- 用form表单发送请求，其实就是用浏览器发送请求（而不是ajax)，所以，后端响应回来的内容，直接交给了浏览器 -->
<!-- 获取商品数据 -->
<form method="post" action="http://118.178.238.19:3001/api/user/dofinishregister">
<p>
电话号码：
<input type="text" name="tel" />
</p>
<p>
密码
<input type="password" name="password" />
</p>
<p>
<input type="submit" value="注册" >
</p>
</form>
七.验证用户名是否存在
// 验证用户名是否存在的接口信息：
// 1、请求地址：http://118.178.238.19:3001/api/user/docheckphone
// 2、请求方式: post
// 3、请求参数:
// tel：表示用户名
// 4、后端响应回来的数据（格式），并且告知意思。
// {
// code: '200',
// message: '继续注册'
// }
// {
// code: '10005',
// message: '该用户已被注册'
// }
window.onload = function () {
document.getElementById("username1").onblur = function () {
let xhr = new XMLHttpRequest();
xhr.open("post", "http://118.178.238.19:3001/api/user/docheckphone");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse(xhr.responseText);
if (data.code == "200") {
document.getElementById("msg").innerHTML = "恭喜您该用户名可以使用！";
} else if (data.code == "10005") {
document.getElementById("msg").innerHTML = "不好意思该用户名已被注册！";
} else {
document.getElementById("msg").innerHTML = "886咯";
}
}
}
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
let str = `tel=${this.value}`;
xhr.send(str);
}
}
八.今日问题
### 1、说一下线程和进程【扩展】
1）、进程：进行中的程序。一个进程就是一个任务，在操作系统的“任务管理器”中，能够看到操作
系统同时运行程序（进程）
2）、线程： 一个程序中可以有多个线程。一个线程负责一个事情。
### 2、同步异步，定时器为何是异步
1）、同步和异步的意思：程序中的代码执行有两种情况：同步执行和异步执行。
1.1）、同步执行，也叫作按照顺序执行。既就是一步一步的执行，大部分程序都是这样的。这
个会占一个线程。一般都是主线程，如果没有异步代码肯定是主线程。
1.2）、异步执行：同时开启了好几个线程。即：好几件事情同时进行。
2）、定时器为何是异步？
如果定时器是同步，而不是异步，那么，意味着，只要启动定时器，其他程序就没法执行了。
### 3、前后端交互的步骤
```js
//1、创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//2、设置请求方式，请求地址，是否异步
xhr.open("post","http://localhost:8081/regsave");
//3、设置后端响应会后，（前端）要完成那些功能
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//5、获取后端的数据，并做前端的功能
xhr.responseText;
}
}
//设置请求头（给请求头中的content-type属性设置为"application/x-www-form-
urlencoded"。表示：前端发给后端的内容类型
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//4、发送请求
xhr.send("username=jzf&password=123");
```
### 4、ajax中的setRequestHeader这个函数的第一个参数是否可以改变。
1）、setRequestHeader(键，值);
2）、第一个参数 ：键。 有官方指定的，也可以自定义。
### 5、参数的个数
请求参数，传多了：不影响，因为，不会接受多余参数
请求参数，传少了：只要把必传参数传递了，就不会报错。