Ajax的な手法で取得したHTMLの表示
- XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させる方法を教えてください。
- 取得したHTMLは認識されないため、表示させる方法を教えてください。
- 非同期で取得したHTMLをJavascriptから操作する方法を教えてください。
- ベストアンサー
Ajax的な手法で取得したHTMLの表示
いつもお世話になっております。 XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させたいのですが、方法がよくわかりません。 <div id="popup"> THIS IS AJAX TEST!! </div> というテキストが取得できるとしたらこのテキストはHTMLとしては認識されていないのでしょうか？ pop = document.getElementById('popup'); document.body.appendChild(pop); とやれば表示されるかと思いましたがうまく行きません。 下手な質問になってしまいました。。とにかく、非同期で取得したHTML をJavascriptから操作する方法を教えていただけると嬉しいです。
- guttten
- お礼率49% (247/495)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> できれば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のロードができたと思うのですが・・・。
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
>#2 これでも駄目？(ただし,IEはサポートしない) https://developer.mozilla.org/en/DOM/document.importNode https://developer.mozilla.org/en/DOM/document.adoptNode
- x_jouet_x
- ベストアンサー率68% (162/236)
> 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に組み込むよう操作したいのです。 もし方法をご存知でしたら教えていただければと嬉しいです。
関連するQ&A
- Ajax(XMLHttpRequest)で取得したHTMLをDOMにし
Ajax(XMLHttpRequest)で取得したHTMLをDOMにしたい ☆環境 ・Firefox 3.x ・greasemonkeyで動作させるJavascript ※上記環境からIEは考慮しないが、Google Chromeは考慮する可能性大 ☆行いたいこと xmlに成形されていない生のhtmlを、XMLHttpRequestで取得しDOMとして利用したい ☆調べたこと https://developer.mozilla.org/ja/XMLHttpRequest overrideMimeType()メソッドを使用すれば、responseXMLでエラーにならない(だけ) ☆現状 一応[window.]document.createElement()でテンポラリ用のdivを用意し、 responseTextで一度書き込み、改めて[window.]documentから動作させています。 この方法だと非同期にしづらいため、なにか良い方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- AJAX
- ajaxでサーバより取得したHTML断片文字列をブラウザに正しく表示させたい
質問１ ajaxを利用してWebサーバから「<B>hoge</B>」のような文字列を取得することはできたのですが、それをブラウザ上に太字のhogeとして表示させたいのですが、ブラウザでタグが解釈されず「<B>hoge</B>」のまま表示されます。サーバから取得したHTML断片文字列をブラウザに解釈させて表示させるにはどうしたらよいのでしょうか。 質問２ appendChild()を繰り返し実行すると、既に取得済みの文字列に対して、新たに取得した文字列がアペンドされます。アペンドさせずにボタン押下で取得した文字列だけを画面に表示させるにはどうしたらよいのでしょうか？ よろしくお願いいたします。 JavaScript var disp = document.getElementById('disp'); disp.appendChild(document.createTextNode(xmlhttp.responseText)); HTML出力位置 <div id="disp"></div>
- ベストアンサー
- JavaScript
- Apend前のElementの中のElement
var div = document.createElement('div'); div.innerHTML="hogehoge<div id='hoge'>aaa</div>"; とし、 このdivの中のelementをID指定で取得したいです。 document.body.appendChild(div); とした後なら、 document.getElementById('hoge') で取得できるのですが、 appendChildしたくないです。 ご名案ありましたら、ご教授ください。宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 「SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表
「SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表示したい」 HTMLファイル上にテキストボックスとそれと対になるラベル（ラベルじゃなくても良いのですが。。）のセットがいくつかあります。 テキストボックスにコードを入力したら、ラベルにそのコードに対応する商品名を表示したいと思っています。 テキストボックスにコードを入力後、フォーカスが離れたら（Onchangeで）Ajaxでそのコードの値を取得し、そのデータをCGIに渡してサーバにあるDBに接続し、その結果をHTML上のラベルに表示したいと思います。 Sbmitせずにフォーカスが離れた場合に、データをCGIに受け渡し、そのデータを画面遷移しないで、HTML上に表示するのはどのようにすればいいのでしょうか。 Ajaxを使えばいいと教わったのですが、色んなサイトを調べてみたのですが、Ajaxが初心者で、よくわからず、コードなどございましたら教えて頂けましたら嬉しいです。 よろしくお願い致します。
- ベストアンサー
- AJAX
- Google AJAX Feed API
Google AJAX Feed APIでRSSを読み込んでタイトルなどの文字のみの表示をすることはできたのですが、（下の記述でやっています。） 画像が投稿されているブログ記事の画像を読み込み、表示させることはできるのでしょうか？ その場合の方法はどのように、すればできるのでしょうか？ お手数をおかけしますが、よろしくお願い致します。 <script type="text/javascript" src="http://www.google.com/jsapi?key="></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://"); <!--表示したいエントリー数--> feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; <!--別窓で表示しない場合は削除してください--> a.target = "_blank" ; a.appendChild(document.createTextNode(entry.title)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- ベストアンサー
- JavaScript
- Ajax.Requestで取得したHTMLソースから'href'の値を
Ajax.Requestで取得したHTMLソースから'href'の値を取得する方法について Javascriptにて取得した別ページのHTMLタグから 必要な部分のみ値を取得し、配列に格納することは可能でしょうか？ 以下Javascript ------ var url = "http://test/index.htm"; new Ajax.Request( url, { "method":"get", asynchronous:false, onComplete: function(request) { html = request.responseText; } } ); alert(html); ------ 以下"http://test/index.htm"のHTMLタグ ------ <html> <head> </head> <body> <a href='http://test/index2.htm'>index2</a> <a href='http://test/index3.htm'>index3</a> <div>index4</div> </body> </html> ------ 上記で"http://test/index.htm"のHTMLタグの全てを取得して出力することはできたのですが、 "href"の"http://test/index2.htm" "href"の"http://test/index3.htm"のみ配列に格納したいのです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- innerHTMLで表示完了後に、Ajaxにて通信を実施
innerHTMLで表示完了後に、Ajaxにて通信を実施 お世話になります。 現在、PHP + Ajax + MySQLでWebアプリケーションを作成中です。 読み込みが既に完了した画面から、 あるイベントにてAjax + PHPにてMySQLからデータを取得し、 その結果を受け取り、innerHTMLにて動的に結果を表示させています。 問題となっているのは、 MySQLからデータを取得するのに時間がかかり、 ２、３秒ほど画面が固まった状態となるため、その対策を実施したいのですが 思うように実現できておりません。 実現したいことは、MySQLからデータを取得する前に、innerHTMLで あらかじめ『しばらくお待ち下さい』のようなメッセージを表示したいのですが 表示される前にMySQLからデータを取得する処理が開始され、 『しばらくお待ち下さい』が表示されません。 以下の方法では、表示されるようです。 (1)メッセージとデータ取得処理の間に確認ダイアログを表示させる。 (2)ウェイト処理を実施 できれば、innerHTMLにて表示が完了されてから、すぐに Ajaxにて通信が開始されるような方法を探しているのですが、 何か方法はありませんでしょうか。 （そもそも、ＤＢからデータを取得する時間にかかりすぎている点は、 今後もSQL文を見直すなど、対策はしたいと考えております。） 少しでもご存知の方がいらっしゃいましたら、 ご教授よろしくお願い致します。 以下に、動作させているイベントを記載致します。 //呼び出されるイベント function test() { var result = document.getElementById("result"); result.innerHTML = "<p>しばらくお待ち下さい...</p>"; //↑↑これが表示されてから、以下の通信を実行させたいのですが、表示されません。 //ここにウェイトするような処理がある場合は、表示されます。 //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } //サーバに要求 sendRequest(xmlhttp, "POST", "test.php", false, null, getResult); return; } //サーバからの応答をxmlhttpにて受信 function getResult(xmlhttp) { //サーバから出力された文字列をinnerHTMLにて出力 var result = document.getElementById("result"); result.innerHTML = xmlhttp.responseText; return; } 【環境】 ブラウザ：IE8 PHP：5.2 以上、よろしくお願い致します。
- ベストアンサー
- AJAX
- HTMLの取得と解析について
フォームのtextareaにHTMLを入力して、そこから必要なタグを取得したいのですが上手くいきません。 textareaの値は取得できています。 textareaの値からgetElementsByTagNameを使用してtableタグを取得しようとしているのでがエラーが出ます。 chromeによると Uncaught TypeError: Object ・・・・ has no method 'getElementsByTagName' 取得した値をgetElementsByTagNameにほり込むのが間違ってるような気もするのですが、良く分かりません。 テキストエリアに入力したHTMLをパースして、再利用する良い方法がありましたらご教授ください。 以下に現状のソースを書かせて頂きます --------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> <!-- function test() { var org_src = document.form1.src.value; table = org_src.getElementsByTagName('table'); document.getElementById('test').innerHTML = org_src; } // --> </script> </head> <body> <p>自動出力</p> <form name="form1"> <p>テキストエリアにソースを張り付けて下さい</p> <p> <textarea id="src" rows="5" cols="30"> </textarea> </p> <p> <input type="button" value="実行" onClick="test()"> </p> </form> <div id="test"> </div> </body> </html> ---------------------------------------------------------------------
- ベストアンサー
- JavaScript
- Ajaxで表示させると内容が不変
下記Ajaxでtest.txtを表示できたのですが test.txtの内容を Hello Japan. 変えてもブラウザのキャッシュをクリアしない限り Hello World! が出つづけます。 下記ページにキャッシュ無効のヘッダをつけても同じです。 子の問題を解決する手段を教えてください。 test.txt: Hello World! x.html: <script> var xmlHttp; function loadText() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET","test.txt",true); xmlHttp.send(null); } function checkStatus() { if (xmlHttp.readyState==4&&xmlHttp.status==200) { var node = document.getElementById("disp"); node.innerHTML = xmlHttp.responseText; } } </script> <form> <input type="button" value="push" onClick="loadText()"> </form> <div id="disp"></div>
- ベストアンサー
- JavaScript
- ajaxが難しいです。
１ if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか？ その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか？ ２ 下記のloadstartとloadなどう違うのでしょうか？ xhr.addEventListener('loadstart', function() { // 画面に通信中と表記 result.textContent = '通信中...'; }, false); // 画面に通信中と表記 xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); 下記ソース ・ <?php sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん！'); print('こんにちは、'.$_REQUEST['name2'].'さん！'); ?> ・ <!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,noimageindex,nofollow"><!-- Onlysample --> <meta charset="UTF-8" /> <title>JavaScript本格入門</title> </head> <body> <form> <label for="name">名前：</label> <input id="name" type="text" name="name" size="15" /> <input id="btn" type="button" name="submit" value="送信" /> <label for="name">名前2：</label> <input id="name2" type="text" name="name2" size="15" /> <input id="btn2" type="button" name="submit" value="送信" /> </form> <div id="result"></div> <div id="result2"></div> <script src="scripts/hello_ajax.js"></script> </body> </html> // 非同期通信を行うための準備 document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var result = document.getElementById('result'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true); xhr.send(null); }, false); document.getElementById('btn2').addEventListener('click', function() { var result = document.getElementById('result2'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name2=' + encodeURIComponent(document.getElementById('name2').value), true); xhr.send(null); }, false); }, false); 最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、 閲覧者からすると同じように見えるのですが、 違いは、ajaxはブラウザ上で生成したのではなく、 サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか？ つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか？
- ベストアンサー
- JavaScript
お礼
わざわざ調べていただきましてありがとうございます！ その上試してまでいただけるとは、非常に良い方なんだろうなと想像しております。 XMLので受け取るのはまだちょっと敷居が高く感じてしまうので、とりあえず教科書通りにやってみようかと思います。 ライブラリも近々手を出してみる予定です！とてもすっきりしました。 感謝です。