WEBプログラム覚書::Ajaxメモ

2009年07月01日 13:01

Ajaxメモ

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/469

そろそろAjaxって奴を・・・調べてみよう。

javascriptからXMLドキュメントを操作する手順

基本の流れはこんな感じとのこと。

XMLドキュメントをDOMで扱うためのオブジェクトを作る
XMLドキュメントを読み込む
DOMを使って各ノードにアクセスする

XMLドキュメントをDOMで扱うためのオブジェクトを作る


var xmlReader = new XMLHttpRequest(String);

例によってIEでは対応していないのでActiveXObject(string)で代用する。 verによってstringも変わる。

どうせライブラリを利用するしあまり気にしなくていいか・・・

XMLドキュメントを読み込む

送信の設定


xmlReader.open("get", "http://www.kantenna.com/app/index.xml", true);

第三引数にfalseを渡すと同期になる。同期の場合、通信が終わるまで次の処理が行えない。よって大きいデータだったりレスポンスが返ってこなかった場合などハングアップしたようになるとのこと。

なので基本はtrue指定で非同期通信にする。

ってかopen()って名前なんでこの時点で送信してるかと思いきや実は設定だけで通信はしていない。この設定を送るにはsend()を呼び出す。


xmlReader.send(null);

getの場合はnullの決め打ちでOK

イベントハンドリング

非同期通信の場合、XMLHttpRequest.readyStateに状況に応じたステータスが格納される。ステータスが変化したときonreadystatechangeが発生するので readyState、status、statustextに応じた処理を行う場合、ここに記述する。

データ読み込み完了 AND リクエスト成功時の処理


xmlReader.onreadystatechange = function(){
    if (xmlReader.readyState == 4 && xmlReader.status == 200) {
        // ここにデータ読み込み完了 AND リクエスト成功 時の処理を記述
    }
}

readyState

0	open()が呼ばれていない。
1	open()は呼ばれたがsend()されてない
2	HTTPレスポンスを受け取った
3	データの一部の読み込みができている
4	全てのデータの読み込みが完了している

status、statusText

通信した際にサーバから返されるHTTPレスポンスコードと文字が入る

status	statusText	意味
200	OK	リクエスト成功
401	unauthorized	認証エラー
404	Not Found	対象データがない
500	Internal Server Error	サーバエラー

データの取り出し

無事リクエストが完了した場合、データはresponseText、responseXMLに格納される。サーバレスポンスがtext/xmlの場合、responseXMLから扱える。


xmlReader.onreadystatechange = function(){
    if (xmlReader.readyState == 4 && xmlReader.status == 200) {
        var xml = xmlReader.responseXML;
        var items = xml.getElementsByTagName("item");
        document.getElementById("AjaxTest").onclick = function() {
            alert(items[0].childNodes[1].textContent);
        }
    }
}

resposeXMLはNodeを継承したDocumentオブジェクトなのでツリーを辿ったり追加できたりする。

が、今のところ色々と問題あるようなのでXMLでの取得はおすすめされてない感じ。 JSONというフォーマットがおすすめされている。