摘要：ajax是代理用戶發(fā)起http訪問請求的js代碼，可以通過同步或者異步的方式請求html、json、xml等數(shù)據(jù)，然后返回到前端接收，并渲染到界面的技術(shù)，是一種無刷新頁面，即可獲取數(shù)據(jù)的技術(shù)。通過ajax異步獲取html 的數(shù)據(jù)，代碼如下：<!DOCTYPE html> <html> <head> <
ajax是代理用戶發(fā)起http訪問請求的js代碼，可以通過同步或者異步的方式請求html、json、xml等數(shù)據(jù)，然后返回到前端接收，并渲染到界面的技術(shù)，是一種無刷新頁面，即可獲取數(shù)據(jù)的技術(shù)。
通過ajax異步獲取html 的數(shù)據(jù)，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取html內(nèi)容</title>
</head>
<body>
<button id="btnXinWen">獲取NBA新聞</button>
<script>
let btn = document.getElementById("btnXinWen");
btn.onclick = function () {
//1.創(chuàng)建xhr對象
let xhr = new XMLHttpRequest();
//2.監(jiān)聽響應(yīng)狀態(tài)
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 準(zhǔn)備就緒
// 判斷響應(yīng)結(jié)果:
console.log(xhr.status);
if (xhr.status === 200) {
// 響應(yīng)成功,通過xhr對象的responseText屬性可以獲取響應(yīng)的文本,此時是html文檔內(nèi)容
let div = document.createElement('div'); //創(chuàng)建新元素放返回的內(nèi)容
div.style.width = '600px'; // 設(shè)置內(nèi)容區(qū)的寬和高
div.style.height = '600px';
div.style.margin='0px auto';
div.innerHTML = xhr.responseText; // 將響應(yīng)文本添加到新元素上
document.body.appendChild(div); // 將新元素插入到當(dāng)前頁面中
} else {
// 響應(yīng)失敗,并根據(jù)響應(yīng)碼判斷失敗原因
alert('響應(yīng)失敗'+xhr.status);
}
} else {
//還未就緒
}
}
//3.設(shè)置請求參數(shù)
xhr.open('get','index.html',true);
//4.發(fā)送請求
xhr.send(null);
//將點擊按鈕禁用,防止重復(fù)點擊
btn.disabled = true;
}
</script>
</body>
</html>index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>內(nèi)容簡介</title> </head> <body> <h1>周琦16+10+2上演隔人暴扣 毒蛇負(fù)馬刺下屬球隊</h3> <div> <p>騰訊體育11月14日訊 在今天結(jié)束的一場NBA發(fā)展聯(lián)盟的比賽中，周琦砍下16分、10個籃板和2個蓋帽，并且上演了一次精彩的隔人暴扣，但是他所在的毒蛇隊（火箭下屬球隊）仍然在客場以97-114負(fù)于奧斯汀馬刺隊（馬刺下屬球隊）。</p> </div> </body> </html>
批改老師：查無此人批改時間：2018-11-14 17:36:30
老師總結(jié)：總結(jié)的不錯，代碼也ok。少年，繼續(xù)加油。