Hatena::ブログ(Diary)

ルパンの愉快な仲間たち・改 このページをアンテナに追加 RSSフィード

2005-10-14 JavaScript, XML, DOM, AJax

えいじゃああああああっくす

[][]JavaScriptXMLを扱う

現在、XMLをJavaScriptで扱う方法を調査中・・・

以下、外部リンク

-----------------

DOMとJavaScript: XMLドキュメントを読み込む

XMLファイルを読み込んで、最初のノードを表示する。


DOMとJavaScript: 子ノードを調べる、他

XMLファイルを読み込んで、子ノードを調べる方法。


no title

no title

ブラウザ別XMLファイルの読み込み方法(詳細)、ライブラリ公開。


XML −DOMとは−

チラスのウラ: JavaScriptのDOMパーザー

-----------------

当面の目標

  1. WebアプリケーションのFormの要素にXMLを格納させ、そのXMLをJavaScriptに読み込ませる
  2. DOMバーザーを使ってXMLをテーブル表示にする。
  3. JavaScriptでの要素の追加を行い、テーブルに反映させる。
  4. 追加されたXMLをFormに格納してサーバーに返す。

XMLファイルを読み込ませる方法はいくらでもあるんだけど、

ファイルではなく、XMLで記述された文字列をJavaScriptでDOMを使って解析する

っていうのがなかなか見つからない・・・

Formからではなく、AJaxを使えば簡単にできそうだ。

いや、AJaxの解析から入ったほうがいいかな。

AJaxで使われているXMLHTTPRequestは、

  1. HTTPリクエストを発行してリソースを取得する
  2. 取得したりソースをXMLとして解析し、DOMツリーを構築する

つまり、いちいちFormに値としてXMLを格納し、それを解析する手法を探すよりは、

すでにAJaxで使われているXMLHTTPRequestを使ったほうが賢いんじゃないかと。

その場合の目標は以下に変更される。

  1. AJaxを使ってサーバーからXMLを取得する(サーバーサイドはすでに技術はある)
  2. DOMツリーを使ってテーブルを表示
  3. JavaScriptでの要素の追加を行い、テーブルに反映させる。
  4. 追加されたXMLをサーバーに返す。(もしくはFormに格納しちゃえ)

[]サンプルソース

作ってみました。

サーバーサイドは、StrutsでActionが実行されると、規定のXMLを書き出す.

JSP側は出力させるだけ。

<div id="ajax" align="center"></div>

サーバーから帰ってくるXMLはこんな感じ

<?xml version="1.0" encoding="EUC-JP"?>
  <root>
    <item>
      <name>ぜにがた</name>
      <no>1</no>
    </item>
  </root>

で。問題のJavaScript

function load(action) {
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  if (xmlhttp) {
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      
      // ↓ここからXMLの要素の取り出し
        
        // 受信したXMLの内容をテキスト表示,
        ajax1.innerHTML = xmlhttp.responseText;
        
        // JavaScript DOM 関数で扱える XMLDocument オブジェクトにする.
        var xmldoc = xmlhttp.responseXML;
        
        // 上手くいかない・・・!なぜだ!
        ajax2.innerHTML = xmlhttp.responseXML.documentElement.tagName;
        
        handlerFunc(xmldoc);
      }
    }
    xmlhttp.open('GET', action);
    xmlhttp.send(null);
  }
}

function handlerFunc(xmldoc) {
    var root = xmldoc.documentElement;
    if (root != null) {
      var items = root.childNodes;
      
    } else {
      // ルートエレメントが存在しない, 必ずここを通る・・・
      ajax.innerHTML = "root element is none ";
    }
}

ということ。

responseXML.documentElementで取り出した値が必ずNULLになってしまうのが問題。

うーむ、なぞい。

DOMとはなんぞや!

--------

[]responseXML.documentElementがnullになる状態について

IEのみの現象とのこと

responseXMLの制限を参照

結局サーバーサイドで作成しているヘッダの情報が間違っていたのが原因・・・!

そりゃないよぉじげ〜〜〜ん