LoginSignup
6

More than 5 years have passed since last update.

Ajaxでhtmlの部分更新

Posted at

概要

Ajaxを使ってブラウザを更新せずにhtmlの一部だけを数秒毎更新する方法です。
チャットとかをイメージしてもらえると、分かりやすいかと思います。
本当はDBとかに値が入ったら更新というのがベストですが、
簡易版ということで。

内容

prototype.jsを使用。

html

<html>
  <body>
    test
    <div id="test"></div> // ここに通信結果が定期的に挿入される
  </body>
</html>

Ajax

<script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript">
      new Ajax.PeriodicalUpdater(
        'test', // 返り値を挿入するidを指定
        './xxx.html', // 非同期通信を行いたいURL
        {
          method: 'get',
          frequency: 2 // 何秒毎に通信を行うか
        }
      )
    </script>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6