Ajax データが取得できない
- 【解決策あり】Ajaxを使ってデータを取得する際に、処理が中断される問題が発生しています。この記事では、その原因と解決策を解説します。
- Ajaxを使ってデータを取得する際に、処理が中断されてしまう問題が発生しています。この記事では、データ取得の際によくあるエラーと対処法について詳しく解説します。
- Ajaxでデータを取得する際に、「処理中です・・・」というメッセージが表示されたままで、データの取得ができないという問題が発生しています。この記事では、この問題の原因と解決策について詳しく説明します。
- ベストアンサー
Ajax データが取得できない
現在、AJAXを勉強中です。以下のhtmlを実行し、pref.jsを呼び出すコードをサイトから引用して記述しました。 しかし、「データを取得する」ボタンを押すと、【処理中です・・・】というメッセージが出るだけで、いっこうに該当データを取得できません。(本来であれば、指定されたxmlファイル内のデータが表示されるはずなのですが・・） 何が原因なのでしょうか。 解決策がわかる方がいらっしゃいましたらご教授ください。 よろしくお願いします。 ■pref.html --------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="pref.js"></script> <link href="pref.css" rel="stylesheet" type="text/css"> <title>pref</title> </head> <body> <div> <input type="button" id="btnData" value="データ取得" /> <input type="button" id="btnClear" value="クリア" /> </div> <div id="state"></div> <div id="result"></div> </body> </html> --------- ■pref.js ---- onload = init; var state; var result; function init() { $("btnData").onclick = prefDisp; $("btnClear").onclick = clearDisp; state = $('state'); result = $('result'); } function prefDisp() { state.innerHTML = "処理中です・・・<br />\n"; var url = "http://ws.bzen.net/pgtop/pref.xml"; var paramList = ""; new Ajax.Request(url, { method: 'get', onSuccess: getData, onFailure: showErrMsg, parameters: paramList }); function getData(data){ var response = data.responseXML.getElementsByTagName('Response'); var item = response[0].getElementsByTagName('Item'); var tmpHtml=""; for(i = 0; i < item.length; i++){ var prefCd = item[i].getElementsByTagName('PREF_CD'); var prefCdValue = prefCd[0].firstChild.nodeValue; var prefName = item[i].getElementsByTagName('PREF_NAME'); var prefNameValue = prefName[0].firstChild.nodeValue; tmpHtml += prefCdValue + " " + prefNameValue + "<br />\n"; } result.innerHTML = tmpHtml; state.innerHTML = "データを取得しました。<br />\n"; } function showErrMsg(){ clearDisp(); state.innerHTML = "データを取得できませんでした。<br />\n"; } } function clearDisp() { state.innerHTML = ""; result.innerHTML = ""; } ---
- tanakataro2010
- お礼率70% (41/58)
- AJAX
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 urlに指定してあるxmlファイルですが自分のサーバ(このスクリプトが動くサーバ)以外のところのファイルじゃないでしょうか。 クロスドメイン制約(とどのつまりほかのサイトのファイル)は読み込めないようになっています。 動作確認サンプルでは自サーバにxmlファイルを用意して実行しましたので正常に動いています。 ※もし過去の質問が解決しているのであればクローズしてくださいね。 ==== 動作確認サンプル http://hppg.moe.hm/okwave/qa/q7293123/ xmlファイルを自分のサーバに用意するか以下のような方法で制限を回避する必要があります。 http://shokai.org/blog/archives/993
関連するQ&A
- 新しいウィンドーでJavascriptを実行。
サンプルJavascriptを使わせてもらっているうちに非常に分厚い壁にぶつかっています。よろしくお願いいたします。 index.htmlは <form id="fm"> <input type="text" id="txtWord" size="30" /> <input type="submit" value="検索する" /> </form> <div id="state"></div> <div id="result"></div> とformを使っています。 index.jsで function init() { $('fm').onsubmit = function (){return ( itemDisp() );} $('fm').onreset = function (){clearDisp();} state = $('state'); result = $('result'); } とitemDisp()を実行しているんですよね? itemDisp()はitem.jsに記述されていて function itemDisp() { 省略 //結果を表示 result.innerHTML = tmpHtml; state.innerHTML = "データを取得しました。<br />\n"; 省略 ｝ とindex.htmlにデータの結果を表示しています。 今回したいことは、index.htmlで検索すると、その結果を別のウィンドーに表示したいのですが、何をキーワードにして勉強すればいいのかわかりません。 教えていただけないでしょうか。
- 締切済み
- JavaScript
- Ajax：FireFoxだと動作しない
既出でしたらすみません。 IEだとうまく動作するものが、FireFoxだと動作しません。 原因をご存知の方がいらっしゃいましたら、 ご教示願えますでしょうか。 参考書籍などをお伝えいただくだけでも構いません。 私はプログラミングの知識はありますが、 DOMについては初心者です。 よろしくお願いします。 ----------HTML/JSソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxサンプル</title> <script type="text/JavaScript" src="../lib/prototype.js"></script> <script type="text/javascript"> <!-- function getFile(){ new Ajax.Request('test_xml03.xml', {method: 'get', onSuccess: getResponse, onFailure: getError }); function getResponse(req){ var varResult = req.responseXml.getElementsByTagName('result'); var varItem = varResult[0].getElementsByTagName('country'); $('result').innerHTML = varItem[0].firstChild.nodeValue; } function getError(req){ $('result').innerHTML = "ERROR"; } } //--> </script> </head> <body> <div> <input type="button" value="データの読み込み" onClick="getFile()"/> </div> <div id="result" >ここにデータを読み込みます。</div> </body> </html> ----------XMLデータ（test_xml03.xml） <?xml version="1.0" encoding="UTF-8" ?> <result> <country>アメリカ</country> <kanji>米</kanji> </result> ----------状況 「データの読み込み」ボタンをクリックすると、 IEでは"result"部分に 「アメリカ」と出ますが、 FireFoxだと何も起こりません。 ----------環境 WindowsXP IE6.0 FireFox2.0 prototype.jsを使用 ----------補足 使用しているJavaScriptは、自分で調べた限りでは IE/FF共に使用できるコードばかりのはずです。 いろいろと試してみましたが、わかりません。 どうかよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- ajaxでエラー処理
お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。 そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか？ よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function ajax(fName) { var filename = fName + "?cache="+(new Date()).getTime(); new Ajax.Request(filename, { method: "get", onSuccess: displayData, onFailure: displayError }); } function displayData(httpObj) { $("result").innerHTML = httpObj.responseText; } function displayError(httpObj) { $("errMsg").innerHTML = httpObj.responseText; } // --> </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>
- 締切済み
- JavaScript
- AjaxでXMLの要素が取得できない
いつもお世話になっております。 Ajaxを勉強しているのですが、prototype.jsを使用し、XMLを読み込んで データを表示させることができず困っております。 ソースは以下の通りです。 logdate.xml <?xml version="1.0" encoding="UTF-8"?> <namelists> <namelist> <name>山田</name> <ten>50</ten> </namelist> <namelist> <name>鈴木</name> <ten>48</ten> </namelist> </namelists> hoge.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Solutoire.com Plotr › LineChart Example</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script src="./lib/prototype/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function getFile() { new Ajax.Request("logdate.xml", { method: "get", onComplete: displayData }); } function displayData(httpObj) { var XML = httpObj.responseXML; var itemsTag = XML.getElementsByTagName("namelists"); $("result").innerHTML = itemsTag.length; } // --></script> </head> <body> <a HREF="logdate.xml">a</a> <form> <input type="button" value="読み込み" onClick="getFile()"> </form> <div id="result"></div> </body> </html> 結果は0となってしまいます。 ネットで調べたりしましたが、原因がつかめません。 どのようにしたらよいのでしょうか？どなたか教えてください。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 計算結果の表示方法について
お世話になります。 Java Scriptの記述方法で教えてください。 下記のフォームを作りました。 テキストボックスに目標タイムを4時間30分であれば4.5と入力することで必要な時速とキロ当たりのペースを出すようにしています。 2行に渡り、キロ当たりのペースを分と秒で出ていますがが、これを○分○秒と1行に表示させたいのです。 どなたかお知恵をお願いします。 <html> <head> <script type="text/javascript"> function calc(frm) { var result = Math.round(42.195 / (parseFloat(frm.elements["a"].value))*10) / 10; document.getElementById('result_1').getElementsByTagName('span')[0].innerHTML = result; result = Math.floor(parseFloat(frm.elements["a"].value) / 42.195 * 60); document.getElementById('result_2').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(parseFloat(frm.elements["a"].value) / 42.195 * 60*60)%60; document.getElementById('result_3').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(1 / 42.195 * 5 * parseFloat(frm.elements["a"].value) *100) /100; document.getElementById('result_4').getElementsByTagName('span')[0].innerHTML = result; } </script> </head> <body> <form> <input type="text" name="a"> <input type="button" value="計算" onClick="calc(this.form)"><br> 計算結果<br> <div id="result_1">時速 <span></span>km/h</div> <div id="result_2">キロペース <span></span>分</div><div id="result_3"> <span></span>秒</div> <div id="result_4">5km <span></span>時間</div> </form> </body>
- ベストアンサー
- JavaScript
- Ajax.Request 進捗状況が分からないIE
サーバから定期的に送られてくる文字列を、受信した時点で表示したいのですが、IE6だとうまく行きません。(FireFox2ではうまく行きました) IEだと、readyState値の変化時しか、イベントが発生してないような感じなのですが… よい方法はあるのでしょうか？ ご教授よろしくお願い致します。 以下、ソースコードです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>進捗バー</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadFile(fName) { var arg2 = { method: 'get', onInteractive: function (httpObj) { $("result").innerHTML = httpObj.responseText; } } new Ajax.Request(fName+"?time="+(new Date()), arg2); } // --></script> </head> <body> <form> <input type="button" value="ファイル読み込み" onClick="loadFile('ret.php')"><br /> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLにて設定した情報を再度取得する事は可能でしょうか？
innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか？ 下記のコードを考えてみたのですが、 再取得出来ません。 環境はXPでIE6とFF3です。 ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>DOM情報の再取得</title> <script type="text/javascript" language="JavaScript"> <!-- function setText1(data) { document.getElementById("test1").innerHTML = data; return false; } function setText2(data) { document.getElementById("test2").innerHTML = data; return false; } function setText3(data) { document.getElementById("test3").innerHTML = data; return false; } //--> </script> </head> <body> <div id="test1"></div> <div id="test2"> </div> <div id="test3">テスト3</div> <br> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> <a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a> <a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a> <script type="text/javascript" language="JavaScript"> <!-- document.write("<br><br>\n"+'再取得'+"<br><br>\n"); //document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n");//エラーになるのでコメントアウト document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n"); document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n"); //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- 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
お礼
ご回答ありがとうございます。 教えていただいた原因をもとに、最終的に中継ファイル？なるものをおくことで解決しました。 ありがとうございました。 ※過去の質問に関しては、未だうまくいっていないため、クローズしていない状況です。 早く解決できるといいのですが・・・。