0
点赞
收藏
分享

微信扫一扫

Ajax实现页面局部刷新

点亮自己的那盏灯 2022-02-15 阅读 88
htmlxmlajax


这里通过点击一个按钮,然后下面产生一段文字,而整个页面不用刷新

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script>
function loadXMLDoc() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState == 4 && xhr.status == 200) {

//通过Ajax响应的东西异步的展示在id为hello的div中
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
};
xhr.open("POST","newPage.html",true);
xhr.send();
}
</script>
</head>
<body>
<div>我的第一个AJAX</div>
<button type="button" onclick="loadXMLDoc()">点击</button>
<div id="myDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world!
</body>
</html>

运行结果:

Ajax实现页面局部刷新_ajax



举报

相关推荐

0 条评论