• 締切済み

Javascriptで外部HTMLの値を取得したい

ＷＥＢ初心者です。 Javascriptを使用して、 外部ＨＴＭＬソースを取得し、その中のある値だけを取得するロジックをご教示ください。 取得した外部ＨＴＭＬソースに正規表現が使えるなら、下記になるかと思います。 /_xyz" value="([^<]+)">/ キャプチャした値を呼び出し元のＨＴＭＬで使用したいです。 ”こんな感じのロジックになります”とご教示いただけますとたすかります。 よろしくお願いいたします。 下記サンプルプログラムを見つけたのですが、 ソース全体ではなくソースの中のある値だけが欲しいです。 --------------------------------------------------------------------------------------------- <?xml version="1.0"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascriptでHTMLのソースを取得</title> <script language="javascript" type="text/javascript"> function createhttprequest(){ var request=null; if("XMLHttpRequest" in window){ request= new XMLHttpRequest(); } else if("ActiveXObject" in window){ try{ request=new ActiveXobject("Msxml2.XMLHTTP"); }catch(e){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ } } } return request; } var request; function requestsorce(url){ request=createhttprequest(); request.open("GET",url,true); request.onreadystatechange=sorceget; request.send(null); } function sorceget(){ if (request.readyState == 4 && request.status == 200){ document.form1.sorce.value=request.responseText; } else{ } } </script> </head> <body> テキストボックスにurlを入力してソース取得ボタンを押してください。 <form name="form1"> <input type="text" name="urlbox" size="40"> <input type="button" value="ソース取得" onclick="requestsorce(document.form1.urlbox.value)"> <textarea name="sorce" rows="120" cols="100"> ここにソースを表示 </textarea> </form> </body> </html>

みんなの回答

  • umai29
  • ベストアンサー率20% (2/10)
回答No.1

