Ajax请求响应实时刷新json格式解析数据

最新推荐文章于 2022-03-26 21:41:32 发布

风飞扬fq

最新推荐文章于 2022-03-26 21:41:32 发布

阅读量873

点赞数 1

分类专栏：前端笔记文章标签： ajax json web

本文链接：https://blog.csdn.net/fq_fly/article/details/101755258

版权

前端笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

web页面ajax异步通信

js代码调用setInterval()函数，设置对应参数，每隔一秒获取数据并实时刷新页面。
请求响应采用以json数据格式，根据具体格式获取数据。
多的不说，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax test</title>
    <script type="text/javascript">
        function createXmlRequest(){
            if(window.ActiveXObject){
                var xmlHttp=["Microsoft.XMLHTTP","MSXML2.XMLHttp.5.0","MSXML2.XMLHttp4.0","MSXML2.XMLhttp.3.0","MSXML2.XNLHttp"];
                try{
                    for(var i=0;i<xmlHttp.length;i++){
                        var xmlHttp = new ActiveXObject(xmlHttp[i]);
                        return xmlHttp;
                    }
                } catch(error){ }
            }
            else{
                var xmlHttp = new XMLHttpRequest();
                return xmlHttp;
            }
        }

        function ajaxGet(xmlHttp,url){
            xmlHttp.open("GET", url, true);//true为异步请求
            xmlHttp.setRequestHeader("If-Modified-Since", 0);//头部字段的名称和信息
            xmlHttp.send("")//send方法中的参数表示需要请求发送的数据
        }

        function pageLoad(){
            setInterval("netLoad();",1000);
        }

        var xmlget;
        function netLoad(){
            var url="/getstatus?getinfo=1";
            xmlget = createXmlRequest();
            xmlget.onreadystatechange = urlGet;
            ajaxGet(xmlget,url);
        }

        function urlGet(){
            if(xmlget.readyState == 4){
                var result = xmlget.responseText;
                if(result == "error"){
                    window.parent.location.href = "index.html"
                }
                if(result == null){
                    return
                }
                var dataObj = JSON.parse(result);
                var conn = dataObj.conn_info;
                var state = dataObj.state_info;
                document.getElementById("conn_msg").value = conn ;
                document.getElementById("state_msg").value = state ;
            }
        }
    </script>
</head>
<body onload="pageload();">
<div>
    <span>连接信息：</span><span id="conn_msg"></span>
</div>
<div>
    <span>状态信息：</span><span id="state_msg"></span>
</div>
</body>
</html>

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

在这里插入图片描述

风飞扬fq

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求响应实时刷新json格式解析数据

web页面ajax异步通信js代码调用setInterval()函数，设置对应参数，每隔一秒获取数据并实时刷新页面。请求响应采用以json数据格式，根据具体格式获取数据。多的不说，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