.原生JS的写法
首先创建一个XMLHttpRequest异步对象
//1.创建异步对象
const xhr = new XMLHttpRequest();
(固定写法)new不能丢
初始化 设置请求方法和url
//初始化 设置请求方法和url
xhr.open('get', 'http://127.0.0.1:8000/server?a=100&b=200')
注:get后面单引号中连接为URL :8000为端口,/server为接口(一般后端会设置好直接用就行);
get为请求方式,默认为get
请求方式有两种(post和get)
get请求和post请求的区别
1.get请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给WEB服务器。Ajax请求中,这种区别对用户是不可见的。
发送
//3.发送
xhr.send();
事件绑定 处理服务端返回结果
//4.事件绑定 处理服务端返回结果
xhr.onreadystatechange = function () {
//判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
//判断响应的状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status <= 300) {
//处理结果 包含四步 行 头 空行 体
//1.响应行
//设置result的文本
result.innerHTML = xhr.response;
}
}
}
readyState属性:存有XMLHttpRequset的状态从0到4,0~4分别代表程序进行到的步骤;
当readyState为0时:请求未初始化,创建异步请求对象;
当readyState为1时:初始化异步请求对象;
xhr.open('get', 'http://127.0.0.1:8000/server?a=100&b=200')
当readyState为2时:异步对象发布请求;xhr.send();
当readyState为3时:异步对象接受应答数据,从服务端返回数据;
当readyState为4时:全部读取完毕;
status属性表示网络请求状况一般会有几个值
网络请求成功:返回200;
网络请求失败:返回404;
网络请求出错:返回500;
本文只列出了一部分属性和最基本创建方法,有不对的地方希望大佬指正