【JavaScript】Ajaxを使わない非同期通信処理「XMLHttpRequest」の書き方

自分のための備忘録としてまとめ。
Ajax のかわりに XMLHttpRequest を使って非同期通信の処理を行う方法です。
普段、Ajax に頼りきりで、書き方をすっかり忘れていたので、今後のためにまとめておきます。

今回参考にさせていただいた記事はこちらから。

XMLHttpRequestによるPOSTメソッド｜JavaScript プログラミング解説
https://so-zou.jp/web-app/tech/programming/javascript/ajax/post.htm

JavaScript によるフォームの送信 – Web 開発を学ぶ｜MDN
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

早速ですが、サンプルコードは下記のとおりです。
なお、サンプルは POST の場合の書き方です。

// POSTメソッドで送信するデータ
var data = { param1: 'abc', param2: 100 }; 
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest .addEventListener('load', function(event) {
    // データが正常に送信された場合の処理
});
xmlHttpRequest .addEventListener('error', function(event) {
    // エラーが発生した場合の処理
});
xmlHttpRequest.open('POST', '[送信先URL]');
// サーバに対して解析方法を指定する
xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// データをリクエスト ボディに含めて送信する
xmlHttpRequest.send(EncodeHTMLForm(data));

一緒に送信したいデータは、変数 data に代入し、14行目で送付しています。
ただし、送信するデータは HTML フォームの送信に使用される形式に変換する必要がありますので、下記の関数でエンコードする必要があるとのことでした。

function EncodeHTMLForm(data) {
    var params = [];
    for(var name in data) {
        var value = data[ name ];
        var param = encodeURIComponent(name) + '=' + encodeURIComponent(value);
        params.push(param);
    }
    return params.join('&').replace(/%20/g, '+');
}

うっかりこの処理を抜いて実行したところ、当然ながら正しく値が渡せていなかったため、ご注意ください。

送信完了時の処理と、エラーが発生した時の処理は、それぞれ 4行目と 7行目の関数内で定義します。
ステータスコードなどで判断する方法もありましたが、こちらの方がコードがすっきりとしていて好みなので、こちらの書き方を採用しました。

以上、Ajax を使わずに非同期通信処理を行う方法でした。
ご参考になれば幸いです。