2013/07/19

Ajaxを使ってwebサイトの性能をアップさせよう!

Ajaxを導入してwebサイトの性能をアップさせよう!

webサイトやwebアプリにAjax(Asynchronous JavaScript + XML(非同期JavaScript + XML))を導入することでいろいろな機能を実現させる事ができます。
Ajaxがどういう技術なのか、何ができるのか、どう使えばいいのかなどをわかりやすく説明します。

目次

Ajaxとは

AjaxとはjavascriptPHPを組み合わせたで技術で、まったく新しいものではありません。

どういう技術かというと、ブラウザの画面を更新することなくjavascriptを使ってサーバーにデータを送り、 そのデータをサーバーのPHPのプログラムが受け取って処理をして、それをまたjavascriptに返し、変更する個所だけ画面を書き換えるという技術です。

PHPのプログラムがサーバーで行う処理とはMySQLを使って、受け取ったデータとデータベースを比較、参照する処理が主です。

Ajax通信イメージ

Ajaxで何ができるか

有名な所だとグーグルの検索フォームに文字を入力しただけで検索ボタンを押さなくても候補が表示される機能がそうです。

google検索画像

画面移行を行わずに必要な個所だけ裏で書き換えていますので、待たされる感覚がありません。

他にはチャットのように、一定時間ごとにサーバーにアクセスして新しい情報があった時に画面の一部を書き換える、という事もできます。

アイディア次第でいろいろな使い方ができます。

Ajaxの使い方

Ajaxを使った、新着メールがサーバーに届いていたらお知らせするシステム(ajaxtest関数)のソースです。

htmlヘッダー内に次のように記述します。

<script language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
setInterval("ajaxtest()",10000);
function ajaxtest(){
	$.post("syori.php" , {'lastRefresh' : lastRefreshTime} , function(ReturnData){
		if(ReturnData == 1){
			document.images["refresh"].src = "img/go_refresh.jpg";
		}
	});
}
</script>

ここで行っている処理を解説します。

3行目 setIntervalで10秒ごとにajaxtest()の関数を実行します。
4行目 今回実行される関数 ajaxtest()
5行目 $.post関数でPHPプログラムsyori.phpに最終更新時間の値(lastRefreshTime)を格納した$_POST["lastRefresh"] を渡します。
6行目 その返り値が1なら7行目の処理を行います。
7行目 新着メールありの画像を表示する。

5行目の$.post()がAjaxの関数です。

サーバー側でのPHPの処理の例(syori.php)

<?php 
///////////////////// 設定ファイルの読み込み //////////////////////////////////////////////// 
include_once("config.php");

///////////////////// データベースへ接続 //////////////////////////////////////////////// 
$link = mysql_connect($my_sql_server , $my_sql_username , $my_sql_password); 
mysql_select_db($my_sql_database); 

//////////////// 最終更新時刻以降に届いたメールがないか調べる //////////////////////////// 
$koshinflag = 0;
$resource = mysql_query("SELECT datetime FROM maildata WHERE datetime > ¥"{$_POST['lastRefresh']}¥"");
$resource_data = mysql_fetch_row($resource);
if(resource_data[0] != "" ){
	$koshinflag = 1;
}

mysql_close($link);
echo $koshinflag;
?>

今回syori.phpで行っている処理は

3行目 設定ファイルを読み込む
6,7行目 受信メールのデータが入っているデータベースへ接続。
11行目 最終更新時刻以降に届いたメールを検索する
12行目 MySQLから受け取ったデータを処理できる形に変換
13,14行目 もし最終更新時刻以降に届いたメールのデータが存在すればフラグを立てる
18行目 フラグの情報を返す

新着メールが届いた時にお知らせ画像が表示されます。

Ajaxを使っているサイト

松本クリニック (http://m-clinic.net/)
メインメニューをクリックするとページ移行せずにコンテンツが書き換わります。

松本クリニックのサイトイメージ

Rockbird (http://www.rockbird.jp/index.html)
上と同じくメインメニューにAjaxが使われています。

Rockbirdのサイトイメージ

Ajax を使った手書き文字認識 (http://chasen.org/~taku/software/ajax/hwr/)
認識した入力パターンをユーザーに確認してもらい正解を教えてもらって学習するそうです。

Ajax を使った手書き文字認識のサイトイメージ

googleマップ (http://maps.google.co.jp/)
今更ですがAjaxという名を一躍有名にしてくれました。

googleマップのサイトイメージ

まとめ

新しい技術のように見えても内容を深く理解すると、既存の技術を組み合わせただけの仕組みという事はよくあります。
基本的な部分をしっかりと理解する事で内部の処理も想像できるようになると思います。