|
2. AjaxとSVGの組み合わせ12006.04.18 株式会社四次元データ 藤本将光 Ajax の解説資料はすでに多いので、ここでは、SVG（Scalable Vector Graphics）とAjaxを組み合わせて利用する方法を紹介しましょう。SVGはXML文書であり、JavascriptやDOMと組み合わせることによって、動的な表現が可能であることから、XML形式のデータをJavaScriptで処理しているAjaxと組み合わせることが可能です。 2.1. サンプル1まず、実際のサンプルを見てみましょう。 まず、赤色の正方形の上にマウスを乗せ、その後に、青色の正方形の上にマウスを乗せてみてください。 テキストエリア内に「4DD company」の文字が入力されます。 この例では、SVG内の赤い四角形にマウスが乗っているときに、非同期通信で添付したテキストファイルからデータを取得し、青い四角形にマウスが乗ったときに、テキストエリアにデータを表示させています。 では、サンプルのソースを見てみましょう。 2.2. サンプル1のソースこのサンプルでは、SVGファイルは単独の文書として作成し、作成したファイルをembedタグを利用してhtmlファイルに組み込んでいます。 以下に、サンプルのhtmlファイル、SVGファイルのソースを示します。 2.2.1. htmlファイルのソース<head>
<script language="JavaScript">
<!--
// XMLHttpRequestオブジェクト生成
function createHttpRequest()
{
if(window.ActiveXObject){
//Win e4,e5,e6用
try {
return new ActiveXObject("Msxml2.XMLHTTP") ;
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null ;
}
}
} else if(window.XMLHttpRequest){
//Win Mac Linux m1,f1,o8 Mac s1 Linux k3用
return new XMLHttpRequest() ;
} else {
return null ;
}
}
function getData(pageURL) ・・・（1）データ送受信時の関数
{
oj = createHttpRequest();
if (oj)
{
oj.onreadystatechange = setPageData;
oj.open('GET', pageURL,true);
oj.send(null);
}else{
alert("XMLHttpRequest失敗");
}
}
var restext;
function setPageData()
{
if (oj.readyState == 4 )
{
restext = oj.responseText;
}
}
function writeText() ・・・（2）受信データのテキストエリアへの入力の設定
{
document.myArea.result.value += restext+"\n";
}
//-->
</script>
</head>
<embed src="sample2.svg" height="300" width="500" name="theSVG"><br> ・・・（3）SVGファイルの組み込み
<form name="myArea">
<textarea rows="10" cols="30" type="text" name="result" ></textarea>
</form>
2.2.2. SVGファイルのソース<svg xml:space="preserve" width="600" height="300" >
<rect id="bg" x="0" y="0" width="3000" height="2500" fill="yellow"/>
<rect id="rect" x="100" y="150" width="50" height="50" fill="red"
onmouseover="getData('test.txt')"/> ・・・（4）
<rect id="rect1" x="300" y="150" width="50" height="50" fill="blue"
onmouseover="writeText()"/> ・・・（5）
<text x="50" y="50" id="mytext" style="visbility: visible; fill: black; font-family: Serif;
font-size: 24">4DD</text>
<text x="250" y="50" id="mytext1" style="visibility: visible; fill: black; font-family: Serif;
font-size: 24">4DD Company</text>
</svg>
このサンプルは、データの送受信の部分（script内部の部分）は、1章で示した「簡単なサンプル」と同じです。 （1）において、非同期通信におけるデータ送受信時のの関数の設定、（2）において、受信したテキストデータをテキストエリアに表示させる関数を記述しています。 これらの関数をSVGファイル内に記述することによって、SVG画像を介した非同期通信を行っています。 SVGファイル内では、（4）において、赤い四角形上にマウスが乗っているときに、（1）で記述した非同期通信によって、データの送受信を行う関数をイベントとして与えています。
|
|
