• ベストアンサー

AjaxでXMLの要素が取得できない

いつもお世話になっております。 Ajaxを勉強しているのですが、prototype.jsを使用し、XMLを読み込んで データを表示させることができず困っております。 ソースは以下の通りです。 logdate.xml <?xml version="1.0" encoding="UTF-8"?> <namelists> <namelist> <name>山田</name> <ten>50</ten> </namelist> <namelist> <name>鈴木</name> <ten>48</ten> </namelist> </namelists> hoge.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Solutoire.com Plotr &rsaquo; LineChart Example</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script src="./lib/prototype/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function getFile() { new Ajax.Request("logdate.xml", { method: "get", onComplete: displayData }); } function displayData(httpObj) { var XML = httpObj.responseXML; var itemsTag = XML.getElementsByTagName("namelists"); $("result").innerHTML = itemsTag.length; } // --></script> </head> <body> <a HREF="logdate.xml">a</a> <form> <input type="button" value="読み込み" onClick="getFile()"> </form> <div id="result"></div> </body> </html> 結果は0となってしまいます。 ネットで調べたりしましたが、原因がつかめません。 どのようにしたらよいのでしょうか？どなたか教えてください。 宜しくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • susie-t
  • ベストアンサー率86% (37/43)
回答No.2

IEはレスポンスヘッダーのContent-Typeが「text/xml」でないとだめみたいです。つまり、ローカルでは試しようがないということです。(参考URL一番最後。同じことを言っているだけですが＾＾；) FireFoxの場合にサーバ経由で取得できないのはちょっと分からないですね。。。もしかしたら.xmlの場合のContent-Typeが「text/xml」じゃなくなっているとかかもしれません。

参考URL：
http://kamakura.cool.ne.jp/oppama/misc/javascript-shoot.html
hisajiro
質問者

お礼

回答ありがとうございます。 text/xmlに直し、テストサーバーに上げた所できました。 ちなみにテストサーバーで http://IP/の場合は先ほどと同じ結果でしたが、 http://サーバー名/の場合で成功でした。 本当にありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.1

おかしいですね。 質問内容のものをこちらで環境を作って再現すると 1 と表示されますよ。 同じくTagNameを、namelists => namelist へ変更すると期待通り、2 と表示されます。 ファイルパスやlogdate.xmlの文字コード、改行等をもう一度確認してみて下さい。

hisajiro
質問者

お礼

Content-Typeをtext/xmlに変更し、テストサーバーで行ったところ期待通りの結果が得られました。 ありがとうございました。

hisajiro
質問者

補足

