AjaxでPHPに通信がうまくいかない理由と解決方法

このQ&Aのポイント
  • Ajaxを使用してPHPへの通信がうまくいかない問題が発生しています。
  • ネット上のサンプルを試したがうまくいかない状況です。
  • 問題はサーバーの設定に関係している可能性があります。
回答を見る
  • ベストアンサー

AjaxでPHPに通信(変数データ)がうまくいきません。

ご指導よろしくお願いいたします。 現在Ajaxを勉強中なのですが、 html側のフォームから、PHPへの通信ができていないようなのです。 自分でプログラムのソースを何度も見直したりして、実行したのですが うまくいきません。 それで、ネット上にあるAjaxのサンプルをいくつか自サーバーで試してみたのですが、やはりうまくいきませんでした。 下記はあるサンプルのソースです。 -------------------------------------------- //yahoo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Yahoo! ウェブ検索Webサービス</title> <script language="JavaScript"> //<![CDATA[ // [送信]ボタンをクリック時の処理を定義 function search() { // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成 try { xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlReq = new XMLHttpRequest(); } // サーバーからの応答時の処理を定義(結果をページへ反映) xmlReq.onreadystatechange = function() { var msg = document.getElementById("result"); if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { var ctt=""; var xmldoc=xmlReq.responseXML.documentElement; var nodes=xmldoc.childNodes; if(nodes.length==0){ ctt="お探しのサイトは見つかりませんでした。"; } else { for (i =0; i < nodes.length; i++) { var node=nodes.item(i); ctt += "<li><a target='_blank' href='" + getNodeValue(node, "Url") + "'>" + getNodeValue(node, "Title") + "</a></li>" } } msg.innerHTML=ctt; } else { msg.innerHTML="通信に失敗しました。"; } } else { msg.innerHTML="通信中…"; } } // サーバーとの通信を開始 xmlReq.open("GET","yahoo.php?keyword=" + encodeURI(document.fm.keyword.value), true); xmlReq.send(null); } // ノードcurrent配下に含まれる要素nameのテキスト値を取得する関数 function getNodeValue(current ,name){ var nodes=current.getElementsByTagName(name); var node=nodes.item(0); var txtNode=node.firstChild; return txtNode.nodeValue; } //]]> </script> </head> <body> <form name="fm"> キーワード: <input type="text" name="keyword" size="15" maxlength="30" /> <input type="button" value="検索" onClick="search()" /> <hr /> <ol type="1"> <div id="result" /> </ol> </form> </body> </html> -------------------------------------------- -------------------------------------------- //yahoo.php <?php // 出力/内部文字コードをUTF-8に設定 mb_http_output('UTF-8'); mb_internal_encoding('UTF-8'); header('Content-Type: text/xml;charset=UTF-8'); $url ='http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?'; $url.='appid=○○○&query=' .urlencode(mb_convert_encoding($_GET['keyword'],'UTF-8','auto')) .'&'.'result=15'; print(file_get_contents($url)); ?> -------------------------------------------- 上記のhtmlのフォームから文字を入力して実行すると、 "通信中…" と表示されつづけてしまって、PHP側からのデータが帰ってこないのです。 ちなみに、直接キーワードを含んだパラメーターを渡してあげると、 正常にデータが返って来ます。 他のサンプルも同じような挙動をします。 サーバーの問題なのでしょうか? ここ2~3日、プログラムとにらめっこしながら、 ネットにて、解決策を模索していたのですが、ちから尽きてしまいました。 -------------------------------------------- //サーバー環境 ハッスルサーバー(さくら系列) PHP 4.3(CGIモード) -------------------------------------------- どなたかご指導のほど、よろしくお願いいたします。

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

  • ベストアンサー
  • haraga
  • ベストアンサー率56% (36/64)
回答No.1

