Ajax(XMLHttpRequest)で取得したHTMLをDOMにし
- Ajax(XMLHttpRequest)を使用してHTMLを取得し、DOMとして利用する方法について調査しました。XMLHttpRequestのoverrideMimeType()メソッドを使用すれば、responseXMLでエラーにならないことがわかりました。現在は一時的なdiv要素を作成し、responseTextを書き込んでからdocumentから操作していますが、非同期にする方法はないか検討中です。
- Ajax(XMLHttpRequest)を使用してHTMLを取得し、DOMとして利用する方法について調査しました。具体的には、responseTextを処理する際に一時的なdiv要素を作成し、それにHTMLを書き込んでからdocumentから操作しています。しかし、非同期にする方法やより効率的な方法についても検討しています。
- Firefox 3.xとgreasemonkeyで動作するJavascriptを使用して、Ajax(XMLHttpRequest)で取得したHTMLをDOMとして利用したいと考えています。現在はresponseTextを一時的なdiv要素に書き込んでからdocumentから操作していますが、非同期にする方法や他の方法があるか調査しています。
- ベストアンサー
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から動作させています。 この方法だと非同期にしづらいため、なにか良い方法はないでしょうか？ よろしくお願いします。
- skuld777
- お礼率100% (10/10)
- AJAX
- 回答数2
- ありがとう数28
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1の補足より。 > 今回質問したのは調べている時に、FirefoxはXMLにパースしていると記述があったので、 MDCの解説を読みましたが、私は別の解釈をしました。 ----- overrideMimeType() このメソッドを使うことでドキュメントを強制的に特定のコンテンツタイプとして扱うことができます。サーバは XML を送信してくるものの正しい Content-Type ヘッダを送信してこないが responseXML を使いたいという場合に有用です。 https://developer.mozilla.org/ja/XMLHttpRequest ----- サーバが正しいXMLで応答していることが前提なので、HTMLが返ってきたらXMLとしてパース出来ないのではないでしょうか？ > なにか良い方法はないでしょうか？ とりあえず、非同期通信を活用しているAutopagerizeのコードを読んでみると参考になると思います。 http://userscripts.org/scripts/review/8551 ざっと読んだところでは、new DOMParser().parseFromString(str, 'application/xhtml+xml') か document.implementation.createHTMLDocument で新しいdocumentを生成していますね。 以下、簡略化したコードです。未検証。(全角空白は半角空白に置換してください) -------------- var doc; try { doc = new DOMParser().parseFromString(res.responseText, 'application/xhtml+xml'); } catch (e) { doc = document.implementation.createHTMLDocument ? document.implementation.createHTMLDocument('apfc') : document.implementation.createDocument(null, 'html', null); // 以下略 } -------------- DOMParser - MDC https://developer.mozilla.org/ja/DOMParser 3 Semantics, structure, and APIs of HTML documents ? HTML 5 http://www.w3.org/TR/html5/dom.html#dom-domhtmlimplementation-createhtmldocument ついでに、xAutopagerize.js のソースも見てみましたが、こちらは document.implementation.createHTMLDocument だけで DOMParser の文字列はHITしませんでした。(クロスブラウザのためかもしれません) http://d.hatena.ne.jp/os0x/20080327/1206613170
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
responseTextをinnerHTMLでelementに放り込んじゃだめなの？ 非同期にしずらいっていうけど 結局responseTextが得られないと動かせないわけだし。。。
お礼
確かに普通はそれしか方法が無いと思っています。 非同期の件は、idが一意になるように付けることで対処しました。 今回質問したのは調べている時に、FirefoxはXMLにパースしていると記述があったので、 そのパースされたデータを何で取得出来ないのか判らないので、何か方法が無いかお聞きしました。
関連するQ&A
- XMLHttpRequest() Ajaxについて
こんにちは。Ajaxに挑戦しているのですが、テキストフィールドに入力して送信ボタンを押したら、自作関数の XmlHttpRequest()を呼び出して、kakunin.jspに飛ばして、kakunin.jspで作ったコードを<result>タグ内に表示し、その際現れる「削除」ボタンをクリックしたら、今度は自作関数 deleteRequest()を呼び出し、sakujyo.jspに飛ばしてデータベースのレコードの削除を行い、<result>タグ内の表示をかえたいのですが、削除の方がうまくいっておりません（削除するボタンを押して、deleteRequest()は呼び出しているのですが、そのあと、delete.jspに飛ばず、kakunin.jspに飛びます）。以下が大まかなコードです。 function XmlHttpRequest(){ if(window.XMLHttpRequest){ httpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ httpObject=new ActiveXObjec("Msxml2.XMLHTTP"); } httpObject.onreadystatechange=display; 途中省略します。 httpObject.open("GET","kakunin.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); httpObject.send(null); } function display(){ if(httpObject.readyState==4 && httpObject.status==200){ document.getElementById("result").innerHTML=httpObject.responseText; 省略します。 } } function deleteRequest(){ if(window.XMLHttpRequest){ delhttpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ delhttpObject=new ActiveXObject("Msxml2.XMLHTTP"); } delhttpObject.onreadystatechange=displaysql("削除しました"); 省略します delhttpObject.open("GET","delete.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); delhttpObject.send(null); } function displaysql(msg){ if(delhttpObject.readyState==4 && delhttpObject.status==200){ document.getElementById("result").innerHTML=delhttpObject.responseText; alert(msg); kidou(); } } こういったやり方がわからなく、自己流でやってみましたので、おかしな部分もあるかもしれませんが、やりたい事は押すボタンによって、飛ばすjspファイルを変え、<result>タグ内の表示も、各jspファイルで、 出力されたものを表示させたいのですが、自分で考えたやり方ではどこか間違っているようですので、どなたかアドバイスの方、よろしくお願いいたします。 環境は、IE7です。よろしくお願いいたします。
- 締切済み
- JavaScript
- responseTextについて
---XMLHttpRequest--- javascriptでresponseXMLで取得できないことがあり、responseTextで 取得できたのですが、取得したtextがXMLの形式なんです。 responseTextで取得したモノをXMLとして扱うにはどうしたら よろしいのでしょうか？
- 締切済み
- JavaScript
- Ajax的な手法で取得したHTMLの表示
いつもお世話になっております。 XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させたいのですが、方法がよくわかりません。 <div id="popup"> THIS IS AJAX TEST!! </div> というテキストが取得できるとしたらこのテキストはHTMLとしては認識されていないのでしょうか？ pop = document.getElementById('popup'); document.body.appendChild(pop); とやれば表示されるかと思いましたがうまく行きません。 下手な質問になってしまいました。。とにかく、非同期で取得したHTML をJavascriptから操作する方法を教えていただけると嬉しいです。
- ベストアンサー
- JavaScript
- XMLHttpRequest 外部ソースの取得
外部サーバーのHTMLソースを取得することが出来ないのでしょうか？ （仮）ヤフーさんの場合 var req = new XMLHttpRequest(); req.open('GET', 'http://www.yahoo.co.jp', false); req.send(null); var str = req.responseText; こちらapache(Localhost)の環境で作成しています。 XMLHttpRequest Level2との記載もあるのですが・・ 初心者ですが宜しくお願いします。
- 締切済み
- JavaScript
- AjaxでDOM Exception11が出る
次のようなスクリプトを実行して、隣のディレクトリに配置したxmlをAjaxで取得しようとしています。 var ajaxReq = new XMLHTTPRequest; function loadContents(){ //Ajaxリクエスト ajaxReq.send("GET","xml/contents.xml",handleRequest); //## } が、ブラウザのコンソールで##の行で"INVALID_STATE_ERR: DOM EXCEPTION 11" と出て止まってしまいます。 調べると、利用出来ないオブジェクトにアクセスしようとしている時に出るようなのですが、 これはxmlファイルにアクセス出来ない（見つからない等）ことを意味しているのでしょうか？ それともコードそのものに何か欠陥があるのでしょうか？ これはGoogle App Engine for Pythonのローカルサーバー上で動かしているのですが、 試しに純粋なローカル環境で試すとfirefoxのコンソールには uncaught exception: [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: file:///Users/user/gek/s100/HTTP.js :: loadContents :: line 23" data: no] と出ます。これについてはそもそもローカルだからAjaxのリクエストが出来ないのだろうかという点も疑問です。
- ベストアンサー
- 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
- AjaxとMVCについて
こんばんは。Ajaxなんですが、テキストフィールドに入力して、送信ボタンを押したら、jspに飛ばして、データベースを呼び出して、 <div id="result"></div>のところに、飛ばしたjspの中の出力を反映させているのですが、飛ばしたjspで、データベースの接続、結果セットの取得、responseTextで返すテキストの出力など、全て行っているのですが、最近サーブレットやJavaBeansの勉強に入り、なるべくMVCを意識して、データベースの接続や結果セットを取得するあたりまでは、サーブレットやJavaBeansを使って行いたいのですが、そういった連携の仕方がどうも思いつきませんでした。以下が大まかなコードですが、 JavaScriptのコードです。 //表示 var httpObject; function selectRequest(){ if(window.XMLHttpRequest){ httpObject=new XMLHttpRequest(); } //途中省略します。 httpObject.onreadystatechange=display; //省略します。 httpObject.open("GET","kakunin.jsp?nen="+encnen,true); httpObject.send(null); } function display(){ if(httpObject.readyState==4 && httpObject.status==200){ document.getElementById("result").innerHTML=httpObject.responseText; //残り省略します } おおまかですが、kakunin.jspの内容は以下のようになっています。 String nen = request.getParameter("nen"); PreparedStatement ps = db.prepareStatement("select * from kintai where nen=?"); ps.setInt(1, Integer.parseInt(nen)); ResultSet rs = ps.executeQuery(); if (rs.next()){ ここでout.println("<table><tr>……</table>");みたいな感じでresponseTextを作っています。 } ジャバスクリプトのコードで、httpObject.open("GET","kakunin.jsp?nen="+encnen,true); の部分なんですが、ここのkakunin.jspをサーブレットにしたら、responseTextをサーブレットで作らなくてはならないような事になりそうな気がしてやめました。httpObject.openのところでkakunin.jspに要求しているので、responseTextもkakunin.jspの出力でないといけないとは思うのですが、その間どこかでサーブレットやJavaBeansを呼び出して、複雑な処理をそっちにまかせたいのですが、jspからサーブレットを呼び出す方法は、<form method="post" action="サーブレット名">ぐらいしか知らず、これは今回関係ないと思いました。 DWRとかいうのもあるみたいですが、最初はなるべく原始的なやり方で作りたいので、そっちはまだよく調べていません。 発想自体がおかしいかもしれませんが、Ajaxを使っている時、jspやサーブレットなどをうまく連携させて、きれいにまとめたコードを記述する方法などございましたらアドバイスの方よろしくお願いします。
- ベストアンサー
- Java
- ajax でのデータ受け渡しに関して
ajax でのデータ受け渡しに関して わかりにくい内容で申し訳ありません。 現在、ＰＨＰで作成されているプログラムの中に、ajaxを組み込みたいと考えています。 処理の動きとしては、あるプルダウンが選択された場合、すぐさまその値をもとにしてＤＢへ 検索しに行くというものです。 通常、ＰＨＰだけの処理の場合、POST等を用いて、ボタンが押されたら違うphpファイルへ値を 送る事が可能かと思われます。 その処理をajax で選択されたらすぐに検索、表示というような動きをしたいと考えて います。 但し、同じソース、画面上の中でなら、以下のような記述で表示させる事は可能かと 思われますが、HTMLで分割した画面で、上段で選択されたプルダウンの値をもとにして、検索 された結果を下段に表示させたいと考えています。 そもそも、ajaxでは同じ画面上での受け渡ししかできず、上記のように分割されたものでは 不可能なのでしょうか。。。 初歩的な内容で申し訳ありませんが、教えて頂きたいと思います。 《記述内容》 ※ 現状では以下のようなサンプル記述をもとに、自画面（同一）上では表示が可能となっています。 <script> function createXMLHttpRequest(){ if( window.XMLHttpRequest ){ return new XMLHttpRequest(); }else if( window.ActiveXObject ){ try{ return new ActiveXObject( "Msxml2.XMLHTTP" ); }catch(e){ return new ActiveXObject( "Microsoft.XMLHTTP" ); } } return null; } function getDataPost( serverURL, objID ,obj){ var ajax = createXMLHttpRequest(); ajax.open( "POST", serverURL ); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange=function(){ if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){ if(objID!=""){ var obj = document.getElementById( objID ); obj.innerHTML = ajax.responseText; } } } ajax.send( obj.name+"="+obj.value ); } </script> <select name="fuga" onchange="getDataPost('hogehoge.php','hoge',this)"> <option value="">---</option> <option value="1">1</option> <option value="2">2</option> </select> <div id="hoge"></div> よろしくお願いします。
- ベストアンサー
- 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
- xmlファイルが生成されない
<?php //DomDocumentを呼び出す $dom = new DomDocument('1.0','UTF-8'); //要素ノード[document]を追加 $document = $dom->appendChild($dom->createElement('document')); //新しい要素をdocumentの子要素として挿入する $document->appendChild($dom->createElement('name','名前です')); $document->appendChild($dom->createElement('text','テキストです。')); //字下げや空白を考慮してきれいに整形した出力を行う $dom->formatOutput = true; //同階層にtest.xmlとして保存 $dom->save('test.xml'); //出力 echo $dom->saveXML(); ?> のように、同じディレクトリ内にXMLファイルを生成するphpプログラムを作成してみたのですが、 ブラウザからこのPHPファイルにアクセスしてもXMLファイルが作られません。どうすれば良いのでしょうか。 なにかphp,apache等の設定をしてないからでしょうか。 よろしくお願いします。
- 締切済み
- PHP
お礼
期待通り動きました。 簡略化されたコードだけでも、XMLDocumentには変換されてました。 なぜかevaluateで正しく取得出来ないため(第二引数をXMLDocumentにしても)、Autopagerizeのコードを参考に createHTMLDocumentByString/strip_html_tag/createDocumentFragmentByStringの ３つのメソッドをとりあえず実装してみた所、新しいHTMLDocumentになり無事期待通りの動きが実現できました。 AutopagerizeはGPLとのことですし、greasemonkeyのコードですので元からコード配布ですので、 このまま行きたいと思います。 ありがとうございました。