8

組み込み Web サーバーから AJAX 呼び出しを介してデータをサンプリングする Web ページをセットアップしようとしています。あるリクエストが別のリクエストと重複しないようにコードを設定するにはどうすればよいですか? 私は JavaScript の経験がほとんどないことと、おそらく 10 キロバイトを超えるサイズの外部ライブラリを使用しないという説得力のある理由があることを言及しておく必要があります。

4

3 に答える 3

6

以前の AJAX 呼び出しからの応答が成功した後にのみ、AJAX 要求を再起動するオプションを検討することをお勧めします。

function autoUpdate()
{
    var ajaxConnection = new Ext.data.Connection();

    ajaxConnection.request(
    {
        method:         'GET',
        url:            '/web-service/', 

        success: function(response) 
        {
            // Add your logic here for a successful AJAX response.
            // ...
            // ...

            // Relaunch the autoUpdate() function in 5 seconds.
            setTimeout(autoUpdate, 5000);
        }
    }
}

この例ではExtJSを使用していますが、非常に簡単にXMLHttpRequest.

注: x秒 の正確な間隔が必要な場合は、AJAX 要求が開始されてから呼び出しまでの経過時間を追跡し、この時間間隔setTimeout()を遅延から差し引く必要があります。それ以外の場合、上記の例の間隔時間は、ネットワークの待機時間と Web サービス ロジックの処理時間によって異なります。

于 2009-12-18T23:32:17.050 に答える
1

AJAXは、その名前にもかかわらず、非同期である必要はありません。

これが非同期メソッドです...

var req;

function ajax(method,url,payload,action)
    {
    if (window.XMLHttpRequest)
        {
        req = new XMLHttpRequest();
        req.onreadystatechange = action;
        req.open(method, url, true);
        req.send(payload);
        }
    else if (window.ActiveXObject)
        {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req)
            {
            req.onreadystatechange = action;
            req.open(method, url, true);
            req.send(payload);
            }
        else
            {
            alert("Could not create ActiveXObject(Microsoft.XMLHTTP)");
            }
        }
    }

...しかし、これは同期的な同等物です...

function sjax(method,url,payload,action)
    {
    if (window.XMLHttpRequest)
        {
        req = new XMLHttpRequest();
        req.open(method, url, false);
        req.send(payload);
        action();
        }
    else if (window.ActiveXObject)
        {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req)
            {
            req.onreadystatechange = action;
            req.open(method, url, false);
            req.send(payload);
            }
        else
            {
            alert("Could not create ActiveXObject(Microsoft.XMLHTTP)");
            }
        }
    }

...そしてここに典型的なアクションがあります...

function insertHtml(target)
    {
    var pageTarget = arguments[0];
    if (req.readyState == 4) // 4 == "loaded"
        {
        if (req.status == 200) // 200 == "Ok"
            {
            if (req.responseText.indexOf("error") >= 0)
                {
                alert("Please report the following error...");
                pretty = req.responseText.substring(req.responseText.indexOf("error"),1200);
                pretty = pretty.substring(0,pretty.indexOf("\""));
                alert(pretty + "\n\n" + req.responseText.substring(0,1200));
                }
            else
                {
                div = document.getElementById(pageTarget);
                div.innerHTML = req.responseText;
                dimOff();
                }
            }
        else
            {
            alert("Could not retreive URL:\n" + req.statusText);
            }
        }
    }
于 2009-12-18T22:20:42.353 に答える
1

jx.js（ソース）のような小さなツールキットを使用することをお勧めします。ここで見つけることができます：http ： //www.openjs.com/scripts/jx/（1,000未満の縮小）

リクエストを設定するには：

jx.load('somepage.php', function(data){
    alert(data); // Do what you want with the 'data' variable.
});

使用できる間隔setIntervalと、リクエストが現在発生しているかどうかを保存する変数で設定するには、発生している場合は、何もしません。

var activeRequest = false;
setInterval(function(){

    if (!activeRequest) {
        // Only runs if no request is currently occuring:
        jx.load('somepage.php', function(data){
            activeRequest = false;
            alert(data); // Do what you want with the 'data' variable.
        });
    }
    activeRequest = true;

}, 5000); // Every five seconds
于 2009-12-18T22:22:12.863 に答える