1

我有两个脚本刷新 div 动态：
1）http://project-welcome.ugu.pl/test/ajax.js
2）http://project-welcome.ugu.pl/test/ajax2.js

我试图结合它：

    // Customise those settings

    var seconds = 1;
    var divid = "timediv";
    var divid2 = "points";
    var url = "boo.php";
    var url2 = "boo2.php";

    // Refreshing the DIV

    function refreshdiv(){

    // The XMLHttpRequest object

    var xmlHttp;
    try{
    xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
    }
    catch (e){
    try{
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
    }
    catch (e){
    try{
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e){
    alert("Your browser does not support AJAX.");
    return false;
    }
    }
    }

    // Timestamp for preventing IE caching the GET request

    fetch_unix_timestamp = function()
    {
    return parseInt(new Date().getTime().toString().substring(0, 10))
    }

    var timestamp = fetch_unix_timestamp();
    var nocacheurl = url+"?t="+timestamp;
    var nocacheurl2 = url2+"?t="+timestamp;
    // The code...

    xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
    document.getElementById(divid).innerHTML=xmlHttp.responseText;
    document.getElementById(divid2).innerHTML=xmlHttp.responseText;
    setTimeout('refreshdiv()',seconds*1000);
    }
    }
    xmlHttp.open("GET",nocacheurl,true);
    xmlHttp.send(null);
    xmlHttp.open("GET",nocacheurl2,true);
    xmlHttp.send(null);
    }

    // Start the refreshing process

    var seconds;
    window.onload = function startrefresh(){
    setTimeout('refreshdiv()',seconds*1000);
    }

index.html 的来源：

    <script src="ajax3.js"></script>
    <script type="text/javascript"><!--
    refreshdiv();
    // --></script>
    Logs<div id="timediv"></div><br>
    Points<div id="points"></div><br>

它不起作用，因为两个 div 显示相同（在本例中为点）。

如何正确组合脚本？



Ps 你可以在文件 original.php 中看到它
登录：testowyuser
通过： testtest
然后点击“Strona Główna”

4

1 回答 1

0

有些东西最后并与第一个重叠。

没关系，你在抱怨；），看这里

xmlHttp.open("GET",nocacheurl,true); // opening 1st URI
xmlHttp.send(null); // requresting. in the mean time we've got the response and our `onreadystatechange` function triggers

xmlHttp.open("GET",nocacheurl2,true); // opening 2nd URI
xmlHttp.send(null); // the same situation. received response, triggered function

您正在使用 1 个xmlHTTP实例来请求两者。并按顺序使用它，但要求它同时工作。

因此，当函数触发（第一次或第二次无关紧要）时，您假设（但不是脚本）在1 个变量中已经有 2 个响应。此外，您希望脚本猜测您真正想要的内容。

document.getElementById(divid).innerHTML = xmlHttp.responseText; // getting response text from the current response (it can be 1st or 2nd response)
document.getElementById(divid2).innerHTML = xmlHttp.responseText; // and again getting the current response text from the same instance (not the response you are expecting from the next request). so, you are repeating the same for the another <div>

实际上，每次您只有一个响应文本。并且每次您<div's>输入相同的信息（复制信息超过 2 <div's>）时。目前还没有关于下一个请求的信息。

我想，作为脚本的结果，您总是将最后一个请求复制到 2 上<div's>。

尝试为每个“通道”创建 1 个实例（第一个脚本使用1 个实例，xmlHTTP第二个脚本使用1 个实例）并将它们设置为不同的（单独的）onreadystatechange函数。这样你就不会有数据重叠，也不会纠结。

更优雅的解决方案（JS 中的重构更少）是区分响应。例如，如果您正在接收 XML，您可以将其解析为一些标志，该标志会告诉您此响应是针对<div id=divid>另一个响应是针对另一个响应，<div>或者此请求是第一个，这是第二个等。

于 2012-07-26T07:40:51.080 回答