ajax原理介绍,手动创建一个ajax请求过程

ajax介绍

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面

XMLHttpRequest 是 AJAX 的基础

创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();

//老版本的IE浏览器使用ActiveXObject
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
创建一个XMLHttpRequest对象并发起一个ajax请求的过程
function ajax(){
    //创建XMLHttpRequest对象
    let xmlHttp = new XMLHttpRequest();
    //onreadystatechange事件中接收请求结果
    xmlHttp.onreadystatechange = function(){
        console.log(xmlHttp);
        if(xmlHttp.readyState  4 &&  xmlHttp.status   200){
            let data = xmlHttp.responseText;
            console.log(data);
        }
    }
    //open方法中规定请求类型、Url、是否异步等
    xmlHttp.open("GET","http://localhost:3000");
    //send方法发送请求
    xmlHttp.send();
}
ajax();

QQ截图20210331234240.png

XMLHttpRequest的四个状态

每当 readyState 改变时,就会触发 onreadystatechange 事件 readyState 属性存有 XMLHttpRequest 的状态信息

readyState  ==> 0  请求未初始化
readyState  ==> 1  服务器链接已建立
readyState  ==> 2  请求已接收
readyState  ==> 3  请求处理中
readyState  ==> 4  请求已完成,且响应已就绪
XMLHttpRequest的status状态为Http请求状态码
200 ===>  请求成功
404 ===>  未找到页面
500 ===>   服务器错误
....等等