ajax 実践入門
Web API と切っても切れないのが ajax の仕組みです。
Web API は基本的に
- JavaScript が Web ブラウザを通じて Web アプリケーションに対して GET や POST でリクエストを送信する
- リクエストを受信した Web アプリケーションがレスポンスを送信する
- レスポンスを受信した Web ブラウザが JavaScript にデータを渡し JavaScript で処理を行う
という一連の流れで利用されます。
この
- JavaScriptでリクエストを送信する
- 受信したレスポンスを利用してJavaScriptで処理を行う
という部分でajaxが活用されます。
ajax とは
ajax とは「asynchronous JavaScript with XML」の略で、
- JavaScript を利用して非同期通信を行う
- データ形式として XML を利用する
という意味合いのものでした。
しかし、現在では XML が使われることは少なくなり、主に非同期通信を行うことのみを指して ajax と呼ばれることが多くなっています。
ajax のサンプル
それでは、実際に ajax を体験してみましょう。
あらかじめ htdocs/api/sample.txt というテキストファイルを用意しておきます。
htdocs/api/sample.txt
これはサンプルです。
上記の内容で保存しておきましょう。
さらに、サンプル htdocs/api/ajax_sample.php を作成して実行します。
htdocs/api/ajax_sample.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ajaxのサンプル</title>
</head>
<body>
<h1>ajaxのサンプル</h1>
<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: 'sample.txt',
}).done((res) => {
// リクエストが成功したときの処理
$('#box').html(res);
}).fail(() => {
alert('エラーです');
});
});
</script>
</body>
</html>
上記のファイルを作成し、実行する際には
php -S 0.0.0.0:8080 -t ~/environment/htdocs
上記のコマンドで htdocs ディレクトリを公開して urlの末尾に「 /api/ajax_sample.php 」をくっつけて開きます。
ボタンをクリックすると、「ここに受け取ったテキストが入ります」と書いてある箇所が「サンプルです」というテキストに置き換わります。
ajaxメソッドの仕組み
今回利用した ajax メソッドについて詳しくみてみましょう。
// ajaxでリクエストを送信
$.ajax({
// リクエストの送信先
url: 'sample.txt',
}).done((res) => {
// リクエストが成功したときの処理
$('#box').html(res);
}).fail(() => {
alert('エラーです');
});
jQuery の ajax メソッドを利用すると、指定した url にリクエストを送信することができます。今回のケースでは、同じディレクトリにある htdocs/api/sample.txt に対してリクエストを送信しています。
さらに done メソッドでリクエストの結果が返ってきたときの処理を指定することができます。
fail メソッドでは、リクエストが失敗したときの処理を設定しておくことができます。
リクエストの結果となるテキスト(sample.txt)は引数の res に代入されるため、
// リクエストが成功したときの処理
$('#box').html(res);
の記述で id="box" が設定されている要素のタグ内テキスト部分に、読み込んだテキストが上書きされます。