AJAXのレスポンスをテキストエリアに表示

前へ 次へ
このQ&Aのポイント
  • AJAXのリクエストに対するレスポンスをテキストエリアに表示する方法について
  • テキストエリアに表示されない問題を解決する方法
  • サーバーサイドのPHPから返されるレスポンスの文字列をテキストエリアに表示する方法
回答を見る
  • ベストアンサー

AJAXのレスポンスをテキストエリアに表示

以下のようなスクリプト（chat.htmlと、write_log.php）において、chat.htmlからwrite_log.php に送ったリクエスト（xmlHttpRequestオブジェクト利用）に対するレスポンスを受信後に、 document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; としているのに、チャットのボディである、テキストエリアにレスポンスの文字列（ファイル(log.txt)の中身）.が表示されません。printした文字列がwrite_log.phpのページで表示されているだけなのです。テキストエリアに、サーバーサイドのPHPから返されるレスポンスの文字列を、テキストエリアに表示するにはどこが間違っているのでしょうか。 ご指導、どうぞよろしくお願いします。 【chat.html】 <!DOCTYPE html> <head><title>チャット</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="body"> <script type="text/javascript"> var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // レスポンス受信後に呼び出される関数 // alert('test'); document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; } } function onClicked(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; // コールバック関数 xmlhttp.open("GET", "write_log.php"); xmlhttp.send(null); // チャット音鳴動 var myAudio=document.getElementById("audio"); myAudio.play(); } function getDate(){ var date = new Date; var hours = date.getHours(); var minutes = date.getMinutes(); if(hours>=0 && hours<10){ hours = "0" + toString(hours); } if(minutes>=0 && minutes<10){ minutes = "0" + toString(minutes); } return (hours + ":" + minutes); } </script> <center> <div id="title">【チャット】</div> <div id="container"> <div id="disp"> <textarea id="disp_chat" class="disp"></textarea> </div> <div id="input"> <form name="form1" method="GET" action="write_log.php"> お名前：<input type="text" name="user" id="user" class="name"> メッセージ：<input type="text" name="input_chat" id="input_chat" class="input"><br><br> <input type="submit" id="submit" value="送信" onclick="onClicked()"> <!-- <input type="button" id="submit" value="送信" onclick="onClicked()">--> </form> </div> </div> </center> <audio id="audio" src="mjkchat.mp3">Your browser does not support the audio element.</audio> </body> </html> 【write_log.php】 <?php date_default_timezone_set("Japan"); $date = date('H:i:s'); $user = $_GET['user']; $chat = $_GET['input_chat']; $buf = $date.' '.$user.'：'.$chat."\n"; $filename = "./log.txt"; $fp = fopen($filename, 'a'); fwrite($fp, $buf); fclose($fp); $buf2 = file_get_contents($filename); print $buf2; //header("Location: chat.php"); ?>

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5080/13276)
回答No.4

＞　テキストエリアには表示されましたが、時間などの数字以外の文字がテキストエリア内部で化けています。 PHP側の問題じゃなくてJavaScript側の問題でしょう。 onClicked 関数の中を ========== var user = encodeURI(document.getElementById("user").value); var chat = encodeURI(document.getElementById("input_chat").value); ========== と直したら日本語でも大丈夫だと思います。 理想的にはエンコードするんじゃなくてPOSTメソッドに変えて処理する方がいいと思いますが。

beterugius
質問者

お礼

お忙しいところ、恐縮ではありますが、御礼の言葉を申し上げます。 ありがとうございました。

beterugius
質問者

補足

理想の動作を実現できました。大変お世話になりました。 どうもありがとうございました。

その他の回答 (3)

  • t_ohta
  • ベストアンサー率38% (5080/13276)
回答No.3

