Ajaxメモ
そろそろAjaxって奴を・・・調べてみよう。
javascriptからXMLドキュメントを操作する手順
基本の流れはこんな感じとのこと。
- XMLドキュメントをDOMで扱うためのオブジェクトを作る
- XMLドキュメントを読み込む
- DOMを使って各ノードにアクセスする
XMLドキュメントをDOMで扱うためのオブジェクトを作る
Javascript
- var xmlReader = new XMLHttpRequest(String);
例によってIEでは対応していないのでActiveXObject(string)で代用する。 verによってstringも変わる。
どうせライブラリを利用するしあまり気にしなくていいか・・・
XMLドキュメントを読み込む
送信の設定
Javascript
- xmlReader.open("get", "http://www.kantenna.com/app/index.xml", true);
第三引数にfalseを渡すと同期になる。同期の場合、 通信が終わるまで次の処理が行えない。よって大きいデータだったり レスポンスが返ってこなかった場合などハングアップしたようになるとのこと。
なので基本はtrue指定で非同期通信にする。
ってかopen()って名前なんでこの時点で送信してるかと思いきや実は設定だけで 通信はしていない。この設定を送るにはsend()を呼び出す。
Javascript
- xmlReader.send(null);
getの場合はnullの決め打ちでOK
イベントハンドリング
非同期通信の場合、XMLHttpRequest.readyStateに状況に応じた ステータスが格納される。ステータスが変化したときonreadystatechangeが発生するので readyState、status、statustextに応じた処理を行う場合、ここに記述する。
データ読み込み完了 AND リクエスト成功 時の処理
Javascript
- 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から扱える。
Javascript
- 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というフォーマットがおすすめされている。
参照サイト
- 改訂第5版 JavaScript ポケットリファレンス
- 作者:古籏 一浩 | 価格:￥ 2,499
| 投稿日 | 2009年7月 1日 13:01 |
|---|---|
| カテゴリ | JavaScript |
| タグ | Ajax | javascript |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1160 |
トラックバック(0)
コメント
カテゴリ
検索
Linuxを覚えると捗る
- 改訂 新Linux/UNIX入門
- 作者:林 晴比古 | 価格:￥ 3,990
- 入門bash 第3版
- 作者:Bill Rosenblatt | 価格:￥ 2,940
はじめてのCentOS5
- Vimテクニックバイブル ～作業効率をカイゼンする150の技
- 作者:Vimサポーターズ | 価格:￥ 3,129
- Linuxの教科書 改訂版 （マイコミムック） (MYCOMムック)
- 作者:小林 峰子 | 価格:￥ 1,890