3.2-2 Ajax的基本用法
XMLHttpRequest
(1)Ajax想要实现浏览器与服务器之间的异步通信,需要依靠XMLHttpRequest,它是一个构造函数;
(2)无论是XMLHttpRequest,还是Ajax,都没有和具体的某种数据格式绑定;
Ajax的使用步骤
(1)创建xhr对象;
(2)准备发送请求;
(3)发送请求;
(4)监听事件,处理相应;
//当获取到响应后,会触发xhr对象的readystatechange事件,可以在该事件中对响应进行处理;
//readystatechange事件监听readyState这个状态的变化,它的值从0~4,一共5个状态;
//0:未初始化。尚未调用open();
//1:启动。已经调用open(),但未调用send();
//2:发送。已经调用send().但未接收到响应;
//3:接收。已经接收到部分响应数据;
//4:完成。已经接收到全部响应数据,而且已经可以在浏览器中使用了;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const xhr=new XMLHttpRequest();
xhr.open('HTTP方法GET POST PUT DELETE','地址URL','是否使用异步true');
xhr.send();
xhr.onreadystatechange=()=>{
if(xhr.readyState!==4)
return;
if((xhr.status>=200)&&(xhr.status<300)||xhr.status===304){
console.log(xhr.responseText);
}
};
</script>
</body>
</html>
使用Ajax完成前后端通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const url='https://www.imooc.com/api/http/search/suggest?words=js';
const xhr=new XMLHttpRequest();
xhr.onreadystatechange=()=>{
if(xhr.readyState!==4)return;
if((xhr.status>=200)&&(xhr.status<300)||xhr.status===304){
console.log(xhr.responseText);
}
};
xhr.open('GET',url,true);
xhr.send(null);
</script>
</body>
</html>