Ajax实现页面局部刷新

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

<!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" οnclick="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>

运行结果:

发布了350 篇原创文章 · 获赞 236 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/HeZhiYing_/article/details/103683366