背景

GET通信については、実装レベルで理解できてきたため、次はPOST通信を実装したい。

参考記事

・【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！
https://www.sejuku.net/blog/30245#XMLHttpRequestAjax

手順

上記GET通信の記述を参考に、POSTに書き換えた。（GETの場合、通信できた）
422エラーとなる。

    <script>
        let url = "https://api.github.com/search/repositories";
        let result = document.getElementById('result')

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            xhr.addEventListener('load', function() {
                console.log(xhr.responseText)
            })
            xhr.addEventListener('error', function() {
                console.log('サーバーエラーが発生しました')
            })
        }
        xhr.open('post', url);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8')
        xhr.send('q=javascript')
    </script>

一言

・422エラーについて
https://developer.mozilla.org/ja/docs/Web/HTTP/Status/422

The HyperText Transfer Protocol (HTTP) の 422 Unprocessable Entity 応答状態コードは、サーバーが要求本文のコンテンツ型を理解でき、要求本文の構文が正しいものの、中に含まれている指示が処理できなかったことを表します。

・そもそもPOSTの概念を理解していない可能性あり
GETはデータ取得をリクエスト。
POSTはデータ送信をリクエスト。