原生ajax模拟请求超时
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="editplus" />
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<meta charset="UTF-8">
<title>网络请求超时</title>
</head>
<body>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #3d3c07
}
</style>
<div id="result"></div>
<script>
//获取元素对象
const res = document.getElementById("result")
//绑定事件
res.addEventListener('mouseover', function() {
//1.创建对象
const xhr = new XMLHttpRequest()
//超时设置2s设置
xhr.timeout = 2000
//超时回调
xhr.ontimeout = function() {
alert("网超时常请稍后重试")
}
// //网络异常回调
// xhr.onerror = function() {
// alert("你的网络视乎处理些问题")
// }
//2.初始化 设置请求方法和URL 启动请求 http://127.0.0.1:8000/server
xhr.open('POST', 'http://127.0.0.1:8000/ser')
//设置请求头
xhr.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded') // Content-Type设置请求体的类型 ，application/x-www-form-urlencoded 设置请求体参数的类型
//自定义请求头
// xhr.setRequestHeader('NAME',
// 'AYU')
//3.发送请求
xhr.send("A=100&B=200") //请求体
//4.事件绑定 处理服务端返回来的结果
//onreadystatechange 服务器给xmlhttpRequset对象送回响应的时候触发执行
//readystate 是xhr对象中的属性 表示状态0: 未初始化 尚未调用open（）方法 1:启动已经调用open（）方法，但尚未调用send方法
//2:发送 已经调用send（）方法，但尚未接收到响应
//3:接收，已经接收到部分响应数据
//4:完成 已经接收到全部响应的数据，而且已经可以在客户端使用了
xhr.onreadystatechange = function() {
//判断服务端返回了所有的结果全部数据
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500 200到300的
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
console.log(xhr.status); //响应行 状态码
console.log(xhr.statusText); //响应状态说明
console.log(xhr.getAllResponseHeaders); //响应头
console.log(xhr.response); //响应体
res.innerHTML = xhr.response
} else {
}
}
}
})
</script>
</body>
</html>
