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

質問

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

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

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

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

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

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

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

回答No.2

x_jouet_x · ベストアンサー

> できれば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のロードができたと思うのですが・・・。

お礼

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

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

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

回答No.3

himajin100000

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

回答No.1

x_jouet_x

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

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

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

お礼

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に組み込むよう操作したいのです。

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