1

div dynamicを更新する2つのスクリプトがあります：
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>

2つのdivが同じ（この場合はポイント）を表示するため、機能しません。

スクリプトの組み合わせはどの程度正しいですか？



追伸ファイルoriginal.phpで確認できます
ログイン：testowyuser
合格：testtest
次に「StronaGłówna」をクリックします

4

1 に答える 1

0

何かが最後になり、1番目と重なります。

あなたが不平を言っているのは大丈夫です;）、ここを見てください

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

1xmlHTTPつのインスタンスを使用して両方をリクエストしています。順番に使用しますが、同時に機能するように要求します。

したがって、関数がトリガーされたとき（1回目または2回目は関係ありません） 、（スクリプトではなく） 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>

実際には、応答テキストが1つしかない場合があります。<div's>そして、あなたがあなたの同じ情報を入れるたびに（2以上の情報をコピーしてください<div's>）bec。次のリクエストに関する情報はまだありません。

そして、スクリプトの結果として、あなたは常に最後のリクエストを2を超えてコピーしていると思います<div's>。

「チャネル」ごとに1つのインスタンス（最初のスクリプトで使用するインスタンスを1つxmlHTTP、2番目のスクリプトで1つのインスタンス）を作成し、それらを異なる（個別の）onreadystatechange関数に設定してみてください。これにより、データが重複したり、絡まったりすることがなくなります。

はるかに洗練された解決策（JSでのリファクタリングが少ない）は、応答を区別することです。たとえば、XMLを受信して​​いる場合は、この応答が別の応答であり、別の応答が別の応答であるか、この要求が最初でこれが2番目であることを示すフラグを解析できます。<div id=divid><div>

于 2012-07-26T07:40:51.080 に答える