ajaxを用いて、指定のdata属性を持ったdiv要素を○秒経ったらリロードさせたい

前提

javascriptのajaxを用いて、部分リロードを実装させたいです。
いくつかのサイトを参考にしましたが、うまく動かず途方に暮れております…

実現したいこと

ajaxを用いてdata-area="ajaxarea"というdata属性を持ったdiv要素が５秒視認領域にあったら、その要素内をリロードさせるscriptを組みたいです。
何卒よろしくお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8" />
5        <title>サンプルサイト</title>
6<script>
7function ajaxUpdate(url, element) {
8 
9    // urlを加工し、キャッシュされないurlにする。
10    url = url + '?ver=' + new Date().getTime();
11 
12    // ajaxオブジェクト生成
13    var ajax = new XMLHttpRequest;
14 
15    // ajax通信open
16    ajax.open('GET', url, true);
17 
18    // ajax返信時の処理
19    ajax.onload = function () {
20 
21        // ajax返信から得たHTMLでDOM要素を更新
22        element.innerHTML = ajax.responseText;
23    };
24 
25    // ajax開始
26    ajax.send(null);
27}
28 
29window.addEventListener('load', function () {
30
31    var div = document.querySelectorAll('[data-area="ajaxarea"]';
32 
33    setTimeout(function () {
34        ajaxUpdate(div);
35    }, 5000);
36 
37});
38</script>
39    </head>
40    <body>
41 
42        <h1>Ajaxを使ったreloadサンプル</h1>
43 
44        <div data-area="ajaxarea">
45            <h2>Ajax更新エリア</h2>
46            <p class="article">
47                サンプルメッセージ
48            </p>
49        </div>
50 
51    </body>
52</html>

試したこと

https://ms-redesign.com/test.html
デモサイトになります。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

arcxor

2022/07/20 16:07

うまく動かないというのは何が起きているのでしょうか。コンソールにエラーログなどは出ていないのでしょうか。

marumaru7943

2022/07/21 02:20

失礼いたしました。コンソールエラーは出ております。 https://gyazo.com/d44b02db572328576adae87f83d1ead5 https://ms-redesign.com/test.html テストサイトもございます。可能でしたらご確認いただけますと幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答2件

手元で動かしてないですが、ぱっと見で気になるところだけ以下。

定義：ajaxUpdate(url, element)
呼び出し：ajaxUpdate(div)

合ってません。
あと、querySelectorAll()はリストで取得されるので、直接element.innerHTMLのように参照できないのでは。（例え対象が1つしかなくてもリストになります）
１つしかないのならquerySelector()の利用を、
複数あるならquerySelectorAll()の取得結果をループで１つ１つ処理するか、その中で固定の要素ならリストの番号を参照させましょう。（固定なら特定できるようID振った方が良いと思いますが）

投稿2022/07/20 21:38

編集2022/07/20 21:42

m.ts10806

総合スコア80850

//sample.php

PHP
1<?php
2print microtime();

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function () {
3  const url='sample.php';
4  const timerID=[];
5  const observer = new IntersectionObserver(changes=>{
6    for (const t of changes) {
7      const idx=[...document.querySelectorAll('[data-area="ajaxarea"]')].indexOf(t.target);
8      clearInterval(timerID[idx]);
9      if(t.intersectionRatio>0){
10        timerID[idx]=setInterval(()=>fetch(url+"?id="+idx).then(res=>res.text()).then(txt=>t.target.querySelector('.article').textContent=txt),1000);
11      }
12    }
13  });
14  document.querySelectorAll('[data-area="ajaxarea"]').forEach(div=>observer.observe(div));
15});
16</script>
17<style>
18.dummy{
19height:120%;
20  background-Color:gray;}
21</style>
22<div data-area="ajaxarea">
23<h2>Ajax更新エリア0</h2>
24<p class="article">
25サンプルメッセージ
26</p>
27</div>
28<div class="dummy">dummy</div>
29<div data-area="ajaxarea">
30<h2>Ajax更新エリア1</h2>
31<p class="article">
32サンプルメッセージ
33</p>
34</div>
35<div class="dummy">dummy</div>
36<div data-area="ajaxarea">
37<h2>Ajax更新エリア2</h2>
38<p class="article">
39サンプルメッセージ
40</p>
41</div>
42<div data-area="ajaxarea">
43<h2>Ajax更新エリア3</h2>
44<p class="article">
45サンプルメッセージ
46</p>
47</div>
48<div class="dummy">dummy</div>