Ajax模板文件

最新推荐文章于 2023-03-07 09:40:06 发布

Rsun04551

最新推荐文章于 2023-03-07 09:40:06 发布

阅读量145

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/yang_guang3/article/details/105843117

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax</title>
    </head>
    <body>
        //异步JS和XML，在不加载页面的情况下刷新页面部分内容，不用添加任何其他依赖。
        <div id="data1"><h3>使用Ajax修改内容</h3></div>
        <button type="button" onclick="changeContent()">修改内容</button><br>
        <button type="button" onclick="myFunction()">回调函数修改内容</button>
    </body>
    <script>
        var xhr;
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //请求接口赋值
        function changeContent() {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("data1").innerHTML = xhr.responseText;
                }
            }
            xhr.open("get", "http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5", true);
            xhr.send();
        }

        //回调函数返回数据
        function myFunction() {
            loadXMLDoc("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5", function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("data1").innerHTML = xhr.responseText;
                }
            });
        }

        function loadXMLDoc(url, cfunc) {
            xhr.onreadystatechange = cfunc;
            xhr.open("GET", url, true);
            xhr.send();
        }

    </script>
</html>

Rsun04551

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax模板文件

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> //异步JS和XML，在不加载页面的...
复制链接

扫一扫