@Blog

fetch(next_url).then(
                response => response.text()
            ).then(data => {

                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');

let cnt = 2;
let blk = 0;
async function nextpage() {
    if (cnt !== blk) {
        blk = cnt;
        await (async () => {
            let next_url = "https://fox-black.com/blog/page/" + cnt;
            return await fetch(next_url).then(
                response => response.text()
            ).then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                let blogs = doc.querySelectorAll('.blogpage');
                cnt++;
                if (blogs[0].innerHTML !== undefined) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
                        let str = "";
                        for (const key in elm) {
                            const element = elm[key];
                            if (element.innerHTML !== undefined) {
                                str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
                            }
                        }
                        return str;
                    })(blogs));
                } else {
                    if (document.querySelector("#fin") === null) {
                        document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                    }
                }
            }).catch(error => {
                if (document.querySelector("#fin") === null) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                }
            });
        })();
    }
}

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    window.addEventListener("scroll", async function () {
        let s = (() => {
            let tgt;
            if ('scrollingElement' in document) {
                tgt = document.scrollingElement;
            } else if (this.browser.isWebKit) {
                tgt = document.body;
            } else {
                tgt = document.documentElement;
            }
            return tgt;
        })();
        if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
            await nextpage();
        }
    });
} else {
    document.querySelector(".foxpage").addEventListener("scroll", async function () {
        if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
            await nextpage();
        }
    });
}

<?php
//ini_set("display_errors","On");
session_start();
require "db_config.php";

//読み込みCSVファイル名セット
class csv
{
    /**
     * @param string $filename
     * @param int $cnt
     * @return Object
     */
    public function ini_csv($filename = "", $cnt = 0)
    {
        return new csv_read($filename, $cnt);
    }
}

//CSVデータを読み込ます
class csv_read
{
    var $max = 10000;
    var $cnt = 0;
    var $handle = null;
    /**
     * @param string $filename
     * @param int $cnt
     */
    public function __construct($filename = "", $cnt = 0)
    {
        $this->cnt = $cnt;
        $this->handle =  fopen($filename, "r");
        $_SESSION["offset"] ? fseek($this->handle, $_SESSION["offset"]) : $this->handle;
    }
    /**
     * @param int $header_skip
     * @return Object
     */
    public function reader($header_skip = 0)
    {
        if ($this->handle !== FALSE) {
            $response = null;
            $data = fgetcsv($this->handle, null, ",");
            if (!$header_skip || $_SESSION["offset"]) {
                if ($data !== FALSE) {
                    $_SESSION["offset"] = ftell($this->handle);
                    $response["data"] = $data;
                    $response["cnt"] = $this->cnt > $this->max ? 0 : ($this->cnt + 1);
                    $flag = true;
                } else {
                    $_SESSION["offset"] = null;
                    $flag = false;
                }
            } else {
                $_SESSION["offset"] = ftell($this->handle);
                $response["cnt"] = $this->cnt > $this->max ? 0 : ($this->cnt + 1);
                $flag = false;
            }
        } else {
            $_SESSION["offset"] = null;
            $flag = false;
        }
        return new table_save($flag, $response);
    }
}

//tableにCSVデータを保存
class table_save
{
    var $flag = false;
    var $result = null;
    /**
     * @param boolean $flag
     * @param array  $response
     * @return void
     */
    public function __construct($flag, $response)
    {
        $this->flag = $flag;
        $this->result = $response;
        $this->column_name = "name,,...";
    }
    /**
     * @param string  $column_name
     * @return void
     */
    public function tbl_save($column_name = "")
    {
        if ($this->flag) {
            $column = $column_name ? $column_name : $this->column_name;
            $is_column = explode(",", $column);
            foreach ($is_column as $key => $val) {
                $is_value[$val] = $this->result["data"][$key];
            }
            try {
                $pdo = new PDO(DSN, USERNAME, PASSWORD);
                $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                $sql = (function ($is_column) {
                    $INSERTFIRST = null;
                    $INSERTLAST = null;
                    foreach ($is_column as $key => $val) {
                        $INSERTFIRST[] = "$val";
                        $INSERTLAST[] = ":$val";
                    }
                    $INSERTSQL = "(" . implode(",", $INSERTFIRST) . ")values(" . implode(",", $INSERTLAST) . ")";
                    $UPDATESQL = null;
                    foreach ($is_column as $key => $val) {
                        $UPDATESQL[] = "$val = :$val";
                    }
                    return "INSERT INTO " . TABLENAME . $INSERTSQL . " ON DUPLICATE KEY UPDATE " . implode(",", $UPDATESQL) . ";";
                })($is_column);

                $stmt = $pdo->prepare($sql);
                foreach ($is_value as $key => &$value) {
                    $is_type = ($key === "test3" || $key === "test13") ? PDO::PARAM_INT : PDO::PARAM_STR;
                    $stmt->bindValue(":$key", $value, $is_type);
                }
                $this->result["sql"] = $stmt->execute();
            } catch (\Throwable $th) {
                //throw $th;
                $this->result = null;
                print $th->getMessage();
            }
        }
        print json_encode($this->result);
    }
}

//RUN...POST DATA
if (isset($_POST["csrf_token"])  && d_xss($_POST["csrf_token"]) === $_SESSION['csrf_token']) {

    $_SESSION["offset"] = (int)d_xss($_POST["reset_flag"]) === 1 ? null : d_xss($_SESSION["offset"]);
    $filename = d_xss($_POST["filename"]);
    $cnt = (int)d_xss($_POST["cnt"]);

    $column_name = "test1,test2,test3,test4,test5,test6,test7,test8,test9,test10,test11,test12,test13,test14,test15";
    $header_skip = 1;

    $csv = new csv();
    $csv->ini_csv($filename, $cnt)->reader($header_skip)->tbl_save($column_name);
    $csv = null;
} else {
    print "";
}
function d_xss($data){
    $data = strip_tags($data);
    $data = htmlspecialchars($data,ENT_QUOTES);
    return $data;
}

<?php
 // ログインした状態と同等にするためセッションを開始します
 session_start();
 // 暗号学的的に安全なランダムなバイナリを生成し、それを16進数に変換することでASCII文字列に変換します
  $toke_byte = openssl_random_pseudo_bytes(16);
  $csrf_token = bin2hex($toke_byte);
  // 生成したトークンをセッションに保存します
  $_SESSION['csrf_token'] = $csrf_token;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>CSV</title>
</head>
<body>
    <input type="hidden" name="csrf_token" value="<?=$csrf_token?>">
    <span class="h3" id="cnt"></span><br><br>
    <span class="h4" id="read_csv"></span><br><br>
    <span class="h4" id="debug"></span><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
    window.onload = function(){
        read_csv(0,1);
    };
    function read_csv(cnt,reset_flag){
        try{
            $.ajax({
            type: "post",
            url: "./assets/php/class_csv.php",
            async: false,
            data: {csrf_token:document.getElementsByName("csrf_token")[0].value,reset_flag:reset_flag,filename:"dummy.csv",cnt:cnt},
            dataType: "json",
            success: function (response) {
                    if(response){
                        cnt = response.cnt;
                        document.getElementById("cnt").innerText = cnt;
                        if(response.data){
                            document.getElementById("read_csv").innerText = response.data[0] + response.sql;
                            document.getElementById("debug").innerText = cnt ===21?response.data:document.getElementById("debug").innerText;
                        }
                        setTimeout(function(){read_csv(cnt)},0);
                    }
                }
            });
        }catch(e){
            console.warn(e);
            read_csv(cnt);
        }
    }
</script>
</body>
</html>