Laravelで非同期通信を使って検索機能を実装したい

Question

前提・実現したいこと

PHP(laravel)で非同期通信の検索機能を作りたいです。
jqueryの導入ができなかったため、JavaScriptのXMLHttpRequestを使っています。

controllerの処理で、jsonデータを返すというところまでは分かったので、
JavaScript側でそのjsonを受け取ってcontrollerの処理結果をviewに返すという処理をやりたいです。

JavaScript側でjsonを受け取るためには、「xhr.responseType = 'json';」と記述する必要がある、というところまでは理解しているつもりです。

しかし、受け取りに成功しているかも分からず、どういう風にcontrollerの処理結果をviewに返せばよいかも分かりません。

上記について、知見がある方ご教授してくださると幸いです。
拙い文章で申し訳ないですがよろしくお願いいたします。

<list.blade.php>

 <div class="form-group">
   <form id="search">
    <input type="text" name="keyword" value="@if (isset( $keyword )) @endif" 
     id="keyword" placeholder="キーワード入力" >
    <input type="button" id="search-icon" value="検索" onclick="buttonClick()">
   </form>
 </div>  

<Controller.php>

 public function getSearch(Request $request)
    {
        // キーワードを取得
        $keyword = $request->input('keyword');

        //クエリ作成
        $query = Blog::query();

        //キーワードが入力されている場合
        if(!empty($keyword)){
        $query->where('title', 'like', '%'.$keyword.'%')
              ->orWhere('body','like','%'.$keyword.'%');
        }
        
        // 検索結果を5件ごとに表示
        $blogs = $query->paginate(5);
        

        // 検索結果をブログ一覧に表示
        return response()->json(['blogs' => $blogs]);
        //($blogs);
        
        }

<search.js>

 function buttonClick() {
    const table = document.querySelector('#table').innerHTML = '';
    const textbox = document.forms.search.keyword.value;
    if (!textbox) {
        return false;
     }
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/search', true);
    xhr.responseType = 'json';
    xhr.send(null);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert("通信に成功しました");
        // 通信が成功したらControllerの処理結果をview返したい
        } else {
            alert("通信に失敗しました");
        };

    };

};

<web.php>

 //検索機能
Route::get('/search', [BlogController::class, 'getSearch'])->name
('search');

試したこと

・console.logやchromeのデバッグツールを使用して、jsonが受け取れているか確認したが
成功しているか不明。
・<search.js>の記述を以下のようにしてみましたが、elseの処理結果のみ反映されます。

function buttonClick() {
    const table = document.querySelector('#table').innerHTML = '';
    const textbox = document.forms.search.keyword.value;
    if (!textbox) {
        return false;
     }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/search', true);
    xhr.responseType = 'json';
    xhr.send(null);
    xhr.onreadystatechange = function () {
    
    if (xhr.readyState === 4 && xhr.status === 200) {
            (function (data) {
                data.forEach(function (value) {
                    let id = value.id;
                    let title = value.title;
                    let updated_at = value.updated_at;
                    table.innerhtml = `
                        <tr>
                        <td>${id}</td>
                        <td><a href="/blog/${id}">${title}</a></td>
                        <td>${updated_at}</td>
                        </tr>
                        `;
                });
            }); elseif(data === 0)
                table.innerhtml = `<p>検索結果がありません</p>`;
             } else {
                alert("通信に失敗しました");
            }

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

MAMPのバージョンは6.0.1(986)
VScodeバージョン: 1.52.1
laravelのバージョンは８です。

Comments

[hentaiman]

v8ならlivewire使えばスペシャル簡単なのに使わずやりたいんですか？

[moru]

すみません、そういう機能があるということを初めて知りました。
簡単にできるなら一度試そうと思いますが、jqueryのインストールがnpmのエラーのせいで出来なかったのもあり、地道にJSのコードを記述した方が早いのかなとも思っております。

[hentaiman]

簡単かどうかはhttps://laravel-livewire.com/docs/2.x/actionsのドキュメントを理解する能力というか、理解する努力する気があるならって感じです
元々javascriptを書ける人なら新たにlivewireの記述を１から覚える必要があると感じる分手間だと感じるとは思いますが

Answer 1

controllerの処理で、jsonデータを返すというところまでは分かったので、

JavaScript側でそのjsonを受け取ってcontrollerの処理結果をviewに返すという処理をやりたいです。
JavaScript側でjsonを受け取るためには、「xhr.responseType = 'json';」と記述する必要がある、というところまでは理解しているつもりです。

やりたいことは、検索機能を非同期で行いたいということですよね？
それにjsonは必須でしょうか、今一度考えてみましょう。
jsonでなくてもデータのやりとりができるのはご存知ですか？
単純に、既存のHTMLを差し替えるだけじゃダメなんでしょうか？

Comments

[moru]

ご回答ありがとうございます。
json以外のデータ形式があることは、なんとなく理解しています。
調べるとjsonでデータを返してるものが多く、そうしないといけないと思っていました。
検索結果をDBから取得して結果を返すというイメージなのですが、controllerの処理を経由せずともhtmlの差し替えだけで事足りるのでしょうか。
知識が浅くてすみません‥

[mikkame]

> 検索結果をDBから取得して結果を返すというイメージなのですが、controllerの処理を経由せずともhtmlの差し替えだけで事足りるのでしょうか。

それで良いと思います。

[m.ts10806]

JavaScriptでHTMLを組んで取り込むのはそれなりに負荷がかかるのでサーバーサイドから出来上がったHTML返してそのまま差し替えるってよくやります（特にHTML量が不定で多くなりがちな一覧の検索結果とか）

[moru]

返事が遅くなりすみません。
その方向で調べてみます。ありがとうございました。