HOME>WEBプログラム覚書>Ajaxメモ

Ajaxメモ

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

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

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

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

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

Javascript

  1. var xmlReader = new XMLHttpRequest(String);
  2.  

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

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

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

送信の設定

Javascript

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

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

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

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

Javascript

  1. xmlReader.send(null);
  2.  

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

イベントハンドリング

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

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

Javascript

  1. xmlReader.onreadystatechange = function(){
  2.     if (xmlReader.readyState == 4 && xmlReader.status == 200) {
  3.         // ここにデータ読み込み完了 AND リクエスト成功 時の処理を記述
  4.     }
  5. }
  6.  
readyState
0open()が呼ばれていない。
1open()は呼ばれたがsend()されてない
2HTTPレスポンスを受け取った
3データの一部の読み込みができている
4全てのデータの読み込みが完了している
status、statusText

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

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

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

Javascript

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

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

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

投稿日 2009年7月 1日 13:01
カテゴリ JavaScript
タグ Ajax | 基礎
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1160

コメント

コメントする
Name
Email Address
URL