Ajaxを使用した自動更新の実装方法


  1. setIntervalを使用した定期的な更新: 以下の例では、JavaScriptのsetInterval関数を使用して、指定した間隔ごとにAjaxリクエストを発行し、コンテンツを更新しています。
setInterval(function() {
  // Ajaxリクエストを送信するためのコード
  // レスポンスを受け取り、コンテンツを更新するためのコード
}, 5000); // 5秒ごとに更新
  1. jQueryのloadメソッドを使用した更新: 以下の例では、jQueryのloadメソッドを使用して、指定した要素にAjaxで読み込んだコンテンツを挿入しています。
setInterval(function() {
  $('#content').load('update.php'); // update.phpからコンテンツを読み込み、#contentに挿入
}, 5000); // 5秒ごとに更新
  1. XMLHttpRequestを使用した更新: 以下の例では、JavaScriptのXMLHttpRequestオブジェクトを使用して、Ajaxリクエストを発行し、レスポンスを受け取っています。
setInterval(function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // レスポンスを受け取り、コンテンツを更新するためのコード
    }
  };
  xhr.open('GET', 'update.php', true);
  xhr.send();
}, 5000); // 5秒ごとに更新

以上が、Ajaxを使用した自動更新の実装方法とコード例の紹介です。ご参考までにお使いください。