一.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)、第一个参数 :键。 有官方指定的,也可以自定义。
![image-20230403192914950](今日问题/image-20230403192914950.png)
### 5、参数的个数
请求参数,传多了:不影响,因为,不会接受多余参数
请求参数,传少了:只要把必传参数传递了,就不会报错。