介绍
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>
XMLHttpRequest.readyState - Web API 接口参考 | MDN (mozilla.org)