回答ありがとうございます。 再度確認し実行してみました所、 htmlファイルをFirefoxにドラッグして実行すると期待通りの動作となるのですが、 IEの場合ですと０のままになってしまいます。 Firefoxでもtomcatを起動し、http://localhost:8080/で実行するとやはり結果は０になってしまいます。 responseTextですとデータの取得ができております。 この違いは何なのでしょうか？ ちなみにweb上に転がっているサンプルをDLして実行してもXMLの情報を取得できたためしがございません。 宜しくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ajaxでエラー処理

    お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。 そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか？ よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function ajax(fName) { var filename = fName + "?cache="+(new Date()).getTime(); new Ajax.Request(filename, { method: "get", onSuccess: displayData, onFailure: displayError }); } function displayData(httpObj) { $("result").innerHTML = httpObj.responseText; } function displayError(httpObj) { $("errMsg").innerHTML = httpObj.responseText; } // --> </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>

  • 【Ajax】SHIFT-JISの文字化け　

    AjaxのSHIFT-JIS文字化けで悩んでいます。 下記コードです。※prototype.js使用※ <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <title>Sample</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadHTMLFile(fName) { new Ajax.Request(fName, { method: "get", onComplete: displayData }); } function displayData(httpObj){ alert(httpObj); $("result").innerHTML =httpObj.responseText; } // --></script> </head> <body> <h1>サーバー上のHTMLファイルを読み込む</h1> <form> <input type="button" value="●●.htmlファイルを読み込み" onClick="loadHTMLFile('●●.html')"> </form> <div id="result"></div> </body> </html> ●●.htmlおよび、このコードを記述しているファイルのエンコードは "SHIFT-JIS"です。 ●●.htmlのエンコードを"UTF-8"にするとうまく表示できます。 "SHIFT-JIS"同士のやり取りの方法を教えて頂きたく思います。 宜しくお願い致します。 ※サーバはwindow用XAMPを自分のローカルに使用しています。 　アパッチの設定はいじっていません。

  • Ajaxが機能しない

    IE6.02を使っています。 次のようにAjaxのテストをしようとしたのですが、 「data.txt」に入っている文字(aaa)が表示されませんでした。 スクリプトのエラーも出てないようなのですが、なにが原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>XMLHttpRequest()の基本(Win IEの場合)</title> <script type="text/javascript"><!-- function loadTextFile() { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); httpObj.onreadystatechange = statusCheck; httpObj.open("GET","data.txt",true); httpObj.send(null); } function statusCheck() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { displayData(); } } function displayData() { document.ajaxForm.result.value = httpObj.responseText; } // --></script> </head> <body> <h1>XMLHttpRequest()の基本 (Win IEの場合)</h1> <form name="ajaxForm"> <input type="button" value="読み込み" onClick="loadTextFile()"><br> <textarea name="result" cols="40" rows="5"></textarea> </form> </body> </html>

  • Ajax：FireFoxだと動作しない

    既出でしたらすみません。 IEだとうまく動作するものが、FireFoxだと動作しません。 原因をご存知の方がいらっしゃいましたら、 ご教示願えますでしょうか。 参考書籍などをお伝えいただくだけでも構いません。 私はプログラミングの知識はありますが、 DOMについては初心者です。 よろしくお願いします。 ----------HTML/JSソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxサンプル</title> <script type="text/JavaScript" src="../lib/prototype.js"></script> <script type="text/javascript"> <!-- function getFile(){ new Ajax.Request('test_xml03.xml', {method: 'get', onSuccess: getResponse, onFailure: getError }); function getResponse(req){ var varResult = req.responseXml.getElementsByTagName('result'); var varItem = varResult[0].getElementsByTagName('country'); $('result').innerHTML = varItem[0].firstChild.nodeValue; } function getError(req){ $('result').innerHTML = "ERROR"; } } //--> </script> </head> <body> <div> <input type="button" value="データの読み込み" onClick="getFile()"/> </div> <div id="result" >ここにデータを読み込みます。</div> </body> </html> ----------XMLデータ（test_xml03.xml） <?xml version="1.0" encoding="UTF-8" ?> <result> <country>アメリカ</country> <kanji>米</kanji> </result> ----------状況 「データの読み込み」ボタンをクリックすると、 IEでは"result"部分に 「アメリカ」と出ますが、 FireFoxだと何も起こりません。 ----------環境 WindowsXP IE6.0 FireFox2.0 prototype.jsを使用 ----------補足 使用しているJavaScriptは、自分で調べた限りでは IE/FF共に使用できるコードばかりのはずです。 いろいろと試してみましたが、わかりません。 どうかよろしくお願い申し上げます。

  • [prototype.js] Ajax.Requestの取得データをコールバック関数外で取得する方法

    下記のコードを実行すると、 'undefined' 'hello' と表示されます。 （A）の箇所でグローバル変数gTestに'hello'が格納されている事を期待するのですが、undefinedとなります。 どういった理由でこうなるのでしょうか？ また、onCompleteで定義した処理内で、 値をグローバル変数に格納するにはどのような方法がありますか？ 何卒よろしくお願い致します。 -- <script src="/js/prototype.js" type="text/javascript"></script> <script type="text/javascript"> var gTest; function load() { new Ajax.Request('http://～/', { method: 'get', onComplete: displayData }); alert(gTest); //（A）undefinedと表示 } function displayData(httpObj) { gTest = 'hello'; alert(gTest); //（B）helloと表示 } load(); </script> --

  • Ajax.RequestでXMLデータをパース

    お世話になります。 Ajax.Requestをして、返ってくるデータがXMLなのですが このXMLをパースして表示したいのですが 何か方法はありませんでしょうか？ もしかしたら簡単なことなのかもしれませんが ご存知の方がいらっしゃいましたら ご教授よろしくお願いいたします。 ajax.js //////////// function exec(fname,dispArea) { var httpObj = new Ajax.Request(fname, { method:'GET', onSuccess:function(req) { var text = req.responseText; $(dispArea).innerHTML = text; } } ); } ///////////test.html <script language="javascript" type="text/javascript" src="prototype.js"></script> <script language="javascript" type="text/javascript" src="scriptaculous.js"></script> <script language="javascript" type="text/javascript" src="ajax.js"></script> <span id="disp">exec('hoge.xml', 'disp');</script></span> //////////// hoge.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="hoge.xsl" ?> <top> <list> <row>テスト１</row> </list> <list> <row>テスト２</row> </list> <list> <row>テスト３</row> </list> </top> //////////// hoge.xsl <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="top"> <html><title>XMLパース</title> <body> <xsl:for-each select="list"> <xsl:value-of select="row" /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>

  • Ajaxで文字化けしてしまいます

    IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>

  • Ajaxのエラー？

    下記のJSPを実行するとjavascriptエラーになります。 エラー内容は「オブジェクトを指定してください」です。 エラー場所は★の部分です。 いろいろサイトで調べてみましたが原因がわかりませんでした。 初歩的な質問ですみません。 宜しくお願いします。 <%@ page language="java" contentType="text/html; charset=Shift-JIS" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT type="text/javascript" src="xmlhttp.js"></SCRIPT> <SCRIPT type="text/javascript"><!-- function getList() { ★httpObj = createXMLHttpRequest(); if (httpObj) { httpObj.open("GET","aaa",true); httpObj.send(null); } } //--></SCRIPT> </head> <BODY onLoad=getList()> ・ ・ ・ </body> </html>

  • Ajaxが動きません～『status=0』？

    Ajaxを使うため、 web上のサンプルをとってきて実行してみたところ、動きません。 いろいろ調べてみたところ、 通常 　if(httpObj.status == 200) などで使われるstatusが０になっていることが分かりました。 どこかで 　『ローカル上ではstatusは０になる』 という記述を見たのですが、Apache2.0.59が入っています。 Apacheが入っていてもstatusは０になるのでしょうか? 今回使用したサンプルは以下のサイトをのモノを貼り付けました。 http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter02/004/index.html その上で、 　　if ((httpObj.readyState == 4) && (httpObj.status == 200)) 　　{ 　　　　displayData(); 　　} else { 　　　　document.ajaxForm.result.value = httpObj.status; 　　} としました。 これで２日悩んでいるので、解決したいのです。 よろしくお願いいたします。

  • Ajax.Request 進捗状況が分からないIE

    サーバから定期的に送られてくる文字列を、受信した時点で表示したいのですが、IE6だとうまく行きません。(FireFox2ではうまく行きました) IEだと、readyState値の変化時しか、イベントが発生してないような感じなのですが… よい方法はあるのでしょうか？ ご教授よろしくお願い致します。 以下、ソースコードです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>進捗バー</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadFile(fName) { 　var arg2 = { 　　method: 'get', 　　onInteractive: function (httpObj) { 　　　$("result").innerHTML = httpObj.responseText; 　　} 　} 　new Ajax.Request(fName+"?time="+(new Date()), arg2); } // --></script> </head> <body> <form> <input type="button" value="ファイル読み込み" onClick="loadFile('ret.php')"><br /> </form> <div id="result"></div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する