Question

制作一个小项目

无论如何，我需要从xml文件中读取一个值并通过javascript在网页中绘制它。问题是，当我将值放入变量时，似乎它不是有效数字。这是我的代码：

的index.html

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="mchp.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
</head>
<body>

<div id="chartdiv" style="height:400px;width:600px;" align="center"></div>
<script type="text/javascript">
var x=getXMLValue('status.xml','key');
var y=parseFloat(x);

$.jqplot('chartdiv',  [[[-24, y],[-20,5.12],[-17,13.1],[-15,33.6],[-7,85.9],[-2,219.9]]],
    {
        axes:{
            xaxis:{min:-24, max:-1},
            yaxis:{min:-24, max:50+2}
        },
        grid: {
            background: 'rgba(00,00,00,0.0)',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#FFFFFF',
            gridLineWidth: 2},
        title: 'Temperature',
        animate : true,
        showTicks: true,   
        series: [{color: '#FF0000'}],
    }
    );

</script>
</body>
</html>

status.xml

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <key>5</key>
</response>

mchp.js文件不是由我编写的。您可以看到使用它here的示例。

// Determines when a request is considered "timed out"
var timeOutMS = 5000; //ms

// Stores a queue of AJAX events to process
var ajaxList = new Array();

// Initiates a new AJAX command
//  url: the url to access
//  container: the document ID to fill, or a function to call with response XML (optional)
//  repeat: true to repeat this call indefinitely (optional)
//  data: an URL encoded string to be submitted as POST data (optional)
function newAJAXCommand(url, container, repeat, data)
{
    // Set up our object
    var newAjax = new Object();
    var theTimer = new Date();
    newAjax.url = url;
    newAjax.container = container;
    newAjax.repeat = repeat;
    newAjax.ajaxReq = null;

    // Create and send the request
    if(window.XMLHttpRequest) {
        newAjax.ajaxReq = new XMLHttpRequest();
        newAjax.ajaxReq.open((data==null)?"GET":"POST", newAjax.url, true);
        newAjax.ajaxReq.send(data);
    // If we're using IE6 style (maybe 5.5 compatible too)
    } else if(window.ActiveXObject) {
        newAjax.ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
        if(newAjax.ajaxReq) {
            newAjax.ajaxReq.open((data==null)?"GET":"POST", newAjax.url, true);
            newAjax.ajaxReq.send(data);
        }
    }

    newAjax.lastCalled = theTimer.getTime();

    // Store in our array
    ajaxList.push(newAjax);
}

// Loops over all pending AJAX events to determine if any action is required
function pollAJAX() {   
    var curAjax = new Object();
    var theTimer = new Date();
    var elapsed;

    // Read off the ajaxList objects one by one
    for(i = ajaxList.length; i > 0; i--)
    {
        curAjax = ajaxList.shift();
        if(!curAjax)
            continue;
        elapsed = theTimer.getTime() - curAjax.lastCalled;

        // If we suceeded
        if(curAjax.ajaxReq.readyState == 4 && curAjax.ajaxReq.status == 200) {
            // If it has a container, write the result
            if(typeof(curAjax.container) == 'function'){
                curAjax.container(curAjax.ajaxReq.responseXML.documentElement);
            } else if(typeof(curAjax.container) == 'string') {
                document.getElementById(curAjax.container).innerHTML = curAjax.ajaxReq.responseText;
            } // (otherwise do nothing for null values)

            curAjax.ajaxReq.abort();
            curAjax.ajaxReq = null;

            // If it's a repeatable request, then do so
            if(curAjax.repeat)
                newAJAXCommand(curAjax.url, curAjax.container, curAjax.repeat);
            continue;
        }

        // If we've waited over 1 second, then we timed out
        if(elapsed > timeOutMS) {
            // Invoke the user function with null input
            if(typeof(curAjax.container) == 'function'){
                curAjax.container(null);
            } else {
                // Alert the user
                alert("Command failed.\nConnection to development board was lost.");
            }

            curAjax.ajaxReq.abort();
            curAjax.ajaxReq = null;

            // If it's a repeatable request, then do so
            if(curAjax.repeat)
                newAJAXCommand(curAjax.url, curAjax.container, curAjax.repeat);
            continue;
        }

        // Otherwise, just keep waiting
        ajaxList.push(curAjax);
    }

    // Call ourselves again in 100ms
    setTimeout("pollAJAX()",100);

}

// Parses the xmlResponse returned by an XMLHTTPRequest object
//  xmlData: the xmlData returned
//  field: the field to search for
function getXMLValue(xmlData, field) {
    try {
        if(xmlData.getElementsByTagName(field)[0].firstChild.nodeValue)
            return xmlData.getElementsByTagName(field)[0].firstChild.nodeValue;
        else
            return null;
    } catch(err) { return null; }
}

//kick off the AJAX Updater
setTimeout("pollAJAX()",500);

我认为jquery和jqplot文件在这种情况下并不重要，但我可以根据需要提供链接。我认为问题在于读取或转换xml数据。提前感谢您的帮助！

Answer 1

您要解析的不是xml，而是字符串＆＃39; status.xml＆＃39;。

Answer 2

问题是你以错误的方式调用getXMLValue。 getXMLValue需要一个解析的xml文档，而不是一个带有url /文件名的字符串。您需要调用返回status.xml的url。例如，由于您使用的是jQuery，因此可以执行以下操作：

jQuery.ajax({
  type : "GET",
  url : "http://localhost/status.xml",
  dataType : "xml",
  success : function(xml) {
    var y = parseFloat(getXMLValue(xml,key));
    jQuery.jqplot('chartdiv',  [[[-24, y],[-20,5.12],[-17,13.1],[-15,33.6],[-7,85.9],[-2,219.9]]],{
        axes:{
        xaxis:{min:-24, max:-1},
            yaxis:{min:-24, max:50+2}
        },
        grid: {
            background: 'rgba(00,00,00,0.0)',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#FFFFFF',
            gridLineWidth: 2},
        title: 'Temperature',
        animate : true,
        showTicks: true,   
        series: [{color: '#FF0000'}],
    });
    },
    error : function(xhr) {
        alert(xhr.responseText);
    }
});

这至少是我发现的一个问题。您的代码可能还有其他一些问题。

使用javascript读取xml值

2 个答案: