ajaxによる無限スクロールを実装したい

前提・実現したいこと

教えていただきたいこと

無限スクロールの概念を教えていただきたく質問させていただきました。
現在こちらのコードで日付を検索して表示する機能はできております。

無限スクロールを実現する概念として、
SQLで表示件数を扱うLIMIT句に
初回　　　　0-30件
１回目更新　0-60件
２回目更新　0-90件

このような変数を用いてページ下部に来た時に更新をかけていくような処理を書けば良いでしょうか？

該当のソースコード



var ajax_test_button = document.getElementById('ajax_test');
ajax_test_button.addEventListener('click', (e) => {
    var target_text = document.getElementById('target_text').value;
    var target_date = "ajax?target_date=" + target_text;
    var ajax = new XMLHttpRequest();
    ajax.open("post", target_date);
    ajax.send();
    ajax.addEventListener("load", function(){
        var html = document.getElementById("test");
        var text_json = this.response.toString().replaceAll("'","\"");
        text_json =  JSON.parse('[' + text_json + ']');
        
        var hyou_text = "";
        for(var i = 0; i < text_json.length; i++ ){
             hyou_text += text_json[i].id + ",";
        }
        

        if(html) html.innerHTML = hyou_text;
    }, false);

});

試したこと

ajaxの無限スクロールについて調べる
(jQueryやwordpress,vueの記事がひっかかるも知りたい情報が得られず。)

こちらについて詳しい方いらっしゃいましたら、ご教授ください。
よろしくお願いいたします。

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

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

runnynose

2021/06/23 04:24

> jQueryやwordpress,vueの記事がひっかかるも知りたい情報が得られず。無限スクロールの実装なんて調べたらだいたいの知りたい情報に当たりそうですが、具体的になにを得たいですか？？

ataru2222

2021/06/23 04:37

ありがとうございます。技術不足でjQueryがわからないので、できればjavascriptのみを使って実装したいと考えております。無限スクロールを実現する概念として、 SQLで表示件数を扱うLIMIT句に初回　　　　0-30件１回目更新　0-60件２回目更新　0-90件このような変数を用いてページ下部に来た時に更新をかけていくような処理を考えたのですが、これで実現できそうですかね？お分かりになりましたら教えていただけると幸いです。

runnynose

2021/06/23 04:46

なるほど、ライブラリありきの実装方法しか情報が拾えなかったと理解しました。