POST：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#result{
width:200px;
height: 100px;
border: solid 1px #903}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result=document.getElementById("result");
result.addEventListener("mousemove",function () {
const xhr=new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:8000/fir');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('a=100&b=200&c=300');
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
if(xhr.status >=200 && xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
});
</script>
</body>
</html>
JSON：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #8899bb;
}
</style>
<script>
window.οnkeydοwn=function () {
const result=document.getElementById('result');
const xhr=new XMLHttpRequest();
xhr.responseType='json';
xhr.open('GET','http://127.0.0.1:8000/json-fir');
xhr.send();
xhr.onreadystatechange=function () {
if (xhr.readyState===4 ){
if (xhr.status >=200 &&xhr.status<300){
// console.log(xhr.response);
// result.innerHTML=xhr.response;
// 手动对数据进行转化
// let data=JSON.parse(xhr.response);
// console.log(data);
// result.innerHTML=data.name;
//自动转换
console.log(xhr.response);
result.innerHTML=xhr.response.name;
}
}
}
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
缓存：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #8899bb;
}
</style>
<script>
const btn=document.getElementById('id');
const result=document.querySelector('#result')
btn.addEventListener('click',function () {
const xhr=new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:8000/ie?t='+Date.now());
xhr.send();
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
if(xhr.status >=200 && xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
});
</script>
</head>
<button id="btn">点击发送请求</button>
<div id="result"></div>
<body>
</body>
</html>
超时与异常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #8899bb;
}
</style>
<script type="text/javascript">
window.οnlοad=function () {
const btn=document.getElementById('btn');
const result=document.querySelector('#result')
btn.addEventListener('click',function () {
const xhr=new XMLHttpRequest();
//超时设置2设置
xhr.timeout=2000;
//超时回调
xhr.ontimeout=function(){
alert("网络异常，请稍后重试");
};
//网络异常回调
xhr.οnerrοr=function(){
alert("网络似乎出现了一些问题");
};
xhr.open('GET','http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
if(xhr.status >=200 && xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
});
}
</script>
</head>
<body>
<button id="btn">点击发送请求</button>
<div id="result"></div>
</body>
</html>
取消请求重复请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.οnlοad=function () {
const btns=document.querySelectorAll('button');
let xhr=null;
let isSend=false;
btns[0].οnclick=function(){
xhr=new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:8000/delay');
xhr.send();
};
btns[1].οnclick=function () {
// 手动取消
xhr.abort();
}
btns[2].οnclick=function(){
// if (isSend) xhr.abort();
//如果正在发送则取消该请求，发送新的
xhr=new XMLHttpRequest();
isSend=true;
xhr.open('GET','http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange=function () {
if (xhr.readyState===4){
//修改标识变量
isSend=false;
}
}
};
}
</script>
</head>
<body>
<button>点击发送</button>
<button>点击取消</button>
<button>重复请求</button>
</body>
</html>