abstrakt：ajax是代理用戶發(fā)起http訪問請求的js代碼，可以通過同步或者異步的方式請求html、json、xml等數(shù)據，然后返回到前端接收，并渲染到界面的技術，是一種無刷新頁面，即可獲取數(shù)據的技術。通過ajax異步獲取html 的數(shù)據，代碼如下：<!DOCTYPE html> <html> <head> <
ajax是代理用戶發(fā)起http訪問請求的js代碼，可以通過同步或者異步的方式請求html、json、xml等數(shù)據，然后返回到前端接收，并渲染到界面的技術，是一種無刷新頁面，即可獲取數(shù)據的技術。
通過ajax異步獲取html 的數(shù)據，代碼如下：
<!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.創(chuàng)建xhr對象
let xhr = new XMLHttpRequest();
//2.監(jiān)聽響應狀態(tài)
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 準備就緒
// 判斷響應結果:
console.log(xhr.status);
if (xhr.status === 200) {
// 響應成功,通過xhr對象的responseText屬性可以獲取響應的文本,此時是html文檔內容
let div = document.createElement('div'); //創(chuàng)建新元素放返回的內容
div.style.width = '600px'; // 設置內容區(qū)的寬和高
div.style.height = '600px';
div.style.margin='0px auto';
div.innerHTML = xhr.responseText; // 將響應文本添加到新元素上
document.body.appendChild(div); // 將新元素插入到當前頁面中
} else {
// 響應失敗,并根據響應碼判斷失敗原因
alert('響應失敗'+xhr.status);
}
} else {
//還未就緒
}
}
//3.設置請求參數(shù)
xhr.open('get','index.html',true);
//4.發(fā)送請求
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發(fā)展聯(lián)盟的比賽中，周琦砍下16分、10個籃板和2個蓋帽，并且上演了一次精彩的隔人暴扣，但是他所在的毒蛇隊（火箭下屬球隊）仍然在客場以97-114負于奧斯汀馬刺隊（馬刺下屬球隊）。</p> </div> </body> </html>
Korrigierender Lehrer：查無此人Korrekturzeit：2018-11-14 17:36:30
Zusammenfassung des Lehrers：總結的不錯，代碼也ok。少年，繼續(xù)加油。