＞　すみませんが、どの部分をどういうふうに直されたら、動作したのでしょうか。 HTML側だけいじりました。 PHPのプログラムは触ってません。 ========== <!DOCTYPE html> <head><title>チャット</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="body"> <script type="text/javascript"> var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // レスポンス受信後に呼び出される関数 //alert('test'); document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; } } function onClicked(){ var user = document.getElementById("user").value; var chat = document.getElementById("input_chat").value; xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; // コールバック関数 xmlhttp.open("GET", "write_log.php?user="+user+"&input_chat="+chat); xmlhttp.send(null); // チャット音鳴動 var myAudio=document.getElementById("audio"); myAudio.play(); } function getDate(){ var date = new Date; var hours = date.getHours(); var minutes = date.getMinutes(); if(hours>=0 && hours<10){ hours = "0" + toString(hours); } if(minutes>=0 && minutes<10){ minutes = "0" + toString(minutes); } return (hours + ":" + minutes); } </script> <center> <div id="title">【チャット】</div> <div id="container"> <div id="disp"> <textarea id="disp_chat" class="disp"></textarea> </div> <div id="input"> <form name="form1"> お名前：<input type="text" name="user" id="user" class="name"> メッセージ：<input type="text" name="input_chat" id="input_chat" class="input"><br><br> <input type="button" id="submit" value="送信" onclick="onClicked()"> </form> </div> </div> </center> <audio id="audio" src="mjkchat.mp3">Your browser does not support the audio element.</audio> </body> </html>

beterugius
質問者

補足

t_ohta様のおっしゃるように、部分的に修正しましたら、 テキストエリアには表示されましたが、時間などの数字以外の文字が テキストエリア内部で化けています。 mb_internal_encoding('UTF-8'); mb_http_output('UTF-8'); mb_http_input('UTF-8'); mb_regex_encoding('UTF-8'); 全部、write_log.php の最上部に書いたのですが、それでも文字化けて ます。どうすればテキストエリアの文字化けが直るでしょうか。

  • t_ohta
  • ベストアンサー率38% (5080/13276)
回答No.2

＞　ブラウザーは、クロームかIEです。 ならば IE だけで動かしましょう。 JavaScript内で「ActiveXObject」を使用しているので、IE以外では動作しないと思います。 私の手元でIEでテストした所、テキストエリアにPHPからの応答が表示されました。 （デバッグ用にいじられていた部分は直しましたが）

beterugius
質問者

お礼

ちなみに、私のレンタルサーバーでのURLをお教えします。 http://5247423.raindrop.jp/ajax/chat/chat.html です。私のままのスクリプトでどういう挙動をとるかテストして いただければ、幸いです。

beterugius
質問者

補足

すみませんが、どの部分をどういうふうに直されたら、動作したのでしょうか。1字1句教えていただけないでしょうか。（デバッグ用の部分も含めて） あと、ちなみに、write_log.php の最後のheader()で、chat.htmlにリダイレクトして戻るのはだめでしょうか。 また、デバッグしたところ、xmlhttpのreadyState　が１になっており、 function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // レスポンス受信後に呼び出される関数 //alert('test'); document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; } } のdocument.～の文を実行しないで、if文を抜けてました。 responseTextが未定義ですとかも、書いてありました。

  • t_ohta
  • ベストアンサー率38% (5080/13276)
回答No.1

どのような環境（ブラウザの種類やPHPの実行環境）でテストされていますか？

beterugius
質問者

お礼

お返事ありがとうございます。

beterugius
質問者

補足

お返事ありがおうございます。 ブラウザーは、クロームかIEです。レンタルサーバー上でテストしています。 PHPのバージョンは5.4だったと思います。

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

