脱jQueryの勢いが増しております。
ちょっと前まで「まだjQuery使ってないの！？おっくれてるぅ〜」とか言っていた女子高生も、今では「エーッ！？まだjQueryなんか使ってるの？ダッサ〜い」と言っているとかいないとか。jQueryは何も悪くないんだけどね。とても優秀なライブラリです（フォロー）。
というわけで、jQueryを使わずにJavaScriptのFetch APIでAjaxする方法を解説します。
GETメソッドを使う
まずはできるだけシンプルに書いてみます。
TEXTデータを取得
GETメソッドでTEXTデータを取得する場合は次のように記述します。
//(1)イベントを発動させる
window.addEventListener('load', function () {
//(2)fetch()メソッドの実行
fetch('./data.txt')
//(3)レスポンスの受け取り
.then(function (response) {
//受け取ったデータを返す
return response.text();
})
//(4)受け取ったデータをコンソールに表示
.then(function (data) {
console.log(data);
});
});(1)イベントを発動させる
ページの読み込みが完了したらこの中のコードを実行しますよという記述です。
本題から逸れるのでやりませんが、ここの記述を変えれば「ボタンが押されたときに」とか「フィールドの内容が変更されたときに」コードを実行することができます。
(2)fetch()メソッドの実行
fetch() メソッドは1つまたは2つの引数を取ります。1つめの引数はURLです。ここでは ./data.txt となっています。絶対URLで指定することもできます。2つめの引数は省略可能で、省略した場合はGETメソッドでリクエストが送信されます。
(3)レスポンスの受け取り
.then() メソッドは前の処理が完了したら次にこれをしますよというものです。このようにドット . でメソッドをつなげていくことをメソッドチェーンといいます。
fetch() メソッドはPromiseオブジェクトを返します。Promiseは非同期処理の結果をあらわすオブジェクトで、この中に処理の成否や返されたデータが入っています。ここではこのPromiseを受け取る処理をします。
function (response) { ... } は無名関数です。受け取ったPromiseオブジェクトを response に入れています。
return response.text(); でresponse の text プロパティを返します。response.text にはお目当てのTEXTデータが入っています。
(4)受け取ったデータをコンソールに表示
また .then() でつないで次の処理をします。
function (data) { ... } で返されたデータを data に入れて、console.log(data); でそれをコンソールに出力します。./data.txt の内容がコンソールに出力されることでしょう。ブラボー！
JSONデータを取得
GETメソッドでJSONデータを取得する場合は次のように記述します。
//イベントを発動させる
window.addEventListener('load', function () {
//fetch()メソッドの実行
fetch('./data.json')
//レスポンスの受け取り
.then(function (response) {
//受け取ったデータを返す
return response.json();
})
//受け取ったデータをコンソールに表示
.then(function (data) {
console.log(data);
});
});TEXTデータを取得する場合と違うのは8行目の return response.json(); です。返されるデータがJSONの場合は json プロパティを参照します。
Promiseが返すデータの形式は次のとおりで、同じ名前のプロパティで参照することができます。
- ArrayBuffer
- Blob
- FormData
- JSON
- TEXT
エラー処理
非同期通信が失敗した場合の処理を追加します。
//イベントを発動させる
window.addEventListener('load', function () {
//fetch()メソッドの実行
fetch('./data.json')
//レスポンスの受け取り
.then(function (response) {
//(1)エラー処理
if (!response.ok) {
throw new Error(`${response.status} ${response.statusText}`);
}
//受け取ったデータを返す
return response.json();
})
//受け取ったデータをコンソールに表示
.then(function (data) {
console.log(data);
})
//(2)エラーが発生した場合はコンソールに表示
.catch(function (error) {
console.error(error);
});
});(1)エラー処理
response.ok はfetch() が成功した時は true 、失敗した時は false を返します。
失敗した場合に、throw new Error() で例外を発生させることによって、現在実行中の関数は停止し、catch に制御が移ります。
response.status にはHTTPステータスコード、response.statusText にはHTTPステータスを表す文字列が入っているので、それらをエラーメッセージに付加しています。オシャレにテンプレートリテラル(`...`)を使ってみました。
(2)エラーが発生した場合はコンソールに表示
上記のエラーメッセージをコンソールに表示する処理です。
プログラミングの独学に行き詰まっていませんか？誰かに相談したい、もっと効率よく学びたいなら、プログラミングスクールを検討してみてください。
通信の成否に関わらず実行する処理
finally() メソッドで、通信が成功しても失敗しても必ず実行する処理を記述することができます。
//イベントを発動させる
window.addEventListener('load', function () {
//fetch()メソッドの実行
fetch('./data.json')
//レスポンスの受け取り
.then(function (response) {
//エラー処理
if (!response.ok) {
throw new Error(`エラー ${response.status} ${response.statusText}`);
}
//受け取ったデータを返す
return response.json();
})
//受け取ったデータをコンソールに表示
.then(function (data) {
console.log(data);
})
//エラーが発生した場合はコンソールに表示
.catch(function (error) {
console.error(error);
})
//最後に必ず実行する処理
.finally(function () {
console.log('処理が完了しました');
});
});POSTメソッドを使う
POSTメソッドを使ってデータを外部プログラムに送り、戻り値を受け取る方法です。
JSON形式のデータを送信
POSTメソッドでJSONデータを送信する場合は次のように記述します。
//イベントを発動させる
window.addEventListener('load', function () {
//送信するデータ
const jsondata = JSON.stringify({
name: 'コンバトラーV',
height: '57メートル',
weight: '550トン',
});
//(1)fetch()に渡す第1引数
const url = './code.php';
//(2)fetch()に渡す第2引数
const options = {
method: 'POST',
body: jsondata,
};
//(3)fetch()メソッドの実行
fetch(url, options)
//レスポンスの受け取り
.then(function (response) {
//受け取ったデータを返す
return response.json();
})
//受け取ったデータをコンソールに表示
.then(function (data) {
console.log(data);
});
});(1)fetch()に渡す第1引数
POSTメソッドを使う時は fetch() に渡す引数が2つあるので、見やすくするためにそれぞれを定数として定義しました。
第1引数は通信相手のURLです。絶対URL、相対URLどちらでもOKです。ここでは ./code.php というPHPスクリプトを指定しました。
(2)fetch()に渡す第2引数
POSTメソッドを使う時は fetch() のオプションを第2引数で渡す必要があります。ここでは下記の2つのオプションを指定しています。
| method | GET, POST などのHTTPリクエストメソッドを指定します。指定しない場合の初期値は GET です。 |
| body | 送信するデータを指定します。 |
他にも指定できるオプションがあります。下記で確認してください。
(3)fetch()メソッドの実行
先ほど定義した url と options を渡して fetch() を実行します。
以下、レスポンスの受け取り等はGETの場合と同じです。
code.php の内容
<?php
//データを受け取る
$json = file_get_contents('php://input');
//JSONデータを連想配列に変換
$array = json_decode($json, true);
//ここで何か処理をする
//JSONに変換して出力
echo json_encode($array);code.php が受け取るデータはPOSTメソッドで送信されていますが $_POST では受け取れません。なぜなら $_POST で受け取れるのは Content-Type が application/x-www-form-urlencoded または multipart/form-data の場合のみだからです。ちゃんとマニュアルに書いてありますね。
なので file_get_contents('php://input') で受け取ります。あとはご自由に料理してJSONで返しましょう。
FormDataオブジェクトを送信
フォームに入力されたデータをまるっと送信する方法です。
<!-- (1)HTMLフォーム -->
<form id="form1">
<input type="text" name="field1" />
<input type="text" name="field2" />
<button id="fire">送信</button>
</form>
<script>
//(2)イベントを発動させる
const btn = document.getElementById('fire');
btn.addEventListener('click', function (event) {
//(3)フォームの送信をキャンセルする
event.preventDefault();
//(4)送信するデータ
const form = new FormData(document.getElementById('form1'));
//fetch()に渡す第1引数
const url = './code.php';
//fetch()に渡す第2引数
const options = {
method: 'POST',
body: form,
};
//fetch()メソッドの実行
fetch(url, options)
//レスポンスの受け取り
.then(function (response) {
//受け取ったデータを返す
return response.json();
})
//受け取ったデータをコンソールに表示
.then(function (data) {
console.log(data);
});
});
</script>(1)HTMLフォーム
HTMLのフォームでは、<form> と <button> に id を設定しておきます。
(2)イベントを発動させる
これまではページが読み込まれたときにイベントを発動していましたが、今回はid="fire"のボタンがクリックされたときにイベントを発動します。
(3)フォームの送信をキャンセルする
通常はフォームのボタンが押されるとデータが送信され画面が遷移します。そうなると、JavaScriptの実行結果が表示されなくなってしまうので、preventDefault()メソッドでフォームの送信をキャンセルします。
(4)送信するデータ
FormData()コンストラクタにフォームの要素を渡すと、そのフォーム内にある各要素のキーと値をペアとしたオブジェクトを作成することができます。
code.php の内容
<?php
//データを受け取る
$data = $_POST;
//ここで何か処理をする
//JSONに変換して出力
echo json_encode($data);FormDataオブジェクトを送信する時はContent-Type: multipart/form-dataなので、PHP側では$_POSTでデータを受け取ることができます。
でわでわ
コメント
コメント一覧 （2件）
[…] オブジェクト指向がわからない！ jQueryを使わないAjax、Fetch APIの書き方 | オブわか！ 脱jQueryの勢いが増しております。 […]
[…] オブジェクト指向がわからない！ jQueryを使わないAjax、Fetch APIの書き方 脱jQueryの勢いが増しております。 […]