XAMPPをインストールすると、サーバーが使えるように１台のパソコンでクライアントとサーバー間のデータのやり取りができるようになります。
ここでは、jQuery(JavaScript)とPHPを用いたAjaxでのデータ通信の基本をまとめておきます。
「Ajax」とは？
「Asynchronous JavaScript + XML」の略で、「エイジャックス」もしくは、「アジャックス」と読みます。
JavaScriptとXMLを使って非同期にサーバとの間の通信を行うことです。
ここで、用語が分からないと「Ajax」も理解できないので、先に用語の説明から。
- JavaScript
- XML
- 非同期
この3つの言葉ですね。
JavaScript
一口に言えば、Webサイトを作るためのプログラミング言語です。
ほとんどのWebページは、HTML・CSS・JavaScript の３つの言語を用いて作られています。
それぞれの役割は、
HTML
これを使ってWebコンテンツに構造と意味を与えます。
具体的には、段落や見出しや表を定義したり、画像や動画を入れたりします。
つまり、Webページの構成をします。
CSS
HTMLで設定した構造にスタイルを適用します。
すなわち、背景やフォントに色を設定したり、大きさをCSSで設定します。
JavaScript
Webコンテンツに動きを与えます。
動的にコンテンツを更新したり、マルチメディアを管理したりします。
具体的には、文字を書き換えたり、色を変えたり、画像を変化させたりなど動きを与える処理をします。
XML
HTMLによく似ています。
HTMLもそうですが、文章の見た目や構造を記述するためのマークアップ言語です。
マークアップ言語とは、タグと呼ばれる特殊な文字列を使用して、文章の構造やタイトル、文字の修飾情報などを埋め込んでいく言語です。
下は、同じ内容のデータをHTMLとXMLで表したものです。
HTMLは内容を人間に分かりやすくブラウザに表示します。
しかし、XMLは人間に対してではなく、コンピュータに対して分かりやすくするためのものです。
つまり、コンピュータ間でのデータのやり取りなどがスムーズに行なえるようになるということです。
非同期
非同期通信のことです。
ネットワークなどコンピュータ間でデータをやり取りする場合、送信側の送信タイミングと受信側の受信タイミングを合わせずに通信を行う通信方式です。
同期通信はデータ通信のリクエストを出してからレスポンスが来るまで他の処理を行わずにレスポンスを待ち続けます。
一方、非同期通信ではレスポンスを待っている間に他の処理を行うことができます。
他の処理を行っている際に、レスポンスを受信すると受信処理を実行します。
同期通信だと、一つの処理が終わってからでないと次の処理ができませんが、非同期通信では待ちがなく処理を実行できます。
普通にWebページを切り替えて見ていくような場合、ページが1枚1枚変わっていけばいいので同期通信で十分です。
しかし、ページの中に地図が表示されている場合、その地図のズームや移動などをページを切り替えることなく行うには非同期通信でないと行えません。
以上のことを踏まえて、Ajax とは何ぞやと考えると、
「JavaScriptを用いて、XMLデータを非同期通信でやり取りすること」
と、なります。
つまり、何か処理を行いながらもバックでデータ通信を行えるデータの通信手段ということです。
尚、Ajax の定義では XML のやり取りとなっていますが、実際には text や JSON など他のデータ形式でも通信が行えます。
Ajax通信を何に使う？
私がAjaxを使いたいのは、クライアント側で指定したデータをサーバー上のデータベースから取り出したいということです。
そのデータのやり取りに、Ajax を使います。
以下、その方法を説明します。
使用する言語は、jQuery(JavaScript)と PHP です。
jQueryは、JavaScript でのプログラムを作りやすくするためのJavaScriptのサブルーチンと考えればいいでしょう。
jQueryもJavaScriptで作られているので、JavaScriptとの混在も可能です。
JavaScriptだけで作るよりも作りやすいのでjQueryを使うことになります。
当然、Webサイトを作りますので、HTML・CSSは必須です。
HTML・CSS・jQuery で作られたWebページは、クライアント側(ブラウザ)で動作するものですが、PHP で作られたコンテンツはサーバー側で動作します。
結局、jQueryとPHPの間での通信にAjaxを使うことになります。
Ajaxを試してみる
前提として XAMPP で作られた自分のパソコンにサーバーを作り、そのサーバーを使用することとします。
ホスト名は、localhost
localhost に対応したディレクトリ（フォルダ）にファイルを入れてテストします。
では、Ajax通信を具体的に行ってみましょう。
１つのデータを送り、計算結果を１つ返す
最低限のデータのやり取りを考えます。
Ajaxを動かすために必要な以下の２つのファイルを用意します。
ajax_test1.html
ajax_test1.php
クライアント側で動作させるhtmlファイルとサーバー側で動作させるPHPファイルです。
この２つのファイルをサーバーに入れ、
http://localhost/ajax_test1.html でリクエストします。
すると、ajax_test1.html の実行内容が表示されます。
「送信」ボタンを押すことで、設定してある 99 という値を ajax_test1.php に送ります。
ajax_test1.php は、その送られた 99 を受け取り、100 を足し合わせて、その結果を ajax_test1.html に返します。
そして、その結果 199 を表示するという流れとなります。
この内容は説明するまでもないでしょう。
↑の記事を参考にしてください。
ajax_test1.html を説明しておきます。
$.ajax({
type: "GET",
url: "ajax_test1.php",
data: { val: 99 },
dataType: "text"
}).done(function(data){
$("#result").text(data);
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
});
が、Ajax通信を行なう部分です。
表示された「送信」ボタンを押すと、
data: { val: 99 },
に書かれたハッシュ形式のデータが、ajax_test1.php に送られます。
type: “GET”,
はGET通信を使ってということになりますので、
http://localhost/ajax_test1.php?val=99 として、リクエストすることと同じです。
尚、ハッシュ形式とは、
{ Key : 値 ｝
という連想配列(オブジェクト)形式のデータ表現の仕方です。
上の処理の設定及び動作の説明しておきます。
type: “GET” 「type:」の右側にGET もしくは POST の通信方式を指定します。GET と POSTの説明はここでは省略しますが、どちらを指定しても通信はできます。
url: “ajax_test1.php” 「url:」の右側にどこと通信するか相手先のファイルを指定しています。
data: { val: 99 } 「data:」の右側に送るデータをハッシュ形式で書きます。
var param = { val: 99 };
と、一旦変数にデータを入れて、
data: param
というように、変数を介して送る内容を書いてもOKです。
dataType: “text” 「dataType:」の右側に相手先から戻されるデータ型を指定します。
データ型は、他に xml や json などがありますので、必要なデータ型を指定します。
この４つが、Ajaxを使う上においての最低限の設定でしょうか。
.done(・・・ では、相手先から返されるデータが 変数 data に入ってきますので、それをどう使うか処理を書きます。
ここでは、
$(“#result”).text(data);
で、「戻り値をここに表示します」と最初に表示されたメッセージをその data 内容と置き換えて表示するようにしています。
「戻り値をここに表示します」という表示が、計算結果の 199 に変わって表示されるわけです。
.fail(・・・ 部分には、通信失敗時の処理を書きます。
以上が１つのデータを渡して処理する Ajax通信の手法となります。
最後に
この記事では、最低限のAjaxでの通信処理方法を書きました。
私はAjaxどころか、JavaScriptやPHPも初心者なのでこの記事を書く上においていろいろ調べたのですが、大変ややこしく感じました。
どこが、ややこしいか。
まず、jQuery(JavaScript)、PHPと２つの違う言語を理解しなくてはいけないことです。
命令の方はいいのですが、データの表し方や、宣言の仕方などが異なるのでどちらがどちらか分からなくなってくるのです。
特に配列やオブジェクトの取扱いが大変で、XAMMPを用いて実際にうまく処理できるかテストするのが大変でした。
また、用語の使い方が様々で、例えば、
- 連想配列
- オブジェクト
- ハッシュ
の３つの用語が同じものであったりで、異なった用語で説明されると整理するのに苦労しました。
ここでは最低限のAjaxの使い方を書きましたが、実際にはもっと複雑なことになります。
記事を変えて、いろいろなデータの受け渡しなどを書いておきます。
コメント