TakzWeb:Ajax

Ajax

AjaxとはAsynchronous JavaScript + XMLの略で、JavaScriptの非同期通信を使いXML?やテキスト形式のデータをサーバとWebブラウザ?間でやり取りを行い、ページを動的に描画する技術。DynamicHTML（JavaScript+CSS）+XML?と言った所でしょうか。

Ajaxの使用 §

有名なところでGoogle Map(というか言いだしっぺはGoogle)

これがきっかけでAjaxが有名になった。従来のWebアプリのようにページ全体を読み込み再描画する事無く、一部の描き変えのみでサーバーの負荷も比較的に軽い

また、JavaAppletやFlashのようなプラグインを一切使用せずWebブラウザ?組み込みの技術だけで出来る。

しかしJavaScriptは各Webブラウザ?により実装が異なっている為個別にスクリプトを書かなくてはならない、リロードをするとデータが消えてしまう等のデメリットも存在する。

実装してみる §

当サイトはPHPで構成している。ページの描画はDBから各ページのデータを読み出してテンプレートのHTMLを置換して出力している。アクセスが多ければ少し負荷が掛かるだろう。（中身の無いページだからアクセスは少ないですが。。。）

ま、しょぼいサイトだが技術自体に興味は在るので実装を試みる。

具体的にどうするか §

AjaxはJavaScriptの組み込みクラスXMLHttpRequestで取得したデータを主に使いページの動的描画する事が肝のようだ。

XMLHttpRequestでXML?オブジェクトを作成してデータをinnerHTMLで書き出すのが簡単のよだ。

しかしXMLHttpRequestはWebブラウザ?のシェア90%を誇るInternet Explorer（以下IE）では実装されていない。そこでIE独自仕様のActiveXObject("Microsoft.XMLHTTP")を使用する。

XML用オブジェクト §

先ずはオブジェクトを作成する。関数にしてしまった方が便利。

_{Code:JavaScript}

function XMLRequest(){
 if(this.XMLHttpRequest){ 
  return new XMLHttpRequest() 
 }else {
  return new ActiveXObject("Microsoft.XMLHTTP");
 }
}

ちょっとお粗末？XMLHttpRequestが使用できないものはActiveXObject("Microsoft.XMLHTTP")でオブジェクトを作成する。

XMLを読み込む §

_{Code:JavaScript}

var url = 'URL'
var obj = XMLRequest();
obj.open( "GET" , url , true )
obj.onreadystatechange = function(){
 if (obj.readyState == 4){ 
 req=obj.responseXML;
 //reqオブジェクトを使いここで書き換え処理などする
 }
}
obj.send( null )

URLはXML?データのURLにする。openでXML?を読み込み、オブジェクトがreadyState == 4（準備完了）ならresponseXMLを使いXMLDocumentオブジェクトとして返す。

PHPからXML（ページ用）を吐き出す §

PHPから取得するようにする

_Code:PHP

header("Content-type: text/xml");
echo <<<HERE
<?xml version="1.0" encoding="UTF-8" ?>
<xml>
 <title>[CDATA[$title]]</title>
 <navi>[CDATA[$navi]]</navi>
 <main>[CDATA[$main]]</main>
</xml>
HERE;

$titleはページのタイトル。$naviは記事のContents。$mainは記事。

各データはタグが含まれるためCDATAにする。

DOM要素にアクセス §

要素が単一なので

_{Code:JavaScript}

DomNode=req.getElementsByTagName(タグ名)[0].firstChild.nodeValue;

でアクセスする。書き換えはinnerHTMLで行なう。

_{Code:JavaScript}

document.getElementById(ID).innerHTML=DomNode;

ここに書いてある内容は前スクリプト時の内容のため現在は使用してません。