原生JS的Ajax请求步骤
1 创建异步调用对象
可以先判断是哪种浏览器:ie的是ActiveXObject(“Microsoft.XMLHTTP”),其他的是xmlHttpRequest
2 创建HTTP请求
建完毕后使用open方法 设置请求的类型,请求的地址 是否使用异步
XMLHttpRequest.open(method,URL,flag,name,password);
参数的解释:
method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法 为 get和post。
URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
flag:该参数为可选,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步, 默 认为true。
name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
password:该参数为可选,用于输入密码。若服务器需要验证,则必须使用该参数。
3 设置响应HTTP请求状态变化的函数
http请求会相应xmlHttpRequest的onreadystatechange,通过onreadystatechange去监听请求.
在onreadystatechange中需要监听xmlHttpRequest.readyState和xmlHttpRequest.status
readyState:表示请求过程的状态码
0 :请求还未初始化
1 :已建立服务连接
2 :请求已接受
3 :正在处理请求
4 :请求已完成并且响应已准备好
一般判断的时4 ,当readyState==4时,表示请求已经完成并准备接受响应
接下里就是判断status,也就是HTTP状态码(这里只说明200,其他状态码不进行列举)
当status==200时表示响应成功,也代表这可以接受响应得到的数据 可以使用XMLHttpRequest.response接受 (注意它的格式)
此时还不能获取到数据,因为还未发送http请求,只有在发送http请求后此函数才能触发
4 发送http请求
XMLHttpRequest.send(data) 其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。
只有在使用send()方法之后,XMLHttpRequest对象的readyState属性值才会开始改变,也才会激发onreadystatechange事件,并调用函数。
5 局部更新
在通过Ajax的异步调用获得服务器端数据之后,可以通过操纵DOM对象来将网页中的数据进行局部更新。
注意:
1.在发送post请求时需要调用setRequestHeader设置post请求参数的参数格式 一般根据接口所接受的数据格 式 去传递参数
2.发送get请求时需要携带token时 需要使用setRequestHeader设置get请求去设置请求头中的token
ajax2.setRequestHeader("token",tokens) //注意tokens的格式
//发送post请求时传递的参数
var datas={
username:"admin",
password:"123456"
}
// 创建XMLHttpRequest异步调用对象 ie的是new ActiveXObject("Microsoft.XMLHTTP")
var ajax1=new XMLHttpRequest();
//设置接收的响应数据的格式
ajax1.responseType = "json";
//创建post请求
ajax1.open("POST",url,true)
//设置post请求时所需要的请求头
ajax1.setRequestHeader("accept", "application/json");
ajax1.setRequestHeader("Content-Type","application/json");
//监听请求
ajax1.onreadystatechange=function() {
if(ajax1.readyState===4){
console.log("获取数据成功");
if(ajax1.status==200){
var res=ajax1.response.data
console.log(res);
//将token值存入本地存储localstorage
window.localStorage.setItem("token",JSON.stringify(res.token));
}
}
}
//发送HTTP请求 按照接口需求对参数的格式进行转换
ajax1.send(JSON.stringify(window.datas))
//通过按钮点击事件触发携带token的get请求
//获取dom节点
var btns=document.querySelector(".btns")
btns.onclick=function(){
//将本地存储的token 值取出来并转换格式
var tokens=JSON.parse(localStorage.getItem("token"))
var ajax2=new XMLHttpRequest();
ajax2.responseType="json";
//创建get请求
ajax2.open("GET",url,true);
//在请求头中设置token
ajax2.setRequestHeader("token",tokens)
//发送http请求
ajax2.send(null)
ajax2.onreadystatechange=function() {
if(ajax2.readyState==4){
if(ajax2.status==200){
var res=ajax2.response
console.log(res);
}
}
}