实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我最喜爱的电影</title>
</head>
<body>
<button type="button">我最喜爱的电影</button>
</body>
<script type="text/javascript">
btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
//1.创建XMLHTTPRequest对象
let xhr = new XMLHttpRequest();
//2.监听相应状态
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 ){ //就绪状态
if(xhr.status === 200){ //请求的状态码，200说明成功返回
let div = document.createElement('div');
div.style.width = '600px';
div.style.height = '600px';
div.innerHTML = xhr.responseText;
document.body.appendChild(div);
}else{
alert('响应失败'+xhr.status);
}
}else{
//'HTTP正在发送请求' 可放一张加载图片
}
};
//3.设置请求参数
xhr.open('get','inc/pro.html',true);
//4.发送请求
xhr.send(null);
//禁用按钮
btn.disabled = false;
};
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
