摘要：ajax是代理用户发起http访问请求的js代码，可以通过同步或者异步的方式请求html、json、xml等数据，然后返回到前端接收，并渲染到界面的技术，是一种无刷新页面，即可获取数据的技术。通过ajax异步获取html 的数据，代码如下：<!DOCTYPE html> <html> <head> <
ajax是代理用户发起http访问请求的js代码，可以通过同步或者异步的方式请求html、json、xml等数据，然后返回到前端接收，并渲染到界面的技术，是一种无刷新页面，即可获取数据的技术。
通过ajax异步获取html 的数据，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取html内容</title>
</head>
<body>
<button id="btnXinWen">获取NBA新闻</button>
<script>
let btn = document.getElementById("btnXinWen");
btn.onclick = function () {
//1.创建xhr对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 准备就绪
// 判断响应结果:
console.log(xhr.status);
if (xhr.status === 200) {
// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
let div = document.createElement('div'); //创建新元素放返回的内容
div.style.width = '600px'; // 设置内容区的宽和高
div.style.height = '600px';
div.style.margin='0px auto';
div.innerHTML = xhr.responseText; // 将响应文本添加到新元素上
document.body.appendChild(div); // 将新元素插入到当前页面中
} else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
//还未就绪
}
}
//3.设置请求参数
xhr.open('get','index.html',true);
//4.发送请求
xhr.send(null);
//将点击按钮禁用,防止重复点击
btn.disabled = true;
}
</script>
</body>
</html>index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内容简介</title> </head> <body> <h1>周琦16+10+2上演隔人暴扣 毒蛇负马刺下属球队</h3> <div> <p>腾讯体育11月14日讯 在今天结束的一场NBA发展联盟的比赛中，周琦砍下16分、10个篮板和2个盖帽，并且上演了一次精彩的隔人暴扣，但是他所在的毒蛇队（火箭下属球队）仍然在客场以97-114负于奥斯汀马刺队（马刺下属球队）。</p> </div> </body> </html>
批改老师：查无此人批改时间：2018-11-14 17:36:30
老师总结：总结的不错，代码也ok。少年，继续加油。
