簡単なAjaxを書いて使ってみよう
JavaScriptには、Ajaxという技術が用意されています。
AjaxはHTTP通信ができるHTTPとはウェブページなどをやり取りする技術（プロトコル）で、通常はブラウザとウェブサーバとの間で使われています。
Ajaxを使うと、ブラウザに代わってJavaScriptがウェブサーバとHTTP通信ができます。
このAjax入門ページでは、ブラウザはChromeを想定しています。もし解説通りに動かない場合は内容を飛ばして最後に紹介している「jQuery」を使ってください。「jQuery」によるAjaxは準備万端なので、さまざまなブラウザに対応しています。
このページでやること
当サイトには現在時刻をテキストで返すだけのPHPファイルが存在します。
http://html2php.starrypages.net/time
このPHPファイルにアクセスすると現在時刻だけ取得できます。リロードすると秒数が増えているのがわかります。
このようにAjaxを使わずに、普通にブラウザがHTTP通信を行うと、このページが消えて時刻のページが表示されます。つまりブラウザは、ウェブサーバからもらったデータを画面に表示するアプリなのです。
このAjax入門ページでは、ウェブサーバの提供するこの時刻データを、JavaScriptのAjaxを使ってHTTP通信を行い、閲覧中のページを変化させることなく取得します。取得したデータはJavaScript内で扱えるので、コンソールに出力するところまで解説しています。
XMLHttpRequest入門
JavaScriptに用意されているXMLHttpRequestというデータ群を使うと、Ajaxを利用することができます。
XMLHttpRequestを使うにはまずそれらのデータを使うためのオブジェクトを作ります。オブジェクトを作るにはnewを付けます。
var x=new XMLHttpRequest();
これで変数「x」にXMLHttpRequestオブジェクトがセットされ、「x」からXMLHttpRequestのデータを使うことができるようになります。「x」は単なる変数名なので何でも構いません。
XMLHttpRequestには色んなデータが用意されていますが、簡単なAjaxを実装するには次の５つを使います。なおカッコが付いているのはメソッドです。
| .open() | 準備するメソッド。URLなどを引数で指定する。 |
| .send() | リクエストを送信するメソッド。 |
| .responseText | 取得したテキストデータがセットされている。 |
| .readyState | 通信状態。通信が終わったのかどうか。 |
| .onreadystatechange | 通信状態が変化した時に実行する関数を設定する。 |
これだけで何となくXMLHttpRequestオブジェクトが何をするのかわかりますか？
まずopen()というHTTP通信の宛先を設定するメソッドがあるのはわかりますよね。今回は「http://html2php.starrypages.net/time」を設定することになります。なおopen()を使う時には宛先の他に「送り方」も一緒に設定します。ハガキなのか荷物なのかみたいなことです。
設定が終わったら実際にHTTP通信を開始するsend()があるのもわかります。宛名を書いただけではハガキは届きません。
HTTP通信が開始されると、ウェブの世界では1秒もしないうちに要求したデータが届きます。この場合は時刻データです。この取得したデータが代入されるのがresponseTextです。受信ポストや宅配BOXみたいなものです。
さらに、HTTP通信の状態を示すreadyStateというプロパティもあります。これは今どんな状態なのかが入っています。まだ何もしてないのか、宛名の設定だけ終わったのか、今まさに通信中なのか、すでに完了したのか、などの状態を示すデータがセットされています。追跡サービスとか、配送状況確認システムみないなものです。
そして、これらの通信状態が変化する度に実行される関数を設定することができるのがonreadystatechangeです。ここに関数を設定しておくとreadyStateが変化する度にその関数を実行してくれるというわけです。配送が開始されたり完了したら、メールや電話で通知してくれるサービスのような感じです。「メールや電話で通知」というのが関数に当たります。
実際に書いてみよう
では実際にJavaScriptでAjaxの処理を書いてみて、全体の流れを見てみましょう。
<!DOCTYPE html>
<title>Ajax入門</title>
<script>
var x=new XMLHttpRequest();
x.onreadystatechange=function(){
if(x.readyState==4){
console.log(x.responseText);
}
}
x.open('GET','http://html2php.starrypages.net/time');
x.send();
</script>Ajax入門ということで、かなり簡単なものになっています。
まず最初に5行目で、状態が変化したら実行してくれる関数を先に設定しています。
その関数の中でreadyStateを確認しています。
readyStateは状態を数値で表していて、この値は0〜4まであり、だいたい次のような設定になっています。
| 0 | まだ何もしてない。 |
| 1 | 宛先は決まった。 |
| 2 | 送信が始まった。 |
| 3 | 通信中。 |
| 4 | 終わった。 |
サンプルコードでは「if文」を使って「4」のときだけ処理をしています。つまり、通信状態を見極めて、通信が終わったときだけ処理をさせているわけです。送信が始まったばかりの2や、まだ通信中の3の状態では、responseTextは空っぽなので出力しなくて良いからです。4になったら見せてくれ、ということです。
次に、12行目で宛先の前にGETを引数に設定していますが、これは送信方法です。
送信方法はいくつかありますが、よく使うのはGETとPOSTです。
通信のとき、こちらからもデータを送る場合、GETだと少ししか送れないので、大きいデータを送りたいときはPOSTを使います。
他にも違いはありますが、とりあえず今回は何も送らないのでGETを使っています。
実際に見てみよう
前述のサンプルコードでは、ページがロードされた瞬間にJavaScriptが実行され、すぐさまAjax通信が始まり、あっという間にやり取りが終わってコンソールに出力されてしまいます。
それだとよくわからないので、ボタンを押したらAjax通信が開始されるように改良します。
<!DOCTYPE html>
<title>Ajax入門</title>
<script>
var x=new XMLHttpRequest();
x.onreadystatechange=function(){
if(x.readyState==4){
console.log(x.responseText);
}
}
document.querySelector('button').onclick=function(){
x.open('GET','http://html2php.starrypages.net/time');
x.send();
}
</script>HTMLでボタンを追加して、JavaScriptでボタン要素を取得して、ボタンがクリックされたら実行される関数を設定しています。
つまり、ボタンを押すごとにopen()とsend()が実行されるというわけです。なおsend()だけではエラーとなるようなので、open()してからsend()としてください。
では、サンプルページで確認してみましょう。
一瞬なのでわかりずらいですが、ページの更新なしに時刻のデータを取得できているのがわかります。
まとめ
「http://html2php.starrypages.net/time」に移動してリロードすることと、Ajaxのサンプルページのボタンをクリックすることは、方法が違うだけでやっていることはあまり変わりません。
アクセスするのがブラウザかXMLHttpRequestオブジェクトかの違いであって、表面的にはページが変更されるかされないかです。
データを取得するというよりは、サーバ側のプログラムを作動させる目的でAjaxを使うことが多いです。
さて、実際にはサンプルのAjaxコードにはいくつも問題があります。
まず、このAjaxでは他のブラウザに対応していないし、ウェブサーバからエラーが返ったときの処理なども書き分けていません。またAjaxには同期通信か非同期通信かの設定もできます。
これらの面倒はライブラリからAjaxを使うことで解決できます。
ライブラリを使わずにサンプルのAjaxコードを拡張させても構いません。
いずれにせよ、このページで解説した一連の流れを覚えておけば、Ajaxを使う場面で戸惑うことは少ないでしょう。