request.responseTextの値をjQueryに突っ込んで、検索するのが手っ取り早いです。 $('textarea', $(request.responseText)).html() ※jQueryは読み込み側サイトで別途読み込んでください。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptでの外部データの取り込みについて

    お世話になります。 JavaScriptにて外部fileデータ（c:test_web.txt)を取り込み、ブラウザーに設定した枠内に表示させたいのですが、上手くいきません。 本ソースは参考書のものをそのまま使っているのですが、枠内の表示がされません。 自分なりに調べたところ、外部データを取得できていない様です。 つきましては、下記ソースにて不具合点をご指摘、ご意見頂けます様お願いします。 【JavaScript】 <html> <head> <meta http-equiv=content-type" content="text/html;charset=utf-8"> <title>Web_data_source</title> <script type="text/javascript"><!-- function getFile() { filename = prompt("test_web.txt","c:test_web.txt"); if (!filename) return; xmlhttp=createXMLHttp(); if (xmlhttp) { xmlhttp.onreadystatechange = check(); xmlhttp.open("GET", filename,true); xmlhttp.send(null); } } function check() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.aForm.tArea.value = xmlhttp.responseText; } } // XMLHttpオブジェクト作成 function createXMLHttp() { try { return new ActiveXObject("Msxml2t.XMLHTTP"); }catch(e){ try { return new XMLHttpRequest(); }catch(e) { return null; } } return null; } --></script> </head> <body> <form name="aForm"> <input type="button" value="file_get" onClick="getFile()"><br> <textarea cols="40" rows="20" id="tArea"> </textarea><br> </body> <html> 【c:test_web.txt】 test ok 宜しくご回答を頂けます様お願いします。

  • Ajaxでデータベース(PostgreSQL)

    を非同期で読み込むことができるでしょうか？ ファイルならば下記のようにすれば良いみたいですが データベースの場合のやり方がわかりません。 PostgreSQLのデータを読み込むにはどうしたら良いのでしょうか？ <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","plan.txt",true); xmlHttp.send(null); } function checkStatus() { if(xmlHttp.readyState==4 && xmlHttp.status==200) { alert(xmlHttp.responseText); } } </script> <form> <input type="button" value="read file" onClick="loadText()"> </form>

  • javascriptで困っています。教えてください

    以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか？よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); 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", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>

  • 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のDebugが出来るソフト

    お世話になります。 現在、JavaScriptとAjaxのプログラムを組みましたが、非常に細かいところの差異で上手く動いたり、動かなかったりします。 つきましては、JavaScript、Ajax、PHPでのプログラム作成においてDebugができるソフトがあればご紹介下さい。 【一例】 下記コードのcheckとcheck()の違いで上手くいきませんでした。 <html> <head> <meta http-equiv=content-type" content="text/html;charset=utf-8"> <title>Web_data_source</title> <script type="text/javascript"><!-- function getFile() { filename = prompt("test_web.txt","http://localhost/test_web.txt"); //filename = prompt("test_web.txt","http://www.yahoo.co.jp/"); if (!filename) return; xmlhttp = createXMLHttp(); // xmlhttp = xhtttp alert("OK1"); alert(xhttp); if (xhttp !=null) { //alert("ok2-4") xhttp.onreadystatechange = check;←ここの()有る無しで動きませんでした。 xhttp.open("GET",filename,true); //alert("OK2") xhttp.send(null); } //} function check() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.aForm.tArea.value = xhttp.responseText; //document=xhttp.responseText; alert("OK"); }else{ alert("NG"); alert(xhttp.readyState); alert(xhttp.status); } } // XMLHttpオブジェクト作成 function createXMLHttp() { try { //return new ActiveXObject("Msxml2t.XMLHTTP"); //IE用 //alert("OK4"); xhttp= new XMLHttpRequest(); //Firefox用 alert("OK3"); }catch(e){ try { xhttp = new ActiveXObject("Msxml2t.XMLHTTP"); alert("OK3-1"); }catch(e2){ try { xhttp= new ActiveXObject("Microsoft.XMLHTTP") // return null; alert("OK3-2"); }catch(e3){ xhttp= null; } } } } } --></script> </head> <body> <form name="aForm"> <input type="button" value="get file" onClick="getFile()"><br> <textarea cols="40" rows="20" id="tArea"></textarea> </body> <html> 宜しくご回答頂けます様お願いします。

  • AJAXでサイト存在チェック時、スクリプトエラー

    AJAXを使用し、遷移したいサイトが存在する場合、その際サイトに遷移し、存在しない場合は、ほかのサイトに遷移するという処理を行いたいのですが、スクリプトエラーが発生しまい困っています。 遷移先をローカルサーバのリンクを指定するとうまくいくのですが、外部サーバのアドレスを指定するとエラーになってしまいます・・。何か制約があるのでしょうか？ また、ほかの方法で実現できるのであれば、教えてください。 現在記述しているソースの一部を下記に添付します。 <script language="JavaScript"　type="text/JavaScript"> <!-- function fucXMLHttpRequest(){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp = createXmlHttp(); xmlhttp.onreadystatechange = handleHttpEvent; function handleHttpEvent(){ if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { 　　　　　 window.open("http://www.inte.co.jp/xxxx/xxxx"); } else { window.open("http://www.inte.co.jp/"); } } } xmlhttp.open("GET", "http://www.inte.co.jp/xxxx/xxxx" , true); xmlhttp.send(null); return false; } function createXmlHttp(){ if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { return new ActiveXObject("Microsoft.XMLHTTP"); } } else { return null; } } //--> </script> </head> <a href="#" onClick="fucXMLHttpRequest()">詳しくはこちら</a>

  • IE6 + javascript

    すみません、先ほども質問したのですが、締め切ってしまったのでもう一度質問させてください。 下記コードが、Firefoxでは動作するのですが、IEではjavasciptの部分が動作していません。 もちろん、javascriptの設定は有効にしてあります。 var browser = navigator.appName; if(browser.charAt(0) == "N") { window.addEventListener("load",change_page(page_id),false); } else if (browser.charAt(0) == "Ｍ") { window.attachEvent("onLoad",change_page(page_id)); } ．．．． function httpRequest() { if (window.ActiveXObject) { try { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { httpObj = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { httpObj = false; } } } else if (window.XMLHttpRequest){ try{ httpObj = new XMLHttpRequest(); } catch(e) { httpObj = false; } } return httpObj; } change_page()はfunctionです。 なぜIE6ではjavascriptが動かないのでしょう？ ソースのどこが悪いのかわからず、どなたかアドバイスあればお願いします！

  • Ajaxのプログラムをオブジェクト指向で・・・

    Ajaxのプログラムを一つのオブジェクトにまとめてみようと思ってやってみたのですが、 ＞エラー: プロパティ 'readyState' の値を取得できません: オブジェクトは Null または未定義です。 などと表示されて上手く行きません。 何が悪くてエラーが出るのかが理解出来ていません。 詳しい方、エラーの原因・解決方法を教えてください。お願いします。 php側 echo "test"; ｊａｖａscｒｉｐｔ側 //-------------------------------------------------------------------- // てすとオブジェクト //-------------------------------------------------------------------- var Test = function() {// メンバ変数の定義 this.request = ""; this.query = "test";// クエリ this.response = "";// レスポンス }; Test.prototype = {// プロトタイプの定義 /* データ送信 */ tSend : function() { if(this.query) { this.request = this.ajaxRequest(); this.request.onreadystatechange = this.tLoad; if(this.query) { this.request.open("POST", "./index.php", true); this.request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); this.request.send(this.query); } } }, /* データ受信 */ tLoad : function() { if((this.request.readyState == 4) && (this.request.status == 200)) { alert("test"); } }, /* HTTP通信用 */ ajaxRequest : function() { var value = null; try { value = new XMLHttpRequest(); } catch(e) { try { value = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { value = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return null; } } } return value; } }; //----------------------------------------------------------------------- // 実行 //----------------------------------------------------------------------- var Test = new Test();// 通信用オブジェクトの生成 Test.tSend();// データ送信

  • サーバの、クライアント間でデータ共有

    JavaScript, HTML5 で作成しています。 現在、サーバ側の hoge.txt を読込んで、読んだ内容をクライアント側へ 渡す事を行おうとしています。 ActiveXObject を使用してファイルを読み、取得した responseText を <INPUT type="hidden">へ書き込んでサーバからクライアントへサーバの　hoge.txt の内容をクライアントへ渡す事を実現をさせています。 上記では、改行なしの数十文字程度さであれば問題ないｊのですが、hoge.txt は改行ありの文字数制限なし との仕様との事なので、上記では仕様の要件を満たせていません。 サーバからクライアントへ hoge.txt をダウンロードして読み込ませた方が 要求を満たす事ができるのでしょうか？ 何か良い方法があったらお教えください。 ● 現在のソース 【HTML】 <body onload="initialize()"> <input type="hidden" id="hogetext" value="" /> 【JavaScript】 function initialize() { if (navigator.appName.indexOf("Microsoft") > -1) { xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); } else { xmlhttp = new XMLHttpRequest(); } xmlhttp.open("GET", 'hoge.txt', true); if (navigator.appName.indexOf("Microsoft") > -1) { xmlhttp.onreadystatechange = SetText; } else { xmlhttp.onload = SetText; } xmlhttp.send(""); } function SetText() { if (xmlhttp.readyState == 4) { document.getElementById('hogetext').value = xmlhttp.responseText; } }

    • ベストアンサー
    • HTML
  • リンククリックのアクセスカウンターがうまくいかない

    JavaScriptと非同期通信を使って、 リンククリックのアクセスカウンターを作ろうとしていますが、うまくいきません。 JavaScriptは、 function createHttpRequest(){ //Win ie用 if(window.ActiveXObject){ try { //MSXML2以降用 return new ActiveXObject("Msxml2.XMLHTTP") } catch (e) { try { //旧MSXML用 return new ActiveXObject("Microsoft.XMLHTTP") } catch (e2) { return null } } } else if(window.XMLHttpRequest){ //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用 return new XMLHttpRequest() } else { return null } } function upcount(pr) { //XMLHttpRequestオブジェクト生成 var httpoj = createHttpRequest() //[1] var url = './count.php?prid='+pr; // alert(url); //open メソッド httpoj.open( 'GET' , url , true) //[2] //受信時に起動するイベント httpoj.onreadystatechange = function() //[4] { } //send メソッド httpoj.send('') //[3] } です。 HTMLは、PHPの一部なのですが、 $prdata[$prcount]= "<li><a href=\"$link\" onClick=\"upcount('$prid');\">$title</a></li>\n"; な風になっています。 ブラウザは今のところFirefoxを使っています。 ここで奇妙なことが起こっています。 upcountファンクションのalertのところを一回でもコメントアウトでなくして、 リンクをクリックすると、うまくカウントされるのです。 コメントアウトにしても、うまくカウントされ続けます。 しかしコメントアウトのままですと、別のPCのFirefoxでリンクをクリックしても、 カウントされませんでした。 奇妙な現象も解明したい気もしますが、まずはソースにミスがあると 思っていますので、どうかデバッグにご協力ください。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する