0

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

我有 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>
4

1 回答 1

2
setInterval("getTemp()", 1000);

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

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

此外,HTTP 客户端不应该(根据 RFC 2616)和精心设计的 Web 浏览器不会保持超过指定数量的持久 HTTP 连接(默认值:2 到 8)对同一服务器或代理打开。所以文档越复杂,需要并行加载的资源越多,这种方法就越有可能失败。

您应该删除该调用并在您更新属性的行下方setInterval(…)添加一个调用(当请求成功时,),这样才会发出新的请求。在发出新请求之前,您至少应该等待变为(FINISHED)。由于您想在下一次通话前等待一秒钟,请使用.getTemp()innerHTMLstatus == 200readyState4window.setTimeout("getTemp()", 1000)

如果您漂亮地打印该代码,它应该有助于您的理解,即使用合理数量的空白缩进函数体和块内容,并添加一些空白,例如)and之间{。有像 Eclipse JavaScript Development Tools 这样的编辑器可以自动化大部分代码格式化。

之后你应该学会使用调试器(在 Firefox 上使用 Firebug,其他浏览器的新版本有一个内置的)并在你的代码中设置断点,特别是在getTempparseHttpResponse. 单步执行代码(警告:跳过 send(),然后继续,以便执行在 中的断点处停止parseHttpResponse)以查看发生了什么。祝你好运。

于 2012-11-18T02:32:24.580 回答