1

テーブルを含む div があるとします。テーブルが別の行で更新されたことを html ページにリモートで通知したいと思います。これはHtmlでも可能ですか？

これはテスト目的でのみ行い、通知を送信したのと同じコンピューターでサイトを表示するので、ここで扱っている「セキュリティ」の問題はありません。

<html>
<head>
</head>
<body>
    <div id="test">
        <table>
            <tr>
                <td id="name">Harry</td>
            </tr>
        </table>
    </div>
</body>
</html>

id="test"ユーザーがhtmlサイトで何かを押すことなく、新しいテーブルでdivを更新するようにHtmlサイトに通知したいと思います。サイトの別の場所からの IE は、通知されるとリアルタイムで div を更新する関数を実行します。

   <table>
        <tr>
            <td class="name">Harry</td>
            <td class="name">Flynn</td>
            <td class="name">Niklas</td>
        </tr>
    </table>

これは奇妙な質問であり、具体的でないことは承知しています。申し訳ありません。私がやりたいのは、SQLデータベースを用意することです。データベースが更新されるとすぐに、htmlページに通知して更新する必要がありますが、私が言ったように、これが可能かどうかはわかりません。

4

5 に答える 5

2

HTML ページに直接「通知」(つまり「プッシュ」) することはできませんが、サーバー側をポーリングするために、10 秒ごとなどの所定の間隔でページ上で JavaScript を実行することができます。新しいデータがある場合は、HTML を更新します。あなたは次のようなものを持っているでしょう

var interval = setInterval(function() { updateTestData(); }, 10000);

function upateTestData() {
    //use ajax to poll for new data and update DOM tree
}

または、必要に応じて再度更新をリクエストすることもできます。

var timer = setTimeout(function() { updateTestData(); }, 10000);

function upateTestData() {
    //use ajax to poll for new data and update DOM tree
    ...
    if(need to refresh again after some time) {
        timer = setTimeout(function() { updateTestData(); }, 1000);
    }
}
于 2013-04-29T09:48:33.077 に答える
0

ビューモデルの変更に応じて dom 要素を自動的に更新する 2 つの JavaScript フレームワークである AngularJs または KnockoutJs を使用できます。

  1. サーバーまたはSQLサーバーにデータを送信します。
  2. ビューモデルが存在する html ページに更新されたデータを返します。
  3. viewmodel コンストラクター (knockout または angularJs) は、更新されたデータを取得し、バインディングに従って dom 要素を更新します。
于 2013-04-29T09:48:01.087 に答える
0

これは、Ajax と呼ばれるテクノロジを使用して行います。

あなたがしなければならないことは、一定時間ごとにタイムアウトを設定し、ajax を使用してサーバーにクエリを送信し、テーブルに追加する行がさらにあるかどうかを確認することです。

インターネット上には Ajax 関連のチュートリアルがたくさんあります。たとえば、次の Web サイトがあります。

于 2013-04-29T09:48:40.493 に答える
0

これwebsocketsが最終的な解決策ですが、あなたの場合に実装するのは少し複雑です。さらに、最新世代のブラウザのみがサポートしています。

HTML ページに setInterval 関数を作成し、たとえばデータベースに保存されているタイムスタンプをチェックして、ページが最新かどうかを確認する必要があります。

例えば ​​：

HTML ページで:

var now = new Date();
var timestamp = now.getTime();

setInterval(function(){
    $.post('retrieveLastTimestamp.php',{},function(data){
        if(intval(data) > timestamp)
        {
            //The page is no longer up to date
            document.location.reload(true);
        }
    });
},5000);

//Call this function to update the last timestamp dta of your page after row insertion
function updateTimestamp()
{
    var now = new Date();
    var timestamp = now.getTime();
    $.post('updateTimestamp.php',{timestamp : timestamp },function(data){
        alert('timestamp update done');
    });
}

検索LastTimestamp.php

<?php 
    //SQL request to retrieve the last refresh timestamp
    echo timestamp;
?>

updateTimestamp.php

<?php 
    //SQL request updtae the last timestamp
    $timestamp = $_POST['timestamp'];
?>
于 2013-04-29T09:54:40.807 に答える
0

@aleks-g が説明したように、情報を html にプッシュすることはできません。

ただし、使用できる無料または安価なプッシュ サービスはたくさんあります。それらには単純なjavascript構成が付属しており、サーバーが何らかの信号を送信し、この信号が送信されたときにjavascriptリスナーが起動されるという考え方です。
このようにして、過剰な ajax 呼び出しを起動する必要なく、リアルタイムの動作を行うことができます。

Node.jsでSocket.IOを使用して実装するか、既存のサービスをPusherとして使用できます。

于 2014-12-24T12:19:24.347 に答える