这里通过点击一个按钮,然后下面产生一段文字,而整个页面不用刷新
<!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实现页面局部刷新
发布评论