Question

我正在为学校做一个项目，到目前为止，已经复制了很多这个脚本并将其粘贴在这里以使事情“正常”。除了将一行代码与另一行代码进行比较并寻找差异之外，我真的不知道自己在做什么。

我有javascript正在向我返回一些值，当它处于一个简单的网页格式时工作正常但是当我将它插入一个更复杂的页面时它会停止工作。

在页面的最后，它应该给出一行数值，并且每1000毫秒更新一次，但会发生的事情是它只是在那里显示Temp（）......

我已经检查了data.xml，当我按下PIC原型板上的按钮和东西时，这些值正在更新。

我正在为简单网页和复杂页面使用相同的ajax.js文件。我认为它很简单，就像错过</p>或</div>标签，但我的眼睛似乎没有看到它。

有些人可以看看代码，看看我错过了什么？谢谢！

ajax.js

        var xhr;

        function getXMLHttpRequest(){

        try { return new ActiveXObject("Msxm12.XMLHTTP"); } catch(e){}; 
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){};  
        try { return new XMLHttpRequest(); } catch(e){};    

        return null;
        }

        function parseHttpResponse(){

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                document.getElementById("T0").innerHTML=xhr.responseText;
                }
                else
                {

                }
            }
        }

        function getTemp(){
        xhr = getXMLHttpRequest();

        xhr.open("GET", "data.xml", true);
        xhr.onreadystatechange = parseHttpResponse;
        xhr.send(null);
        }



        setInterval("getTemp()", 1000);

简单网页 - 效果很好

            <html>
        <head><title>Ajax test - index1</title>

        <script src="ajax.js" type="text/javascript">
        </script>

        </head>

        <body onload="getTemp();">
            <h2>Headline</h2>
            <p>Paragraph</p>
            <div id='T0'>Loading Temp0...</div> 
        </body>
        </html>

“复杂”网页 - 使用此网页时，我感到不快乐

                <!DOCTYPE html>
            <html>
            <head>
            <title>Elex267-Webpage</title>

            <script src="ajax.js" type="test/javascript">
            </script>

            <link rel="stylesheet" href="myStyle.css" type="text/css" >



            </head>

            <body onload="getTemp();">
            <!-- Banner at Top of Page ***********************************-->
            <div style="background-color:blue; color:white;font-size:30px;">

            <img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
            <div align="center"style="margin-left:50%">Elex 267 Web Demo
            <br>
            Microchip TCP/IP Stack v3.02</div>
            </div>
            <!--*********************************************************-->
            <!--NavBar Code *********************************************-->
            <div class="nav">
            <ul>
            <li><a href="index.htm">Home</a></li>
            <li><a href="features.htm">Features</a></li>
            <li><a href="about.htm">About</a></li>
            </ul>
            </div>
            <!--***************************************************-->
            <p>
            Welcome to the Elex 267 Demo Web Server for [Name Here].<br>
            </p>
            <p>
            This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
            <br>
            This web page refreshes the data every 3 seconds.
            </p>
            <center>
            <img border="5" src="http://www.northmicro.com/GFX/nm110nm120onproto.jpg" alt="NM110 Proto Pic" width="200" height="200" >
            </center>
            <br>
            <div id="feedback" style="width:500px;float:left;">
            &nbsp;&nbsp;&nbsp;&nbsp;Pot RA0:   1022 <br>
            &nbsp;&nbsp;&nbsp;&nbsp;Pot RA1:   223 
            <br><br>
            &nbsp;&nbsp;&nbsp;&nbsp;Switch RA2: <img src="Pics/SwitchUp.gif" alt="SwitchOff" width="20" height="20" align="top">
            <br><br>
            &nbsp;&nbsp;&nbsp;&nbsp;LEDs:&nbsp;&nbsp;RB6  <img src="Pics/LEDOff.gif" alt="LED_Off" width="20" height="20" align="top"> &nbsp;&nbsp;RB5   <img src="Pics/LEDOn.gif" alt="LED_On" width="20" height="20" align="top">  
            </div>

            <div id="input" style="width=50%;margin-left:50%;">
            <b>Commands</b><br>
            <button align="left" type="button" onclick="alert ('RB5 Activated')">Toggle RB5</button>
            <br>
            <button align="left" type="button" onclick="alert ('RB6 Activated')">Toggle RB6</button>
            </div>
            <br><br>
                <div id='T0'>Loading Temp0...</div> 
            </body>
            </html>

Answer 1

setInterval("getTemp()", 1000);

在这一行没有意义，它可能是你的问题的原因。此调用导致每秒调用getTemp，从此调用返回后开始。在getTemp函数中，您正在重用xhr变量，每次都创建一个新的XMLHttpRequest实例。仅这一点不一定是个问题（除了看似错误的"Msxm12.XMLHTTP"之外;应该是"Msxml2.XMLHTTP"）。

但是在getTemp的每个调用中，您发出一个新请求，无论，如果前一个请求已收到响应（第三个参数为true表示异步请求 - 响应处理）。请考虑这一点：可能未调用readystatechange侦听器（或者其readyState == 4部分未被执行），因为客户端正在等待服务器响应。现在，您的一秒计时器启动，再次调用getTemp ，因此将覆盖要在侦听器代码中使用的xhr值。有一个闭包，xhr是一个绑定变量，因此已经存在竞争条件。

此外，HTTP客户端应该（根据RFC 2616），并且设计良好的Web浏览器不会保留超过指定数量的持久HTTP连接（默认值：2到8）打开到同一服务器或代理。因此，文档越复杂，并且需要并行加载的资源就越多，这种方法就越有可能失败。

您应该删除setInterval(…)来电并在更新getTemp()属性的行下方添加innerHTML来电（当请求成功时，status == 200），所以只有这样才会发出新的请求。在发出新请求之前，您至少应等待readyState成为4（已完成）。由于您希望在下次通话前等一秒钟，请使用window.setTimeout("getTemp()", 1000)。

如果您使用合理数量的空白区域打印代码，即缩进函数体和块内容，并添加一些空格，例如在)之间，则应该有助于理解。 {。像Eclipse JavaScript开发工具这样的编辑器可以自动化大部分代码格式化。

之后你应该学会使用调试器（使用Firebug for Firefox，其他浏览器的新版本有一个内置的）并在你的代码中设置断点，特别是getTemp和parseHttpResponse。逐步执行代码（警告：跳过 send()，然后继续，以便执行在parseHttpResponse中的断点处停止）以查看正在发生的事情。祝你好运。

外部javascript文件无法正常工作

1 个答案: