サービスを作成する
これまでの説明からも分かるように、Jaxerの最大の特徴は「1つのHTMLファイルで、サーバー側とクライアント側の両方の処理を記述できる」という点です。サーバー側に新たなプログラムを用意する必要はなく、ただページに表示するための1つのHTMLだけ用意すれば、その中にサーバー側の処理も記述することができます。
ただし、この簡便さは、「他のファイルからのアクセスを難しくする」ということにもつながります。多くのWebサイトでは、どのページからでも自由にアクセスし利用できる形でサーバーサイドのプログラムを作成しています。常にクライアントとサーバーの処理を1つのファイルに用意し、他からアクセスできないとなると、行えることが制約されてしまうでしょう。
Jaxerでは、不特定多数のページから自由にアクセスし呼び出せるようなプログラムは作れないのでしょうか。――いいえ、もちろん作ることができます。こうした処理は、「サービス」として作成するようになっています。
サービスは、「jaxer-service」というフォルダの中に用意されます。「public」フォルダの中に「jaxer-service」というフォルダを作成してください。そしてこの中に「service_sample.js」という名前でファイルを作成しましょう。このフォルダ内に作成されたスクリプトファイル（.js拡張子のファイル）は、拡張子を覗いた名前で呼び出せるようになります。例えば、「service_sample.js」であれば、「service_sample」という名前のサービスとして利用することができます。では、ソースコードを作成しましょう。以下のソースコードを、UTF-8の文字コードのテキストファイルとして作成してください。
var data = [
"サーバー側のデータです。",
"2番目のデータです。",
"最後のデータです。"
];
var id = Jaxer.request.data['id'];
var result = "";
if (id != null){ result = data[id]; }
Jaxer.response.headers['Content-Type'] = 'text/plain';
Jaxer.response.setContents(result);
ここでは、クライアントから送られてきたパラメータの値をもとに、配列から特定のテキストを取り出して出力する、といった処理を行っています。クライアントから送られてきたパラメータは、Jaxer.request.dataに保管されています。これは連想配列になっており、パラメータ名を指定することで値を取り出すことができます。
データの出力は、ここではテキストデータとして送信をしています。データの形式は、Jaxer.response.headers['Content-Type']で設定することができます。これは、Content-Typeヘッダーの値を設定するものと考えればよいでしょう。出力する内容は、Jaxer.response.setContentsというメソッドでコンテンツを設定します。これにより、設定されたテキストがそのまま出力されるようになります。
AjaxでJaxerサーバーにアクセスする
では、作成したサービスに、一般的なAjaxの非同期通信を使ってアクセスし、データを取得してみましょう。先ほどpublic内に作成したindex.htmlを、以下のように修正してみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" runat="client">
<!--
function doAjax(){
// XMLHttpRequestオブジェクトの取得
var httplist = [
function(){ return new XMLHttpRequest(); },
function(){ return new ActiveXObject("Msxml2.XMLHTTP"); },
function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }
];
var http = null;
for(key in httplist){
try {
var obj = httplist[key]();
if (obj != null){
http = obj;
break;
}
} catch(e){ continue; }
}
if (http == null){
alert("HTTP通信ができませんでした。");
return;
}
// Ajax通信の準備
var id = document.getElementById("input").value;
http.open("GET","./jaxer-service/service_sample?id=" + id,true);
http.setRequestHeader("User-Agent","XMLHttpRequest");
http.onreadystatechange = function(){
if (http.readyState == 4 && http.status == 200){
callbackFunc(http.responseText);
}
}
http.send();
}
// コールバック関数
function callbackFunc(result){
var obj = document.getElementById("msg");
obj.innerHTML = result;
}
//-->
</script>
</head>
<body>
<h3>Jaxer Sample</h3>
<div id="msg">initialize...</div>
<div>ID:<input type="text" id="input"></div>
<input type="button" onclick="doAjax();" value="実行">
</body>
</html>
ここでは、入力フィールドに書かれたID番号を使い、「./jaxer-service/service_sample?id=番号」といった形でサービスにアクセスをしています。コールバック関数では、responseTextのテキストをそのまま表示させています。入力フィールドに0～2の整数を記入して実行し、動作を確かめてみましょう。publicフォルダ下以外のところにファイルを配置しサービスにアクセスさせる場合は、サービスのアドレス（フォルダの階層）をきちんとあわせるよう注意してください。