関連するQ&A

  • 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>

  • ajaxでPHPにPOST送信して結果データをテキストファイルに書き込みたいのですがうまくいきません

    jQueryを使用しています。 <script language="Javascript"> function send(){// $.ajax({ type: "POST", url: "write.php",//write.phpに送信 date: {date: $("#text").val()},//「id="text"」なテキストエリアのvalue値を取得し「date」として送信。 }); } </script> <form name="chat" onsubmit="send();return false" method="POST" > <textarea id="text"></textarea><br> <input type="submit" value="送信"></input> </form> write.php <?php $textfile = fopen("text.txt", "a");//「text.txt」をオープン fputs($textfile, $_POST["date"]);//書き込む（これができません。ディレクトリーにファイルがなかった場合、ファイルは作成されます） fclose($textfile); ?> どのようにしたら、テキストエリアに入力された値を、テキストファイルに書き込むことができるのでしょうか？ 色々、調べたのですがプログラムの書き方の間違いがどうしても分かりません。教えてください。

    • ベストアンサー
    • AJAX
  • JavaScriptでテキストを表示・非表示・・・

    こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。 サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。 　　　↓このような形にしたいです 　あいうえおかきくけこ　 　サシスセソタチツテト　←この行を表示/非表示 　なにぬねのはひふへほ　 　マミムメモヤユヨ　←この行を表示/非表示 こういう風なように打ちました。 あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> 　　　　　　　 なにぬねのはひふへほ<br>　 <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript"> <!-- function Hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } // --> </script> どの辺りを間違っているでしょうか?宜しくお願い致します。

  • 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>

  • PHP+Ajaxでプルダウンの連動

    お世話になっております。久しぶりですが、わからないところが出てきたので、質問させてくださいませ。 現在、PHP+MySQLでホームページを作っています。 A(大カテゴリ)、B(小カテゴリ)のそれぞれのプルダウンを持っていて、 MySQL上では、BはどのAに所属しているかが格納されています。 その上で、 PHPソース <script type="text/javascript" src="ajax.js"></script> Aの部分 <select name="category" id="category" onChange="changePack(this)"> <option value="">--</option> <option value="1">A-1</option> <option value="2">A-2</option> <option value="3">A-3</option> </select> Bの部分 <select name="pack" id="pack"> <option value="">--</option> </select> Ajax部分のソース // 検索結果画面初期表示用 function setList() { var Category = "0"; var Pack = "0"; setPackOption(Category); document.rsv_input.category.selectedIndex = 0; document.rsv_input.pack.selectedIndex = 0; } // カテゴリ選択時 function changePack(Category) { var Category; getResult(Category.value); } function getResult(Category) { //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } var data = ""; data += "category=" + Category; sendRequest(xmlhttp, "POST", "result.php", false, data, callBack); } function callBack(xmlhttp) { var result = xmlhttp.responseText; var resArray = result.split(","); for (i=0; i<resArray.length; i++) { var packArray = resArray[i].split("/"); document.rsv_input.pack.options[i] = new Option(packArray[1], packArray[0]); } } relust.phpのソース $category = ( $_POST["category"] != "0" )? $_POST["category"] : ''; select文で「$category」を持つ、レコードから「小カテゴリ」のid、名称 を取得 $id = $Cols['id']; $name = $Cols['name']; $data .= ',' . $id . '/' . $name; echo($data); としておりますが、小カテゴリのプルダウンに$dataの中身が反映されません。(result.phpの$_POSTを$_GETに変更して単体で動かした場合は、$dataが読み取れる状態になります。) http://www.okushin.co.jp/information/Ajax_report/06_sample02.php を参考にさせていただいていますが、プルダウンの総数が違う。や、最終結果をテキストデータとしてhtml中に書き出すなど若干の相違点でつまずいています。 当方、PHP(0.5年)、JavaScript(0.5年)位の経験しか持ち合わせていないので、余計にわかってないだけかも知れません。 お手数をおかけいたしますが、修正箇所の指摘やその方法などを教えていただけませんでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • AjaxでSJISファイル読み込みすると文字化け

    Ajaxを利用し、SJISで作成されたCSVファイルを読み込みたいのですが文字化けしてしまい困っています。 最終的には、Windowsのサイドバーガジェットで、東京電力が公開しているSJISのCSVファイルの中身を表示したいのです。（それ以前にAjax単体で文字化けしてしまいます） 本来、CSVをUTF-8にしたり、サーバサイド(PHPなど)側で文字コード変換したりするのでしょうが、それができないため、JavaScript側で何とかしたいのですが、ご教授願います。 以下、サンプルソースです。 何故か、東京電力のCSVはダメで、東北電力のCSVは大丈夫です。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <script language="JavaScript"> function getCsv(uri){ var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); xmlHttp.open("GET",uri); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ document.getElementById("disp").innerHTML = xmlHttp.responseText; } } xmlHttp.send(null); } </script> </head> <body> <form> <select onchange="getCsv(this[this.selectedIndex].value);"> <option>↓選択してください <option value="http://www.tepco.co.jp/forecast/html/images/juyo-j.csv">東京電力 <option value="http://setsuden.tohoku-epco.co.jp/common/demand/juyo_tohoku.csv">東北電力 </select> </form> <div id="disp"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • Ajaxの結果のページングの方法

    テキストボックスに文字を入力中に情報を検索し、同一ページに非同期で検索結果を表示する ページを作っています。 ページ自体はPHPで、javascript で XmlHttpRequestを使い、データ検索用のPHPに情報を送り 検索用のページで結果を整形するprint文を作り、xmlhttp.responseText　で結果を表示しています。 この検索結果をページングしようと思い、 jquery.pagination.js　を利用しようと思っております。 http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_pagenation　　(このサイトの下側の物です) 実装してみたところ、なかなか良いところまで行ったのですが、ページを表示した最初の時に、 一件目の結果が反映されません。 ページングで次を押せば二件目が表示され、前のページを押せば一件目の表示がされているので、 結果は取得できているようですが、それぞれの処理のタイミングで、ページロード時に一件目のデータが取得できていないと思っていますが、解決方法が分かりません。 ソースの一部しか載せられませんが、解決方法がお分かりでしたら教えてください。 <!-- 検索のスクリプト --> <script type= "text/javascript"> function createXmlHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return null ; } } var xmlhttp = null; var baseTime = new Date(); var c = 0; function query(flg) { var sword = document.getElementById('sword' ).value; var keyword = encodeURI(sword); var elapsed = parseInt((new Date()).getTime() - baseTime.getTime()); baseTime = new Date(); if (elapsed < 200) { return; } if (!xmlhttp) xmlhttp = createXmlHttpRequest(); if (!xmlhttp || xmlhttp.readyState == 1 || xmlhttp.readyState == 2 || xmlhttp.readyState == 3) { return; } if (keyword_save != keyword) { xmlhttp.open( "GET", "search-ajax.php?sword=" + keyword, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById( "hiddenresult").innerHTML = xmlhttp.responseText; } } xmlhttp.send( null) keyword_save = keyword; } } window.onload = function() { var sword = document.getElementById("sword" ); if (sword.addEventListener) { sword.addEventListener( "keyup", query, false ) } else { sword.attachEvent( "onkeyup", query); } setInterval( "query('1')", 300); } </script> <!-- ページングのスクリプト --> <script type="text/javascript"> $( function() { function pageselectCallback(page_index, jq){ var new_content = $('#hiddenresult div.result:eq(' +page_index+')').clone(); $( '#res').empty().append(new_content); return false ; } function initPagination() { var num_entries = $('#hiddenresult div.result' ).length; // Create pagination element $( "#Pagination").pagination(num_entries, { num_edge_entries: 2, num_display_entries: 8, callback: pageselectCallback, items_per_page:1 }); } $( function(){ initPagination(); }); }); </script >

  • 「ポタン」で表示・非表示 (つづき)(^^;

    「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか?　よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>

  • 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>

  • responseTextでエラーが出ます

    下記プログラムがIEアクセスでエラーが出ます。 サーバ環境はdebianでapache2を使用しています。 エラーの内容はIEのステータスバーにエラーマークが 出るだけですが、同じdebian環境の別サーバではちゃんと 動作します。 また、winXPにインストールしたapache2でもちゃんと動きます。 同じdebian環境という事でapacheのコンフィグファイルなども調べてみましたが、全くだめでした。 何か考えられる事があるようでしたらどなたかお教えいただけないでしょうか？ ちなみにapacheのエラーログは吐かれていませんでした。 う～～～ん。謎です。 ********[ index.html ]********** <HTML> <HEAD> <TITLE>Ajax Sample1</TITLE> <script language="javascript"> <!-- function AjaxSample1() { var xmlhttp = false; try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlhttp = false; } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } if (xmlhttp) { xmlhttp.open('GET', 'read.txt',true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var disp = document.getElementById('disp'); disp.innerHTML=xmlhttp.responseText; } } xmlhttp.send(null); } } --> </script> </HEAD> <BODY> <a href="javascript:void(0);" onclick="AjaxSample1();">XMLHTTP読み込み</a> <div id="disp"></div> </BODY> </HTML> **********[ read.txt ]**************** <font color="red">Sample1</font><br /> <font color="blue">Sample2</font><br /> ***************************************

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する