• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:responseTextを使っての書き換えを複数行いたい)

responseTextを使っての書き換えを複数行いたい

このQ&Aのポイント
  • JavascriptからPHPを呼び出し、その結果でHTMLを書き換える処理を行っています。しかし、2箇所同時に書き換えるため1つのfunctionの中で2回PHPを呼んでも、1回目の結果しか画面に反映されません。これはなぜでしょうか?
  • 以下のソースコードでは、reqとreq2という2つのXMLHttpRequestオブジェクトを使用し、それぞれのPHPファイルを呼び出しています。しかし、hogeとhoge2という2つの要素に対してinnerHTMLを設定しても、1回目の結果しか表示されません。
  • この問題の原因は、XMLHttpRequestが非同期的に動作するためです。即座に結果を取得せず、非同期に処理されるため、2回目の呼び出しの結果が表示されないことがあります。解決策としては、非同期処理を同期処理に変更するか、コールバック関数を使用して処理の順序を制御することが考えられます。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

明確に原因は分かりませんが、あまり考えても出来ない事は出来ない、と割り切らないとはまりっぱなしになりますよ。  とりあえず、こんな感じに書き換えたらどうなんでしょう。 function hoehoe(hoge){ req = new XMLHttpRequest(); req.open("POST",hoge+".php",true); document.getElementById(hoge).innerHTML = req.responseText; } function hoehoe2(){ hoehoe("hoge"); hoehoe("hoge2"); } # OperaとIEとSafariとFirefoxで挙動が違ったりする場合も、そういうもの、として割り切らないとうまくいきませんからね。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • テーブルを固定し、文字列を折り返すようにするには?

    現在、以下のようなPHPを読みこんで、テーブルに表示させるようなプログラムを組んでいます。しかし、テーブルの横幅以上に長い文字列だと、横に伸びた移動カーソル(?IEの右横にある上下移動するためのものの横バージョン)のようなものが表示されてしまいます。自分は文字列を折り返して表示したいのですが、どうしたら良いでしょうか? ・ ・ ・ var ajax = new XMLHttpRequest(); ajax.onload = function() { document.getElementById('ch').innerHTML = ajax.responseText; } ajax.open('GET','test.php',true); ajax.send(null); ・ ・ ・ <div align="center" id="ch"style="width:700px;height:500px;overflow:auto;" > <p>クリックしてください</p> </div>

  • Ajaxでwebページの一部をリロード

    Ajax超初心者です。 http://okwave.jp/qa/q7061328.html これのベストアンサーについてなんですけど、 <script type="text/javascript"> function update(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "/foo.php"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("foo").innerHTML = xhr.responseText; xhr = null; } } xhr.send(null); } </script> これって例えば「1分後に自動的にリロードする」というような指示は どこを変更して指示したらいいんでしょうか。 もしこの方法ではそういう指定ができないのなら、 指定できる方法を教えてください。

  • 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です。よろしくお願いいたします。

  • 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との記載もあるのですが・・ 初心者ですが宜しくお願いします。

  • 特定のページの画像URL一覧表示をしようと思っているのですが、

    特定のページの画像URL一覧表示をしようと思っているのですが、 何が原因なのか解らず困っています。 <html> <head> <script> function load(){ var req = new XMLHttpRequest(); req.open("GET", "http://news.google.co.jp/nwshp?hl=ja&tab=wn", false); req.onreadystatechange = function(){ if(4 == req.readyState){ set_news(req.responseXML); } }; req.send(null); } function set_news(xml){ var container = document.getElementById("news"); container.innerHTML = ""; var items = xml.getElementsByTagName("img"); for(var i = 0; i < items.length; i++){ var a = document.createElement("a"); a.href = items[i].getAttribute("src"); a.innerHTML = items[i].getAttribute("src"); container.appendChild(a); } } </script> </head> <body onLoad="load();"> <div id="news"></div> </body> </html> 上記はgoogleの画像URL一覧を取得しようと思っています。 この場合、何が悪いのでしょうか? ご教示宜しくお願いいたします。

  • PHPの処理結果をjavascriptで利用する方法

    既に似たような質問も出ていそうで恐縮ですが(一通り目を通したですが、目的とするものは見つけられませんでした)、 PHPとjavascriptのやりとりについて教えていただければ幸いです。 データをフォームなどから受け取る→サーバー側(php)で処理→ 処理した結果の変数をjavascript用の変数として扱うといったこと がしたいのですが、うまくできません。 実際には以下のような形で書いて失敗してしまいました。。。 /*xxx.php*/ <html> <head> <?php $result = $_POST["sentence"]; ?> <script language="javascript"> result = "<?=$result?>"; </script> <script src="xxx.js" type="text/javascript"language="javascript"></script> </head> <body> <form id="sample"> <input type="text" name="sentence"> <input type="submit" value="送信"> </form> </body> </html> /*xxx.js*/ /*xxx.js*/ window.onload = function(){ document.getElementById("sample").onsubmit = function() { var req = createHttpRequest(); req.onreadystatechange = function(){ if(req.readyState==4 && req.status == 200){ alert(result); //PHPの結果を待った後を想定した何らかの処理      //ここでresultを使いたいが、サーバー側への送信前      //の値が入っているだけでonsubmitが反映されていない。 } } req.open("POST","./xxx.php",false); //<-formでくくられた<input type="text">等の部分は反映されない。 req.send(""); } } function createHttpRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else if(window.ActiveObject){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { return null; } } } } 私なりに調べたところ 1.PHPとjavascriptは別の所で動作しているので受け渡しは基本不可能 2.PHP側で動的に書き出すことで見せかけることはできる。 var test = <?=$test?>等 3.XmlHttpRequestでphpの処理を結果を待って、変数を利用しようと思ったが、 <form id="form"> <input type="text" name="sentence"> <input type="submit" value="送信"> </form> といった場合に$_POST["sentence"]に値を入れる方法が不明。 また、 multipart/form-dataによる送信など方法が複雑。 responseTextには<html>から</html>まで格納されてしまった。 処理項目ごとに表示用に別にPHPファイル作成だと困る。 4.<form action = "xxx.php" onsubmit=関数名>とすると、 onsubmitで指定した関数が先に呼び出されてから、 xxx.phpの実行が行われるので、サーバー処理を待たずに javascript側が実行されてしまう。 といったことだけは分かりました。 しかし、どのように変更すればうまくいく(もしくは見せかける) ようになるのかがさっぱり分からなかったため、 質問させていただきました。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • phpソースの中のjavascriptを実行する方法

    現在、AJAXの勉強をしているプログラミング初心者です。 環境はapache2,php5です。 phpのソースの中にjavascriptを埋め込んだものを動作させるには どうしたらよいのかが分かりません、 例えば以下の2つのファイルの場合。 abc.php↓ --------------------------------------------------------------- <html> <head></head> <body> <?php echo "こんにちわ"; ?> <script tyep="text/javascript"> alert("hello"); </script> </body> </html> --------------------------------------------------------------- abc.html↓ --------------------------------------------------------------- <html> <head> <script> try{ var obj= new ActiveXObject("Microsoft.XMLHTTP");} catch(e){var obj=new XMLHttpRequest();} function load(point){ obj.open("POST","abc.php",true); obj.send(null) obj.onreadystatechange=change; } function change(){ if(obj.readyState==4){ document.getElementById("target").innerHTML=obj.responseText; } } </script> </head> <body> <div id="target"></div> <a href="#" onclick="load();">click!</a> </body> </html> --------------------------------------------------------------- としたところ、 abc.phpを実行した場合はabc.phpのjavascriptが実行されてアラートがでるのですが、 abc.htmlからabc.phpにリクエストを出して出力された場合には、 javascriptが実行されずにアラートが出ない。 どうしてこのようになるのでしょうか? また解決策があれば教えてください。 よろしくお願いします。

  • Google MapsのKMLをJSONで取得したい。

    Google MapsのKMLをJSONで取得したい。 Google Mapsで作成したマイマップのKMLを見るとURLが書かれています。 このURLの末尾を「&output=kml」→「&output=json」 と変更するとJSONで取得できると思うのですが、 実行するとstatus=0となっていまいます。 HTTPヘッダを見る限り200なので取得出来ているようなのですが・・・ なぜでしょうか?教えてください。 === var jsonUrl = 'url' var xhr = new XMLHttpRequest(); xhr.open("GET", jsonUrl, true); xhr.onreadystatechange = function() { if (xhr.readState ==4 && xhr.status == 200){ var jresult = document.getElementById("json_panel"); jresult.innerHTML += xhr.responseTEXT; } else { alert (xhr.statusTEXT); } } xhr.send();

  • ローカルでのonreadystatechangeの動作について

    現在下記のようなコードを書いて、HTMLを読み込む処理を行おうとしています。 function LoadHtml(id , uri) { if(!XmlsReq)return; XmlsReq.open('GET',uri); XmlsReq.send(null); XmlsReq.onreadystatechange=function(){ alert("piyo"); if(XmlsReq.status==0 || XmlsReq.readyState==4 && XmlsReq.status==200) { alert("hoge"); document.getElementById(id).innerHTML=XmlsReq.responseText; } } document.getElementById(id).innerHTML=XmlsReq.responseText; } これはHTTPサーバ上で動かすとちゃんと動作し、 またHTTPステータスコードが0になるローカルでもfirefoxなら動くのですが、 IE7で試してみたところ、動作しません。 原因を探してみたところ、XmlsReq.send(null);までは実行されておりalert("piyo")が表示されないことから、 どうもonreadystatechangeイベントが検出されていないような動きをしています。 ローカルのIE7環境でちゃんと動作させるにはどうしたら良いか、分かる方居ましたら教えて下さい。

    • ベストアンサー
    • AJAX
  • formを利用した「GET」methodでの送信について

    formを利用した「POST」methodは使わずに、「GET」で送信すべく サンプルソースで試しているのですが、どうも動きがおかしいので お尋ねします。 下記にそのサンプルソースをまとめていますが これでそのまま何か適当にテキストボックスに文字を入れて「検索」を クリックしますと・・・ ブラウザのURLは http://~~~test_form.html?menu=srch&scat=1&swrd=入れた文字  ..のようにならないといけない、と思うのですが。 実際は http://~~~form_test.html?serch_cat=1&srch_word=入れた文字&srch_exec=%8C%9F%8D%F5  ..のようになってしまいます。 いろいろテストして見ますと、「com error」が出ますので、何かやり方を 間違えているか、あるいは全く大きな勘違いがあるかもわかりません。 どなたかご存知の方がいらっしゃいましたら、よろしくご教授のほど お願い致します。 //--- サンプルソース(form_test.html)---------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <script type="text/javascript"><!-- function sock_gput_req(sdata1){  var radio_val = chk_radio();  var sword = document.getElementById('srch_word').value;  php_id = sdata1+'&scat='+radio_val+'&swrd='+sword;  //document.getElementById('result').innerHTML = 'para='+php_id;  var req = createXMLHttp();  if (req==null){    return; } req.onreadystatechange = function(){  handleHttpEvent(req); } //window.alert("com get_sub !! "+php_id); sendreq(req,php_id); } function chk_radio() {  for(i=0; i<document.all.serch_cat.length; i++){   if(document.all.serch_cat[i].checked){     return document.all.serch_cat[i].value;   }  }  return -1; } function handleHttpEvent(req){  if (req.readyState == 4) {   //window.alert(req.responseText); // responce data   if (req.status == 200) {     //window.alert(req.responseText); // responce data   } else {     window.alert("com error !!");   }  } } function sendreq(req,php_id){  req.open("GET",php_id,false);  req.send(""); } 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");   }  }  return null; } // --></script> </HEAD> <BODY> <FORM name="srchform" METHOD="GET" onsubmit="sock_gput_req('test_form.html?menu=srch');"> <TABLE BORDER="0" cellspacing=2 cellpadding=0 width=90%> <TR><TD>【ワード検索】</TD></TR></TABLE> <div align=left>■検索ワード</div> <input type="radio" name="serch_cat" value="1" checked>カテゴリーA  <input type="radio" name="serch_cat" value="2">カテゴリーB<br> <TABLE BORDER="0" cellspacing=0 cellpadding=3> <TR><TD> <INPUT TYPE="TEXT" NAME="srch_word" SIZE="35" value=""> </TD><TD > <INPUT TYPE="SUBMIT" NAME="srch_exec" VALUE="検索"> </TD></TR> </TABLE> </FORM> <div id="result"></div> </BODY> </html>

    • ベストアンサー
    • PHP