<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#url{
width: 1000px;
height: 30px;
outline: none;
border: 1px solid #000;
border-radius: 5px;
margin-left: 10px;
}
#btn{
width: 90px;
height: 30px;
outline: none;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<label for="url">
URL:<input type="text" placeholder="请输入要检测的URL" id="url">
</label>
</div>
<br>
<button class="btn" id="btn">点击测试</button>
<div id="content"> </div>
</body>
<script>
var str = ''
document.getElementById('btn').onclick = function(){
var xhr = new XMLHttpRequest();
var url = document.getElementById('url').value;
if (!url) {
alert('请输入URL');
return false;
}
// console.log(url)
console.log(xhr.status, xhr.readyState) // 0,0
xhr.onreadystatechange=function(){
// console.log(xhr)
if(xhr.status === 200){
console.log(xhr.status, xhr.readyState)//200,2;200,3;200,4
str += `status:${xhr.status}`
if(xhr.readyState === 4){
// console.log(xhr.getAllResponseHeaders())
str += xhr.getAllResponseHeaders() + '<br/>'
}
}
document.getElementById('content').innerHTML = str;
}
xhr.open("GET",url,true);
console.log(xhr.status, xhr.readyState)// 0,1
xhr.send(null)
}
</script>
</html>
XHR.readyState == 状态（0，1，2，3，4）
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。