JavaScriptでHTTPリクエストを行うにはどうすれば良いの？
JQueryで簡単にHTTPリクエストを行えるけど、それでも結構大変なんだ。PJUtilを使えば簡単にHTTPリクエストが出来るよ。やり方を説明するね。
JavaScriptでHTTPリクエストを行うのは割りと手間なので、自作ライブラリを用意しました。
ここでは、JavaScriptでゼロからHTTPリクエストを行う方法と、ぴよ猫自作ライブラリのPJUtilでHTTPリクエストを行う方法を紹介します。
１．HTTPリクエストとは？
クライアントからWebサーバーの処理を呼び出すことをHTTPリクエストと言います。
クライアントからサーバーにデータを送り、サーバー側で処理をして結果(レスポンス)を取得します。
HTTPリクエストを行う理由
クライアントからHTTPリクエストをWebサーバに行いWebサーバーで処理を行うのには主に以下の理由があります。
- データの共有
- 高度な処理の実行
HTTPリクエストを行う目的1．データの共有
LineやTwitterなどは複数のユーザーで情報(データ)を共有します。
この場合、自分のクライアントに無いデータはサーバーから取得する必要があるため、HTTPリクエストでサーバーからデータを取得します。
HTTPリクエストを行う目的2．高度な処理の実行
機械学習などの高度なライブラリは通常はクライアントPCにはインストールされていません。
また、機械学習を行うにはハイスペックなコンピューターが必要です。
クライアントでは行えない処理をサーバ側のプログラムに行わせるために、HTTPリクエストを利用します。
２．PJUtilでHTTPリクエストを行う方法
コード(html/JavaScript)
<!DOCTYPE html> <html lang="ja"> <link rel="stylesheet" href="./css/pjutil.css?ver=1.0"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script>; <script type='text/javascript' src='./js/pjutil.js?ver=1.0'></script> <script> function doRequest(){ var pjhttp = new PJHttp(); // リクエスト先サーバーの設定 pjhttp.url = "http://xxxxx/sample.php"; // レスポンスを受けるコールバック関数を設定 pjhttp.callback = function(text){window.alert("結果：" + text);}; // リクエストを送信 pjhttp.post({param1 : 'test1',param2 : 'test2'}); } </script> <input type="button" value="request" onclick="doRequest()"> </html>
PJUtilサンプルページ
PJUtil.PJHttpの処理の流れ
PJUtil.PJHttpの機能
| 分類 | プロパティ/メソッド | 説明 |
|---|---|---|
| コンストラクタ | PJHttp() | コンストラクタ |
| プロパティ | url | リクエスト先URL ※必須 |
| プロパティ | responseType | レスポンスタイプ（text or blob）。デフォルト=text |
| プロパティ | callback | リクエストを受けるコールバック関数。引数：data:レスポンスデータ 設定例) pjhttp.callback = function(data){window.alert(data);}; ※必須 |
| プロパティ | callbackError | エラー時のコールバック関数。引数：status、statusText 設定例) pjhttp.callbackError = function(s, st){window.alert(s + ":" + st);}; 設定しない場合、デフォルトのエラーハンドリング処理が動作します。 |
| プロパティ | loader | リクエスト中に表示するローディングメッセージ制御PJLoaderを設定する。設定しない場合、デフォルトのPJLoaderが動作します。 |
| プロパティ | lockCheck | 2重送信抑止チェックの有無(true or false)。デフォルト=true |
| メソッド | get(params) | GET HTTPリクエストを送信する。 |
| メソッド | post(params) | POST HTTPリクエストを送信する。 |
PJUtilダウンロードサイト（GitHUB）
https://github.com/shibayu2002/PJUtil.git
３．JavaScriptでHTTPリクエストを行う方法
初めに「きちんとしたHttpリクエストを行うのは大変です！」
先ほど、HTTPリクエストの流れを紹介しましたが、見て分かる通り、エラーハンドリングとか２度押しの抑止処理とかを考えると、JavaScriptでHTTPリクエストを行うのは大変です。
もう一度フローを掲載します。
↓↓↓
コード(html/JavaScript)
<!DOCTYPE html>
<html lang="ja">
<link rel="stylesheet" href="./css/pjutil.css?ver=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>;
<script type='text/javascript' src='./js/pjutil.js?ver=1.0'></script>
<script>
var lock = false;
var pjloader = null;
function doRequest(){
// 2重送信チェック
if(lock){
window.alert("ただいま処理中です。");
return;
}
lock = true;
// 処理中画像の表示(ここは<a href="http://piyonekochannel.com/entry/2020/02/03/162716" target="_blank">PJLoader</a>の説明を見て下さい。)
pjloader = new PJLoader("暫くお待ちください。");
pjloader.start();
// 非同期処理用のおまじない
setTimeout(function(){doRequestSub()}, 0);
}
function doRequestSub(){
var xhr = new XMLHttpRequest();
// コールバック関数設定
xhr.onload = function (e) {
try{
// サーバーの結果判定
if ((xhr.readyState === 4) && (xhr.status === 200)) {
// レスポンス結果を表示
window.alert(xhr.response);
return;
}
// エラーの場合は、エラーメッセージを表示
window.alert("エラーが発生しました。" + xhr.status + ":" + xhr.statusText);
}catch(e){
window.alert("エラーが発生しました。" + e);
}finally{
lock = false;
}
};
// リクエストパラメタ設定
var formData = new FormData();
formData.append("param1", "test1");
formData.append("param2", "test2");
// リクエスト送信
xhr.overrideMimeType('text/plain; charset=UTF-8');
xhr.open("POST", "http://xxxxx/sample.php", true);
xhr.responseType = "text";
xhr.send(formData);
}
</script>
<input type="button" value="request" onclick="doRequest()">
</html>
HTTPリクエストのJavaScriptの解説
上のシーケンス図と見比べて読み解いて下さい。m(＿ ＿)m
４．HTTPリクエストはライブラリ化した方が良い
HTTPリクエストで本当にやりないのは赤字の箇所
前節のコードで赤字にした箇所はHTTPリクエストの制御処理ではなく、各アプリケーションで固有の処理です。
具体的には、①画面から値を取得して、②サーバー処理を呼び出し、③結果を画面に表示する処理です。
これが貴方が本当に行いたいことのはずです。
それ以外は、それを実現するための制御処理です。
毎回、それ以外の処理も実装していたらソースが見辛くなりますね？
なので、この様な制御処理はライブラリ化した方が良いです。
PJUtilはフリーです
今回、ご紹介したPJUtilはフリーですので、良ければ利用して下さい。
https://github.com/shibayu2002/PJUtil.git
HTTPリクエスト用のライブラリについて
HTTPリクエスト用のライブラリにはJQueryやFetch APIがあります。
どちらも、簡単にHTTPリクエストを記載できるのですが、どちらのライブラリも二重送信の抑止処理や、ローディング画像の表示機能が含まれていません。
エラーハンドリングも自分で記載する必要があります。
この手の処理はニーズが異なるので、汎用化するには、ライブラリにこの手の処理を入れない方が良いと言うことなんだと思います。
ただ、とは言っても毎回記述するのは無駄ですしバグの下なので、JQueryやFetch APIを使う場合も、自分のアプリケーションに合った共通化を行うことをお薦めします。
繰り返しますが、HTTPリクエストの基本機能をPJUtilに盛り込みましたので、良ければご利用下さい。
本日は以上です。少しでも記事がお役に立てば幸いです。