こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Ajax的な手法で取得したHTMLの表示

いつもお世話になっております。

XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させたいのですが、方法がよくわかりません。

<div id="popup">
THIS IS AJAX TEST!!
</div>

というテキストが取得できるとしたらこのテキストはHTMLとしては認識されていないのでしょうか?

pop = document.getElementById('popup');
document.body.appendChild(pop);

とやれば表示されるかと思いましたがうまく行きません。


下手な質問になってしまいました。。とにかく、非同期で取得したHTML
をJavascriptから操作する方法を教えていただけると嬉しいです。

投稿日時 - 2009-07-20 23:49:50

QNo.5142107

暇なときに回答ください

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

> できればHTMLは表示するだけでよい形でもらい、それを操作して表示済みのHTMLに組み込むよう操作したいのです。
> もし方法をご存知でしたら教えていただければと嬉しいです。

XMLHttpRequestの仕様とJavaScriptのDOMの仕様を確認してみましたが、実現するのは難しいようです。

XMLHttpRequestのレスポンスがXMLの場合、responseXMLプロパティを使用してDOMとして操作できますが、これをそのままHTMLのある要素にappendChildすることはできないようです(自環境で試してみました)。
XMLHttpRequestでは文字列のようなデータのみを取得して、それをJavaScript内で加工するしかないようですね。

教科書では、
----------
pop = createElement('div');
pop.id = 'popup';
caption = createTextNode(xhr.responseText);
pop.appendChild(caption);
----------
とdivタグも動的に作っているようですが、HTML内にあらかじめ<div id="popup"/>を書いておき、
----------
caption = createTextNode(xhr.responseText);
getElementById('popup').appendChild(caption);
----------
とする方法もありますね。

回答になっていなくてすみません。
jQueryのようなAjaxライブラリを使用すればHTMLのロードができたと思うのですが・・・。

投稿日時 - 2009-07-22 02:30:32

お礼

わざわざ調べていただきましてありがとうございます!
その上試してまでいただけるとは、非常に良い方なんだろうなと想像しております。

XMLので受け取るのはまだちょっと敷居が高く感じてしまうので、とりあえず教科書通りにやってみようかと思います。

ライブラリも近々手を出してみる予定です!とてもすっきりしました。
感謝です。

投稿日時 - 2009-07-22 21:54:31

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

>#2
これでも駄目?(ただし,IEはサポートしない)
https://developer.mozilla.org/en/DOM/document.importNode
https://developer.mozilla.org/en/DOM/document.adoptNode

投稿日時 - 2009-07-22 20:03:56

ANo.1

> pop = document.getElementById('popup');
> document.body.appendChild(pop);

上記のように記述しても、XMLHttpRequestでテキストやHTMLを取得しても呼び出し元のHTMLの要素には追加されていないので、document.getElementById(...)を使用しても取得できません。

XMLHttpRequestで非同期に取得したテキストやHTMLは、XMLHttpRequestオブジェクトのresponseText、またはresponseXMLで参照できます。
つまり、変数xhrをXMLHttpRequestオブジェクトだとすると、
xhr.responseText;
xhr.reponseXML;
でそれぞれ参照できます。

投稿日時 - 2009-07-21 00:12:17

お礼

pop = xhr.responseText;
とし、
alert(pop);
としたら確かにテキストを取得することはできました。

ここからさらに、取得したテキストをHTMLとして使用し、
document.getElementById('popup');
でいろいろ操作するようにする方法はありますでしょうか?

教科書には
THIS IS AJAX TEST!!
という文字列だけを非同期で取得し、
pop = createElement('div');
pop.id = 'popup';
caption = createTextNode(xhr.responseText);
pop.appendChild(caption);

というようなやり方で動的にdivタグ、ID等をくみ上げていくのですが、
できればHTMLは表示するだけでよい形でもらい、それを操作して表示済みのHTMLに組み込むよう操作したいのです。

もし方法をご存知でしたら教えていただければと嬉しいです。

投稿日時 - 2009-07-22 00:52:11

あなたにオススメの質問