APIの利用
前章では、基本的な ajax メソッドの使い方を学びました。
続いて、単なるテキストファイルを読み込むのではなく PHP で作成した簡単な Web アプリケーションに対してリクエストを送ってみましょう。
今回は、
- number という名前で GET 送信した値を受け取る
- 1から number までを合計した値を送り返す
というシンプルな Web アプリケーションを作成します。
シンプルな API の作成
サンプル htdocs/api/api_sample.php を作成しましょう。
htdocs/api/api_sample.php
<?php
// GETで送信された値の受け取り
$number = 0;
if(isset($_GET['number']) === true){
$number = $_GET['number'];
}
// 1からnumberまでの合計を計算
$sum = 0;
for($i = 1; $i <= $number; $i++){
$sum += $i;
}
echo $sum;
これで API は完成です。
続いて ajax でリクエストを送る側の html を作成しましょう。
以下のサンプル htdocs/api/use_api.php を作成して実行します。
htdocs/api/use_api.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ajaxのサンプル</title>
</head>
<body>
<h1>ajaxのサンプル</h1>
1から<input type="number" id="number">までの合計
<button id="send">ajaxでリクエスト送信</button>
<p id="box">ここに受け取ったテキストが入ります。</p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
// button#sendがクリックされた時に
$('#send').on('click', () => {
// ajaxでリクエストを送信
$.ajax({
url: 'api_sample.php',
// GET送信する値を指定
data: {
number: $('#number').val()
}
}).done((res) => {
// リクエストが成功したときの処理
$('#box').html(res);
}).fail(() => {
alert('エラーです');
});
});
</script>
</body>
</html>
これで、1から任意の値までの合計を計算する Web API と、それを ajax で呼び出す仕組みが完成しました。
APIの仕組み
今回の API は GET で受け取った値を利用して処理を行います。
今回はシンプルに for 文で1から受け取った値までの合計を計算しています。
レスポンスとして返す値は、単にテキストを返すのであればその文字列を echo するだけで完了です。
ajax でのリクエスト送信
今回のリクエスト送信では
// ajaxでリクエストを送信
$.ajax({
url: 'api_sample.php',
// GET送信する値を指定
data: {
number: $('#number').val()
}
}).done((res) => {
// リクエストが成功したときの処理
$('#box').html(res);
}).fail(() =>{
alert('エラーです');
});
上記のように data 属性を利用して number の値を送信しています。
また number の値については
$('#number').val()
とすることで、id="number" と設定されている input 要素の入力値を取得しています。
json の返却
上記のサンプルを改良して api では json と呼ばれる javascript のオブジェクト配列をレスポンスするようにしてみましょう。
まず、htdocs/api/api_sample.php を書き換えます。
htdocs/api/api_sample.php
<?php
$number = 0;
if(isset($_GET['number']) === true){
$number = $_GET['number'];
}
$sum = 0;
for($i = 1; $i <= $number; $i++){
$sum += $i;
}
echo json_encode([
'sum' => $sum,
'start' => 1,
'max' => $number
]);
出力値が配列になり、さらに json_encode 関数が適用されています。
このようにすることで JSON データと呼ばれる JavaScript 側でオブジェクトやオブジェクトの配列として読み込まれるデータが作成されます。
続いて html 側も一部書き換えましょう。
htdocs/api/use_api.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ajaxのサンプル</title>
</head>
<body>
<h1>ajaxのサンプル</h1>
1から<input type="number" id="number">までの合計
<button id="send">ajaxでリクエスト送信</button>
<p id="box">ここに受け取ったテキストが入ります。</p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(function(){
// button#sendがクリックされた時に
$('#send').on('click', () => {
// ajaxでリクエストを送信
$.ajax({
url: 'api_sample.php',
// GET送信する値を指定
data: {
number: $('#number').val()
},
// レスポンスのデータ形式を指定
dataType: 'json'
}).done((res) => {
// リクエストが成功したときの処理
console.log(res);
// 文字列をオブジェクトに変換（パース）
let data = res;
// リクエストが成功したときの処理
$('#box').html('1から' + data.max + 'までの合計は' + data.sum);
}).fail(() => {
alert('エラーです');
});
});
});
</script>
</body>
</html>
今回は done メソッドに渡した無名関数の引数に api_sample.php からレスポンスされた json データが代入されています。
その中で、最大値と合計値を利用して表示を変更しています。
dataType: 'json'
上記のところで、受け取るデータを json データとして読み込んでいるところがポイントです。