2011-11-11 36 views
2

mysqlデータベーステーブルが変更されたときに、ページ自体を更新せずにデータベース行(PHP)の値を自動的にページに追加できますか?データベースが変更された場合、内容を自動的に更新する

ので、それは少し、このようなものです:Automatically refresh browser in response to file system changes?しかしの代わりに、ファイルシステムの変更でブラウザを更新、コンテンツを更新し、何も更新せず、ときdatabseが変化します。

ありがとうございました。私はこれを可能な限り明確にしようとしました。

+0

となります。exmapleのようなものは、Facebookのコメントのようなものですか?新しいコメントがデータベースに挿入されると、クライアント側の表示が更新されますか? –

+0

@LaithShadeedはい、あなたがすでに入力しているものを保持します。 –

+0

javascriptのsetInterval()と$ .ajaxを使用して、更新された行をページに返すPHPスクリプトをポーリングできます。 – mhoofman

答えて

7

が、これは時代遅れの答えであることに注意してください。これを行う最近の方法は、websockets、server-sendイベントです。その素晴らしい例はFirebaseです。簡単なコード例はhttps://github.com/laithshadeed/wsk-feedbackにあります。この例では、firebaseを更新するとwebsocket経由でブラウザにイベントが送信され、UIが更新されることがわかります。

これは、Comet/Reverse Ajax/HTTPサーバープッシュhttp://en.wikipedia.org/wiki/Comet_(programming)と呼ばれます。彼らはこれを行うための多くのテクニックであり、あなたのためにそれを行うための多くの既存のフレームワークです。

多くの答えがであり、SO

彗星 https://stackoverflow.com/search?q=cometについての簡単な実装では、MySQLのトリガー/ストアドプロシージャで、サーバーの状態を確認するためにはJavaScriptのsetTimeoutとのsetIntervalだろう。

彗星に深みをおいてください。

Comet and Reverse Ajax 2008 By Dave Crane

Comet and Reverse Ajax Cover Image

Chapter 4 (River of Content) - Building the Realtime User Experience 2010 By Ted Roden

Building the Realtime User Experience Cover image

更新:この約2クール冊があります。あなたはWebsockets and Server-sentイベントのようなHTML5で新しい技術に見えるかもしれません、IE現時点ではサーバーを送信したイベントはnot supported in IEとWebソケットのみ

+0

が見つかりませんでしたので、私はsetTimeoutとsetIntervalに行くと思います。どうもありがとう :) –

-3

JavaScriptを使用してDOMを操作します。

0

これは本当に簡単な作業ではありませんが、それほど悪くはありません。あなたのページに

  • コールバック関数をポーリングしたときに変更を報告し、サーバー上

    • サーバーでチェックし、あなたのページではJavaScriptルーチンspecifiedintervalsで
    • ページ:あなたはコンサートで働いていくつかのことを必要とします変更されたデータがサーバーによって報告されると、新しい要素が挿入されます(または既存の要素が更新または削除されます)。

    どのデータが変更されたかは、考えなければならないものです。最も簡単な方法は、おそらく、各レコードに対して「変更された」フィールドを維持することです。このようにして、JavaScriptがサーバーをポーリングするときには、「最後にチェックした」タイムスタンプを含めることができ、サーバーはより新しい変更を返すだけです。

    最初は表示されるほど難しくありません。 jQueryのようにビルド済みのライブラリを活用して、あなたは次のようなことを行うことができます。

    $.ajax({ 
        url: 'http://example.com/checkforupdates.php?last=' + (new Date().getTime()), 
        context: document.body, 
        success: function(data){ 
        // do something here to add/update/remove elements on your page 
        // using the information returned in the data argument. 
        } 
    }); 
    
  • +0

    難しいですが、私はこれを行うために使用できるコードがあります。 –

    関連する問題