AJAX基础

34 阅读1分钟

介绍

AJAX : Asynchronous(异步) JavaScript And XML

浏览器、AJAX、服务器:

通过 AJAX 向服务器请求数据,在不刷新整个页面的情况下,更新页面上的部分内容。

浏览器如果直接向服务器请求数据的话,在请求过程中,是不能对页面进行其他操作的,这叫同步请求,而把请求数据这个活给 AJAX 后,在请求过程中,用户还可以对页面进行其他操作,这叫异步请求。

浏览器(顾客)、AJAX(服务员)、服务器(厨师):

如果没有服务员,顾客每次只能去厨房找厨师(此时不能吃饭),厨师把菜给顾客,顾客才能继续吃(同步),有了服务员,顾客就能一边吃饭一边通过服务员向厨师点菜(异步)

创建XMLHttpRequest对象

const httpRequest = new XMLHttpRequest();
//用于和服务器交换数据的XMLHttpRequest对象

为了保证浏览器兼容性,使用以下方式创建:

if (window.XMLHttpRequest) { 
// Mozilla,Safari,IE7+ 等浏览器适用 
httpRequest = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) { 
// IE 6 或者更老的浏览器适用 
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

通过创建的对象发送请求

httpRequest.open("GET","https://jsonplaceholder.typicode.com/users",true);
//设置:请求类型,请求地址,异步/同步
//true为异步,false为同步,默认为true

httpRequest.send();
//发送请求到服务器

服务器响应状态

此时无论是否向服务器发送请求成功,我们都可以通过httpRequest对象的readystate属性和status属性,和readystatechange事件来判断服务器的响应状态。

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script>
        //load事件:网页全部加载完毕(HTML渲染完成)后立刻执行
        window.onload = function(){
            let a = 0;
            let httpRequest = new XMLHttpRequest();
            console.log(++a + ": "+httpRequest.readyState+" "+httpRequest.status);
            //1: 0 0
            httpRequest.open("GET", "https://jsonplaceholder.typicode.com/users", true);
            console.log(++a + ": "+httpRequest.readyState+" "+httpRequest.status);
            //2: 1(表示已经与服务器建立起连接) 0
            httpRequest.send();
            console.log(++a +": "+httpRequest.readyState+" "+httpRequest.status);
            //3: 1 0
            httpRequest.onreadystatechange = function(){
                console.log("请求成功");
                console.log(++a +": "+httpRequest.readyState+" "+httpRequest.status);
                //readystate由2~4表示请求完成,status为200
            }
        }
    </script>
</head>
<body>
</body>
</html>

image.png

XMLHttpRequest.readyState - Web API 接口参考 | MDN (mozilla.org)