NetBeans 7でのRESTful Webサービス向けAjaxクライアントの開発： パート3

RESTful Webサービスの作成に使用するPlayerServerアプリケーションが実行中であることを確認します。 実行中でない場合はサーバーを起動し、次の手順を実行します。

a. 「Projects」タブを開きます。

b. 「PlayerServer」プロジェクトを右クリックします。

c. 「Run」を選択します。

これによってGlassFishサーバーが起動され、アプリケーションがデプロイされます。

アプリケーションのデプロイが成功すると、ブラウザにデフォルトのjspページ（URL：http://localhost:8080/PlayerServer/）が開かれ、"Hello World"と表示されます。

HTMLファイルを作成するには、「PlayerServer」プロジェクトを右クリックし、「File」→「New」→「HTML...」を選択します。

以下の手順を実行します。

a. 以下の詳細情報を入力します。

File Name：AjaxRestClient

Folder：フォルダ名を入力する必要はありません。 HTMLファイルはデフォルトでWeb Pagesフォルダの下に作成されます。

b. 「Finish」をクリックします。

コード・エディタにAjaxRestClient.htmlが表示されます。

AjaxRestClient.htmlのbodyセクションに以下のコードを追加します。

<table>
<tr>
<td>Enter Player ID : </td>
<td><input type="text" id="playerid" size="10"/>

<input type="button" value="Get Details" onclick="getMessage()"/>
</tr>
<tr>
<td>Player Last Name : </td>
<td> <input type="text" id="lastname" size="10"/> </td>
</tr>

<tr>
<td>Player First Name : </td>
<td> <input type="text" id="firstname" size="10"/> </td>
</tr>

<tr>
<td>Player Jersey Number : </td>
<td> <input type="text" id="jerseynumber" size="10"/> </td>
</tr>

</table>

このコードによって必要なUIが作成されます。

「AjaxRestClient.html」を右クリックして、「Run File」を選択します。

ブラウザに表示された出力内容を確認します。

Ajaxリクエストを作成するために、AjaxRestClient.htmlページのheadセクションに以下のコードを追加します。

<script language="javascript" type="text/javascript">
var request = null;

function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("MsXML2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null)
alert("Error creating request object!");
}
</script>

createRequest()メソッドは、リクエスト・オブジェクトを作成するために使用します。 リクエスト・オブジェクトは、Internet Explorerの場合はActiveObject、その他のブラウザの場合はXMLHttpRequestとなります。

AjaxRestClient.htmlページにgetMessage()メソッドを追加します。

function getMessage()
{
createRequest();
var playerid = document.getElementById("playerid").value;
id=eval(playerid);
var url = "http://localhost:8080/PlayerServer/resources/com.playerentity.player/"+id;
request.onreadystatechange = handleResponse;
request.open("GET", url, true);
request.send(null);
}

このメソッドでは、以下の処理を実行します。

• createRequest()メソッドを呼び出して、サーバーに対する非同期リクエストを開始します。
• ユーザーによって入力されたプレーヤーIDを取得します。
• RESTful Webサービスを起動するためのURLはhttp://localhost:8080/PlayerServer/resources/com.playerentity.player/であり、ユーザーによって入力されたプレーヤーIDをこのURLに追加して、その特定のプレーヤーの詳細情報を取得します。

AjaxRestClient.htmlページにhandleResponse()メソッドを追加します。

function handleResponse() {
if (request.readyState==4 && request.status==200)
{
var xmlDocument=request.responseXML;
var fnames = xmlDocument.getElementsByTagName("firstname");
var lnames = xmlDocument.getElementsByTagName("lastname");
var jerseynos = xmlDocument.getElementsByTagName("jerseynumber");

for(var i=0; i<fnames.length; i++) {
var fname = fnames[i].childNodes[0].nodeValue;
var lname = lnames[i].childNodes[0].nodeValue;
var jerseyno= jerseynos[i].childNodes[0].nodeValue;
document.getElementById('lastname').value=fname;
document.getElementById('firstname').value=lname;
document.getElementById('jerseynumber').value=jerseyno;
}
}

}

このメソッドは、サーバーからのレスポンスを処理するために呼び出されます。 handleResponse()メソッドはXML文書を解析し、取得した値をHTMLのテキスト・ボックスに割り当てます。

「AjaxRestClient.html」を右クリックして、「Run File」を選択します。

出力内容を確認します。 以下の手順を実行します。

a. プレーヤーIDとして3を入力します。

b. 「GetDetails」をクリックします。

このボタンのイベント・ハンドリング中に、getMessage()メソッドが呼び出され、このメソッドが前述のとおりAJAXリクエストを開始します。

プレーヤーID 3のプレーヤーの詳細情報が取得され、HTMLページに表示されます。

XMLレスポンスを確認します。 以下の手順を実行します。

a. ブラウザにhttp://localhost:8080/PlayerServer/resources/com.playerentity.player/3というURLを入力します。

b. プレーヤーID 3のプレーヤーの詳細情報が、ブラウザにXML形式で表示されます。

以下の手順を実行します。

a. 「PlayerServer」プロジェクトを選択し、「RESTful Web Services」フォルダを展開します。

b. 「PlayerFacadeREST[com.playerentity.player]」を右クリックし、「open」を選択します。

コード・エディタにPlayerFacadeREST.javaが表示されます。

@GETアノテーションを確認します。このアノテーションは、任意のMIMEタイプでHTTP GETリクエストをリソースに送信するときに呼び出されます。 このメソッドにより、XML形式とJSON形式の両方のレスポンスが生成されます。 ただし、ここではJSON形式のレスポンスのみを必要としているため、@producesアノテーションを修正する必要があります。

@producesアノテーションの"application/xml"文字列を削除します。この修正により、このメソッドでHTTP GETリクエストに対してJSON形式のレスポンスを生成することを示します。

projectsペインで「PlayerServer」プロジェクトを選択します。 次に右クリックして、「Clean and Build」を選択します。

右クリックして「PlayerServer」プロジェクトを選択し、「Deploy」を選択します。

以下の手順を実行します。

a. projectsペインで「PlayerServer」プロジェクトを選択します。

b. 右クリックして「open」を選択します。コード・エディタにAjaxRestClient.htmlが表示されます。

JSONレスポンスを処理するようにhandleResponse()メソッドを修正します。

function handleResponse() {
if (request.readyState==4 && request.status==200)
{
var det=eval("("+request.responseText+")");
document.getElementById('lastname').value=det.firstname;
document.getElementById('firstname').value=det.lastname;
document.getElementById('jerseynumber').value=det.jerseynumber;

}
}

「AjaxRestClient.html」を右クリックして、「Run File」を選択します。

出力内容を確認します。 以下の手順を実行します。

a. プレーヤーIDとして3を入力します。

b. 「GetDetails」をクリックします。

プレーヤーID 3のプレーヤーの詳細情報が取得され、HTMLページに表示されます。

.

JSONレスポンスを確認します。 以下の手順を実行します。

a. ブラウザにhttp://localhost:8080/PlayerServer/resources/com.playerentity.player/3というURLを入力します。

b. レスポンスをダウンロードして保存します（現時点ではブラウザしか使用していないため、リクエストを開始したクライアントはありません）。

c. レスポンスをメモ帳で開きます。プレーヤーID '3'のプレーヤーの詳細情報がJSON形式で返されています。