原生JS的Ajax请求步骤

原生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);
          }
        }
      }