Ajax简单原生使用原理

Ajax原生

步骤

1.获取xhr对象

let xhr = ''
//由于存在兼容问题,所以需要判断是DOM浏览器还是IE浏览器
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
}else{
    xhr = new ActiveXObject()
}

2.配置发送方式和发送路由等信息

xhr.open("get/post","/login",true)  //第一个参数 是get还是post请求,第二个参数,服务器需要拦截的路由,第三个参数,ajax是否异步,true为异步,false为同步

3.发送数据

xhr.send(null)//get请求
xhr.send(options)//post请求

4.等待服务器接收数据并返回结果

xhr.onreadystatechange = ()=>{
    if(xhr.status===200&&xhr.readystate===4){//服务器状态码为200且ajax阶段为4
        //此时为成功的获取了服务器的信息
        console.log(xhr.responseText)
    }
}

ajax状态码:

0 未建立

1 服务器创建链接

2 请求已经接收

3 数据已经回来,ajax还未结束

4.请求响应已经完全结束

接收到数据后…

拿到的数据是string类型!!

记得进行转换 比如传过来的json字符串 用JSON.parse()进行转换即可,此时就可以向浏览器中写数据了