第1回：Ajaxとは?
第2回：Aptana Jaxerのインストール
第3回：非同期通信のサンプル
第4回：ライブラリ(extjs)の使用
Aptana Studioを使って非同期通信のサンプルを作っていこうと思います。
今回作るサンプルは、
ボタンを押すと非同期でテキストファイルを読み込んでくるサンプルです。
まず、Aptana Studioでプロジェクトを作成します。
最初は
File→New→Projectを押します。
次に、
Aptana ProjectのDefault Web Projectを選択して「Next」を押します。
次に、
Project Name:にプロジェクトの名前を入力します。今回は「Sample」とします。そして、「Next」
次に、
Ajaxのライブラリを選択します。今回は何も使わないので、何も選択せず「Next」。
次に、
Jaxerのサポートも何も選択せず、「Next」。
次に、
「Finish」を押すとプロジェクトが作成されます。
非同期通信をしているソースコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>非同期通信</title>
<script type="text/javascript" >
var xmlHttp;
function loadFile(){
if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp = null;
}
}
xmlHttp.onreadystatechange = check;
xmlHttp.open("GET", "./file.txt", true);
xmlHttp.send(null);
}
function check(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var result=document.getElementById("div_id");
result.innerHTML=xmlHttp.responseText;
}
}
</script>
</head>
<body>
<h1>非同期通信</h1>
<div id="div_id"></div>
<input type="button" value="テキスト読み込み" onClick="loadFile()">
</body>
</html>
簡単に説明していきます。
10～19行目のif文について、非同期通信を行うためのオブジェクトを生成。
ブラウザごとで実装方法が異なります。
IE:var xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
FireFox,Opera:var xmlHttp = new XMLHttpRequest();
21行目の
xmlHttp.open(”GET”, “./file.txt”, true);
「open」はサーバに対するリクエストを作成します。
まず、引数について
1番目→「GET」なのか「POST」を指定します。
2番目→リクエストを送るURLを指定します。
3番目→同期通信か非同期通信かを指定します。
同期通信は、「false」。
非同期通信は、「true」。
省略した場合は「true」になり非同期通信になります。
※1番目と2番目は必須です。
22行目の
xmlHttp.send(null);
「send」はリクエストを実際にサーバへ送信します。
引数にサーバに送りたいデータを記述します。
POSTの場合は送りたいデータを指定。
GETの場合NULLを指定。
25行目の
xmlHttp.readyState == 4
「readyState」はリクエストの処理状態を取得するのに使用します。
0:初期化がされていない。(openメソッドが呼ばれていない)
1:リクエストの準備中。(openは呼び出されたがsendメソッドはまだ)
2:リクエストの送信中。(sendメソッドは実行されているが応答がまだない)
3:データの受信中。
4:データの受信完了。
25行目の
xmlHttp.status == 200
「status」は通信のエラーを検出。
200:OK →成功。
401:Unauthorized →認証を要求。
403:Forbidden →アクセス拒否。
404: Not Found →ファイルが見つからない。
500: Internal Server Error →サーバーエラー。
503: Service Unavailable →サーバーが利用不可。
27行目の
xmlHttp.responseText;
「responseText」は実際にサーバから応答があったデータを取得します。(データがテキスト形式の場合)
xml形式の場合はresponseXML。
実際にどうなるか実行します。
下のFirefoxかIEのタブを押して実行します。
「テキスト読み込み」のボタンを押します。
テキストを非同期で読み込んできて表示されます。
次回は、サンプルを掲載します。