Ajaxメモ

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

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

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

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

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

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

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

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

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

送信の設定
Javascript
  1.  xmlReader.open("get", "http://www.kantenna.com/app/index.xml", true);

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

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

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

Javascript
  1.  xmlReader.send(null);

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.  }
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.  }

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

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

改訂第5版 JavaScript ポケットリファレンス
作者:古籏 一浩 | 価格:¥ 2,499

トラックバック(0)

コメント

コメントする
Name
Email Address
URL
TIME LINE
2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24
2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

2012
01.21

[PHP]共有サーバーユーザーのためのPEARインストール方法

共有サーバーでは自由にPEARのパッケージがインストールできないので、 プロジェクトローカルに設置することになりますが、以前httpベースのものを使ってみたんですけど、 やたら重くて使い物にならなかったので、僕は普通にFTPでアップするようにしてます。

ってことでプロジェクトローカルへのPEARのインストール方法。