web-dev-qa-db-ja.com

更新せずにページのデータを更新する

ステータスを更新する必要があるWebサイトがあります。フライトのように、出発、クルーズ、または着陸しています。視聴者にページ全体を持たせてリロードさせることなく、ステータスを更新できるようにしたいと思います。 AJAXとjQueryを使用してそれを行う方法があることは知っていますが、それがどのように機能するのか理解していません。また、ボタンを押してクリックさせたくありません。誰かがそれがどのように行われるかを知っているなら、私はそれをとても感謝しています！

phpjqueryajaxrefresh
19
Gidimotje

一般に、何かがどのように機能するかわからない場合は、学習できる例を探してください。

この問題については、考慮してください this DEMO

AJAXを使用したコンテンツのロードは、jQueryを使用して非常に簡単に実行できます。

$(function(){
    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";

    // load() functions
    var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
    $("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

// end  
});

これがどのように機能するかを理解してから、複製を試みてください。幸運を。

対応するチュートリアルを見つけることができます HERE

更新

現在、次のイベントはajax load関数を開始します。

$("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

これを定期的に行うこともできます。 定期的にAJAXリクエストを発行する方法？

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(data);
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);
    }
  });
})();

この実装のデモを作成しました HERE。このデモでは、2秒ごと（setTimeout(worker, 2000);）にコンテンツが更新されます。

データをすぐにロードすることもできます：

$("#result").html(ajax_load).load(loadUrl);

持っている THIS 対応するデモ。

25
Jean-Paul

JQuery Ajaxについては、公式jQueryサイトから読むことができます。 https://api.jquery.com/jQuery.ajax/

クリックイベントを使用したくない場合は、定期的に更新するためのタイマーを設定できます。

以下のコードは、ほんの一例です。

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  });
}

上記の関数は、10秒ごとにを呼び出し、response.phpからコンテンツを取得し、#some_divで更新します。

3
Butani Vijay

最初にajaxを学びたいと思うと思います。 Ajax Tutorial

Ajaxの仕組みを知りたい場合、jQueryを直接使用するのは良い方法ではありません。サーバーにajaxリクエストを送信するネイティブな方法の学習をサポートします。XMLHttpRequestについての何かを参照してください。

var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");

xhr.onreadystatechange = handler; // do something here...
xhr.send();
1
Shin

ページを更新せずにWebページにlive feed content（たとえばlivefeed.txt）を表示する場合は、次のようにしますsimplifiedあなたのために。

以下のhtmlファイルでは、ライブデータは、idのdiv要素で更新されます"liveData"

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Live Update</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="reloader.js"></script>
</head>
<div id="liveData">
    <p>Loading Data...</p>
</div>
</body>
</html>

以下のautoUpdate.jsはXMLHttpRequestオブジェクトを使用してライブデータを読み取り、1秒ごとにhtml div要素を更新します。理解を深めるために、ほとんどのコードにコメントを付けました。

autoUpdate.js

window.addEventListener('load', function()
{
    var xhr = null;

    getXmlHttpRequestObject = function()
    {
        if(!xhr)
        {               
            // Create a new XMLHttpRequest object 
            xhr = new XMLHttpRequest();
        }
        return xhr;
    };

    updateLiveData = function()
    {
        var now = new Date();
        // Date string is appended as a query with live data 
        // for not to use the cached version 
        var url = 'livefeed.txt?' + now.getTime();
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    };

    updateLiveData();

    function evenHandler()
    {
        // Check response is ready or not
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            dataDiv = document.getElementById('liveData');
            // Set current data text
            dataDiv.innerHTML = xhr.responseText;
            // Update the live data every 1 sec
            setTimeout(updateLiveData(), 1000);
        }
    }
});

テスト目的の場合：livefeed.txtに何かを書くだけです-index.htmlでも更新せずに同じように更新されます。

livefeed.txt

Hello
World
blah..
blah..

注：上記のコードをwebサーバーで実行する必要があります（例： http：// localhost：1234/index.html ）notクライアントhtmlファイルとして（例：file：/// C：/index.html）。

0
SridharKritha