解決策を考えるよりデバッグ方法を簡単にしましょうよ。 1 //yahoo.php を <?php mb_http_output('UTF-8'); mb_internal_encoding('UTF-8'); header('Content-Type: text/xml;charset=UTF-8'); print "<?xml version='1.0' encoding='UTF-8'?>\n";//必要です print "<kekka>\n"; print "<tes>1番目</tes>\n"; print "<tes>2番目</tes>\n"; print "</kekka>\n"; ?> にして, サーバーとの通信を開始のところを var xmlurl='http://******/yahoo.php'; xmlReq.open("GET",xmlurl, true); 注:yahoo.phpとyahoo.htmlは同じドメインでなければなりません。(他サイトへリクエストはできません) open文のxmlurlは予め演算しておいた方が間違いない(経験から) 応答時の処理を定義を var xmldoc=rpq.responseXML; var tesitem = xmldoc.documentElement.getElementsByTagName("tes"); alert(tesitem.length); に変更してリクエストの疎通を確認しませんか?

neohiro
質問者

お礼

haragaさん、ご指導ありがとうございました。

その他の回答 (1)

  • haraga
  • ベストアンサー率56% (36/64)
回答No.2

#1です間違えました var xmldoc=xmlReq.responseXML;//rpq->xmlReq

関連するQ&A

  • ajaxでページ全体がコピーされてしまいます。

    http://itpro.nikkeibp.co.jp/article/COLUMN/20060525/239029/?ST=develop こちらの記事のサンプルをコピーして試してみたのですが、画像添付のようにページ全体のコピー?が追加されてしまいます。なぜ記事通りにいかず、このような結果になってしまうのでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>書籍検索</title> <script language="JavaScript"> <!-- // [送信]ボタンをクリック時の処理を定義 function send() { // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成 try { xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlReq = new XMLHttpRequest(); } // サーバーからの応答時の処理を定義(結果のページへの反映) xmlReq.onreadystatechange = function() { var msg = document.getElementById("result"); if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { msg.innerHTML = xmlReq.responseText; } else { msg.innerHTML = "通信に失敗しました。"; } } else { msg.innerHTML = "通信中…"; } } // サーバーとの通信を開始 xmlReq.open("GET","2.php?isbn=" + encodeURI(document.fm.isbn.value),true); xmlReq.send(null); } //--> </script> </head> <body> <form name="fm"> ISBNコード: <input type="text" name="isbn" size="30" /> <input type="button" value="送信" onclick="send()" /> <div id="result" /> </form> <?php // 出力/内部文字コードをUTF-8に設定 mb_http_output('UTF-8'); mb_internal_encoding('UTF-8'); /* 入力されたISBNコードをキーに対応する書名($result)を取得。 通常のアプリケーションでは、ここでデータベースへの検索処理などを行う */ switch($_GET['isbn']){ case '4-7981-1070-1' : $result='XMLデータベース入門 NeoCore/XprioriでXMLDBを極める!'; break; case '4-88337-491-2' : $result='書き込み式 SQLのドリル?ドンドン身に付く、スラスラ書ける'; break; case '4-7980-1270-X' : $result='Pocket詳解PHP辞典'; break; default : $result='不明'; } sleep(3); // 3秒休止(待ち時間を体感するためのダミー) print($result); // 取得した結果を出力 ?> </body> </html>

    • ベストアンサー
    • AJAX
  • ajaxが難しいです。

    1 if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか? その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか? 2 下記の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生成という事ですか?

  • innerHTMLで表示完了後に、Ajaxにて通信を実施

    innerHTMLで表示完了後に、Ajaxにて通信を実施 お世話になります。 現在、PHP + Ajax + MySQLでWebアプリケーションを作成中です。 読み込みが既に完了した画面から、 あるイベントにてAjax + PHPにてMySQLからデータを取得し、 その結果を受け取り、innerHTMLにて動的に結果を表示させています。 問題となっているのは、 MySQLからデータを取得するのに時間がかかり、 2、3秒ほど画面が固まった状態となるため、その対策を実施したいのですが 思うように実現できておりません。 実現したいことは、MySQLからデータを取得する前に、innerHTMLで あらかじめ『しばらくお待ち下さい』のようなメッセージを表示したいのですが 表示される前にMySQLからデータを取得する処理が開始され、 『しばらくお待ち下さい』が表示されません。 以下の方法では、表示されるようです。 (1)メッセージとデータ取得処理の間に確認ダイアログを表示させる。 (2)ウェイト処理を実施 できれば、innerHTMLにて表示が完了されてから、すぐに Ajaxにて通信が開始されるような方法を探しているのですが、 何か方法はありませんでしょうか。 (そもそも、DBからデータを取得する時間にかかりすぎている点は、 今後もSQL文を見直すなど、対策はしたいと考えております。) 少しでもご存知の方がいらっしゃいましたら、 ご教授よろしくお願い致します。 以下に、動作させているイベントを記載致します。 //呼び出されるイベント function test() { var result = document.getElementById("result"); result.innerHTML = "<p>しばらくお待ち下さい...</p>"; //↑↑これが表示されてから、以下の通信を実行させたいのですが、表示されません。 //ここにウェイトするような処理がある場合は、表示されます。 //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } //サーバに要求 sendRequest(xmlhttp, "POST", "test.php", false, null, getResult); return; } //サーバからの応答をxmlhttpにて受信 function getResult(xmlhttp) { //サーバから出力された文字列をinnerHTMLにて出力 var result = document.getElementById("result"); result.innerHTML = xmlhttp.responseText; return; } 【環境】 ブラウザ:IE8 PHP:5.2 以上、よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • jquery,ajaxによるphp通信でnull

    初めまして。 現在jqueryを勉強中の学生です。 いろいろなサイトを参考にしつつ、試しににjquery・ajaxを使ったphpとの通信を試みているのですが、文字列のやりとりがうまくいきません。 数字ではうまくいくのですが、文字になるとalertの部分でnullと返されてしまいます。 アドバイス等頂ければと思います。 よろしくお願いいたします。 以下部分的ではありますがコードを示します。 (jqueryはjquery-1.11.1.min.jsを使用) [js] $.ajax({ type: "POST", url: "step1.php", data: send_data, success: function(receive_data) { var parseAr = JSON.parse(receive_data); alert(parseAr[0]['name']); }, error: function(XMLHttpRequest, textStatus, errorThrown) {alert('Error: ' + errorThrown); } }); return false; [php側] <?php if(isset($_POST['name'])) { $result = array(); $result[] = array('name'=>'織田', 'age'=>'33'); $result[] = array('name'=>'織田', 'age'=>'33'); echo json_encode($result); } else { echo json_encode('The parameter of "name" is not found.'); } exit; ?>

  • 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 = ""; } ---

    • ベストアンサー
    • AJAX
  • jqueryでAJAX非同期通信をしてphpからメールを送信する。送信

    jqueryでAJAX非同期通信をしてphpからメールを送信する。送信完了後にlightbox風に「送信しました」と表示させたい。 sendmail.phpにpostでフォームの内容が渡りません。どうやってsendmail.phpに値を渡して sendmail.phpの$msgを戻して、表示させるのでしょうか? 素人です。1週間ほど調べましたが、これが限界でした。 宜しくお願いします。 index.php <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#exeBtn").click(function() { $.ajax({ url : "sendmail.php", type : "post", data : ({ message: $('#message').val(),{off:$('#exeBtn').val()}), datatype:'json', success: function( dispMsg(){ if('<?=$msg?>' != ''){ alert('<?=$msg?>'); } }}, }); }); }); //]]> </script> </head> <body> <form> <input id="message" type="hidden" name="message" value="EntryTitle"/> <input id="exeBtn" type="button" name="off" value="リンク切れ" /> </form> </body> </html> sendmail.php <?php header(’Content-Type: text/xml; charset=UTF-8′); $off=$_POST["off"]; $body = stripslashes($_POST['message']); if ($off != ""){ $to = "hogehoge@hogehoge.co.jp"; $subject = "報告"; $subject=mb_convert_encoding($subject,"JIS","utf-8"); $body=mb_convert_encoding($body,"JIS","utf-8"); $ret = mb_send_mail($to,$subject,$body); if($ret){ $msg = '送信しました'; }else{ $msg = '送信失敗しました'; } } } ?>

    • ベストアンサー
    • AJAX
  • どこまでがAjaxなの?

    現在、Ajaxを勉強中の初心者です。 質問のタイトル通りなのですが、どこまでがAjaxなのかイマイチわかりません。 AjaxはJavaScript + XMLで非同期通信をする技術ですが 1.画像やプログラムファイルをサーバPC側に入れておいてクライアントPC側でラジオボタンの選択によって画像表示を変えるのはAjaxですか、それともただのJavaScriptですか? 2.サーバを使って以下のような入力可能文字カウンタを表示させるのはAjaxですか、それともただのJavaScriptですか? <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> </head> <body> <form>   <textarea cols="46" rows="5" id="title1" name="title1" size="50"></textarea><br />   あと<span id="inputlength1">20</span>文字入力できます<br /> </form>   <script type="text/javascript"><!--     function lengthCounter (node, max, cut) {       max = max || Number (node.maxLength) || 20;       return function () {         var rest = max - node.value.length;           if (rest < 0) {             if (cut) {               alert ('20文字以内にしてください');               rest = max;               node.value = node.value.substring (0, max);             }           }           return rest;       };     }     function dispValue (node, cbFunc) {       return function () {         node.firstChild.nodeValue = cbFunc ();   };     }     setInterval (dispValue ( document.getElementById ('inputlength1'),     lengthCounter (document.getElementById ('title1'), 20, true)), 100);   // --></script> </body> </html> 3.「googleサジェストのインクリメンタル検索にはAjaxの技術が利用されている」←ここでのAjaxにはPHPも含まれますか? 私はPHPをAjaxの枠には入れないような気がします。正確にはPHPとAjaxでインクリメンタル検索機能がつくられていると思うのですが。 4.PHPのみでAjaxと同じ非同期通信ができればそれはAjaxと呼ぶのか? よろしくお願いします。

    • ベストアンサー
    • AJAX
  • jQuery $.ajax JSON形式のPOST

    jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか?宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理 (省略) $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }

  • フォームから受け取ったデータを変数に/PHP

    入力フォームからデータを送信し、受け取ります。 <form action="index.php" method="post"> <input type="text" name="hoge"> <input type="submit"> </form> <?php echo htmlspecialchars($_POST['hoge']); ?> この時に受けったデータが、「りんご」だとして この「りんご」を変数にしたいです。 ↓ <?php $keyword = "りんご"; ?> このようにするには、 <form action="index.php" method="post"> <input type="text" name="hoge"> <input type="submit"> </form> <?php echo htmlspecialchars($_POST['hoge']); ?> の後にどのような処理をすればよいでしょうか? または初めから「$keyword」としてフォームからデータを送ることはできるのでしょうか? 何卒ご指導の程よろしくお願いします。

    • ベストアンサー
    • PHP
  • PHPでの変数引渡しに関して

    "HTML -> PHP1 -> PHP2"という順序で変数の引渡しを行いたいと考えております。 "HTML -> PHP1"への変数引渡しは正常なのですが、"PHP1 -> PHP2"への変数引渡しがうまくいかない状態です。 1) "HTML -> PHP1" ・HTML <form name="toroku" method="POST" action="result.phtml">  <input type="text" name="word1" size="34"></td></tr>  <input type="text" name="word2" size="34"></td></tr>  ・・・・ </form> ・PHP1(result.phtml) <? require('../include/init.inc'); $word1 = $_POST{'word1'}; $word2 = $_POST{'word2'}; $word3 = $_POST{'word3'}; $email = $_POST{'word7'}; $word8 = $_POST{'word8'}; $seireki = $_POST{'seireki'}; $tuki = $_POST{'tuki'}; $nitiji = $_POST{'nitiji'}; $result = pg_query($con, "select .........."); $rows = pg_num_rows($result); var_dump($HTTP_POST_VARS); ?> <FORM action="./result2.phtml" method="post"></FORM> ・結果 array(8) { ["word1"]=> string(6) "テスト"       ["word2"]=> string(6) "テスト"       ["word3"]=> string(6) "テスト"       ["word7"]=> string(16) "test1@test.co.jp"       ["word8"]=> string(16) "test1@test.co.jp"       ["seireki"]=> string(4) "2008"       ["tuki"]=> string(2)"01"       ["nitiji"]=> string(2) "01" } 2) "PHP1 -> PHP2" ・PHP2 <? var_dump($HTTP_POST_VARS); ?> ・結果 array(0) { } 2)でHTMLの変数を継続して渡したいのです。 ご存知のかたがいたしたら、ご教示頂ければと思います。

    • ベストアンサー
    • PHP

専門家に質問してみよう