-解决ajax响应无法解析数据的问题

  • 项目需求：设备配置管理系统平台的设计中，需要将所有的设备的IP地址、子网掩码、网关等参数在前端页面实时显示
  • 解决方案：采用ajax异步通信机制，其在不刷新整个页面的前提下与服务器通信刷新数据，减少了不必要的数据传输，降低了前端与后端数据通信的数据流量，最大程度的减少冗余请求和响应对服务器造成的负载，更加快速的响应用户交互，减少了用户等待时间，有效地提高了用户的体验。
  • 问题代码如下，问题代码包含遇到的主要的问题和基本信息显示，省略了项目中其他信息显示。
<!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("myHeader", 0);//头部字段的名称和信息
            xmlHttp.send("")//send方法中的参数表示需要请求发送的数据
        }

        function pageLoad(){
            netLoad();
        }

        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 ip = dataObj.ip_addr;
                document.getElementById("ipAddr").value = ip;
            }
        }
    </script>
</head>
<body>
<div>
    <span>IP地址：</span><input type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" name="ipAddr" id="ipAddr" value="">
</div>
</body>
</html>

  • 解决方法：

  • 1、使用谷歌浏览器的开发者工具查看浏览器的请求和服务器发出的响应，查看结果如图
    关于ajax异步通信请求已响应无法解析数据的问题_xml

  • 2、在html文件代码中每一次函数调用中增加告警信息，定位问题位置。如在urlGet()函数接口中增加alert(xmlget.readyState)；

  • 3、问题定位发现xmlget.readyState的值为0；xmlget.readyState的五种状态
    0：请求未初始化（还没有调用open()）；
    1：请求已建立，但是还没有发送（还没有调用send()）；
    2：请求已发送，正在处理中（通常现在可以从响应中获取内容）；
    3：请求在处理中，通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成；
    4：响应已完成，可以获取并使用服务器的响应。

  • 4、再次定位，xmlget.onreadystatechange = urlGet();代码中回调函数调用错误。

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

  • 5、问题解决

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

  • 6、分析总结：进一步加强理解ajax异步通信的基础和接口调用，避免低级错误的发生。

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

关于ajax异步通信请求已响应无法解析数据的问题_ajax_02