AJAX通信で初めから送信する方法
- AJAX通信を使用してボタンをクリックせずに初めから送信する方法を紹介します。
- ページを開いた時点で検索結果ページをデフォルトで表示させる方法についての情報を探しています。
- addEventListenerを使用する場合やAJAX通信との絡みで画面がチラツク場合の対処方法についても知りたいです。
- ベストアンサー
AJAX通信で、ボタンをクリックせずに初めから送信
CSVをAJAX通信で読み込むサンプルがあります(jQuery未試用) ボタンをクリックすると検索するのですが、 ページを開いた時点で、何らかの検索結果ページをデフォルトで表示させるにはどうしたら良いでしょうか？ ＜コード抜粋＞ <script type="text/javascript" src="xmlhttp.js"></script> <body onLoad="loadTextFile(hoge) <form name="ajaxForm" onSubmit="output_result(); return false"> ＜試したけどうまくいかなかったこと＞ <body onLoad="loadTextFile(hoge);output_result(); ・addEventListenerを使うのでしょうか？ ・それは、headタグ内に書くのでしょうか？ ・AJAX通信との絡みからか画面がチラツク場合があるのですが、読み込む順番か何か注意すべきことはあるのでしょうか？
- re999
- お礼率61% (476/777)
- AJAX
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
xmlhttp.jsの中身を見ないと何とも言えないのですが、おそらくloadTextFile()関数の中では、ファイルを非同期で読み込んでいるのでしょうね。 そして、まだファイルの読み込みが終了していない時点でoutput_result()が呼び出されてしまい、データは空っぽの状態のまま、出力処理が行われてしまう、と。 loadTextFile()関数の実装を同期に変更するか、非同期でロード完了後にoutput_result();が呼ばれるように変更するか、というところでしょう。 同期に変更すると、ロードが終わるまでは画面が操作できなくなります。 その方が良いのか、とりあえず操作はできるようにした方が良いのかは、画面が求める仕様によります。 これ以上の具体的なことは、xmlhttp.jsのソースを見ないことには、何とも言えません。
関連するQ&A
- 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
- ajax通信の戻り値が空になる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.xdomainajax.js"></script> <!-- 追加 --> <script type="text/javascript"> $.ajax( { url: URL, type: 'GET', cache: false, dataType: 'xml' } ) .done(function(res) { console.log(res); } ) .fail(function(res) { console.log('FAIL') } ); </script> </head> 上記のコードの通り（url部分は明記を省略）、jquery.xdomainajax.jsを用いたajax通信を行いたいのですが、通信は成功しているもののコンソールを見ると以下のようになっています。 Object { query: Object, results: Array[0] } 本来ならresultsの部分に返り値が格納されるのですが、空になってしまいます。 なにか原因があればご教授頂きたいです。よろしくお願い致します。
- 締切済み
- AJAX
- Ajaxを使った読み込みができない
●質問の主旨 Ajax（非同期通信）を使って、 ブラウザ上でテキストファイルの読み込みを させたいのですが、できません。 Ajaxにお詳しい方、ご指導願います。 ●質問の補足 HTML5とjqueryの技術を使って、 テキストファイルの中身（Hello,World)の 読み込みをさせたいと考えております。 参考サイトにもとづいてやってますが、 画像の表示ができません。 表示させるためにはどうしたら良いでしょうか？ ●コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryの練習</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQueryの練習</h1> <div id="main"></div> <input type="button" id="kick_ajax" value="Ajax!"> <script> $(function() { $('#kick_ajax').click(function() { $('#main').load('contents.txt', function() { alert('読み込み終了！'); }); }); }); </script> </body> </html> ●テキストファイルのファイル名 contents.txt ●参考サイト（ドットインストール） http://dotinstall.com/lessons/basic_jquery/519
- ベストアンサー
- AJAX
- innerHTMLで表示完了後に、Ajaxにて通信を実施
innerHTMLで表示完了後に、Ajaxにて通信を実施 お世話になります。 現在、PHP + Ajax + MySQLでWebアプリケーションを作成中です。 読み込みが既に完了した画面から、 あるイベントにてAjax + PHPにてMySQLからデータを取得し、 その結果を受け取り、innerHTMLにて動的に結果を表示させています。 問題となっているのは、 MySQLからデータを取得するのに時間がかかり、 ２、３秒ほど画面が固まった状態となるため、その対策を実施したいのですが 思うように実現できておりません。 実現したいことは、MySQLからデータを取得する前に、innerHTMLで あらかじめ『しばらくお待ち下さい』のようなメッセージを表示したいのですが 表示される前にMySQLからデータを取得する処理が開始され、 『しばらくお待ち下さい』が表示されません。 以下の方法では、表示されるようです。 (1)メッセージとデータ取得処理の間に確認ダイアログを表示させる。 (2)ウェイト処理を実施 できれば、innerHTMLにて表示が完了されてから、すぐに Ajaxにて通信が開始されるような方法を探しているのですが、 何か方法はありませんでしょうか。 （そもそも、ＤＢからデータを取得する時間にかかりすぎている点は、 今後も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
- AJAXとSEO。同期通信とPHP送信の違い
「AJAX」「SEO」「同期通信」「PHPでPOST送信」について、幾つか分からないことがあるので教えてください ■質問1 ・AJAX通信すると、SEO的に不利なのでしょうか？ 例えば、AJAXでCSVファイルを読み込む場合はどうなるでしょうか？ もしかして、実装方法による？ 下記例で、何か違いはあるでしょうか？ ・例1 … 非同期。ページ読込後にCSV読込(そもそもこの実装は可能？) ・例2 … 非同期。ページ読込前にCSV読込 ・例3 … 同期。ページ読込後にCSV読込 ・例4 … 同期。ページ読込前にCSV読込 ■質問2 ・AJAX通信で検索ボタンを押したページ結果は、クローラーされることはあるのでしょうか？ サーバからデータを取得しているから反映される？ 非同期だったら、反映されない？ 同期だったらされる？ ■質問3 ・AJAX通信の同期処理の意味が分かりません(jQueryのasyncをfalseなど)。非同期通信がAJAXだと思うのですが、AJAX通信の同期処理というのは、何なのでしょうか？ 例えば、「PHPでPOST送信」するのと、原理的には全く同じということになるのでしょうか？(PHPで実装するか、js実装するかの違いだけ？) 最終的に、SEOを重視する場合は(非同期の操作性を捨て)同期処理で実装した方が良い、ということになるのでしょうか？
- ベストアンサー
- AJAX
- ASP.NETでAjax通信する際について
はじめまして。 ASP.NET MVC3を使用して WEB画面で1つのテキストボックスに値を入れ検索ボタンを押した時に その値をキーに該当するデータをメッセージ画面として出力。 該当するデータがなければ「該当データがありません。」のメッセージを 表示する処理の簡単な検証しており以下のように記述しています。 ＜View側の処理＞ ---------------------------------------------------------------------------------- <html> <head> <title>Form</title> <!--Ajax通信に必要なスクリプトをインポート--> <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script type="text/javascript" language ="javascript"> // 非同期通信の成功時に呼び出されるイベント・ハンドラ function disp(context) { var data = context.get_data(); if (data == "") { // データが返されなかった場合は、その旨をメッセージ表示 window.alert("該当するデータがありません。"); } else { // データが正しく返された場合のみ、検索結果をダイアログ表示 var result = eval("(" + context.get_data() + ")"); var builder = new Sys.StringBuilder(); builder.append("タイトル：" + result.title); window.alert(builder.toString("\r")); } } </script> </head> <body> <div> @using(Ajax.BeginForm( "Search", new AjaxOptions {OnSuccess = "disp"})){ @Html.TextBox("isbn", "") <input type="submit" value="検索" /> } </div> </body> </html> --------------------------------------------------------------------------------- ＜サーバ側の処理＞ ---------------------------------------------------------------------------------- public ActionResult Form() { return View(); } //［検索］ボタンのクリック時に呼び出され、検索処理を実行 public ActionResult Search(String isbn) { // リクエストがAjax通信（非同期通信）である場合のみ検索を実行 if (Request.IsAjaxRequest()) { var _db = new MyMvcEntities(); var bok = (from b in _db.Book where b.isbn == isbn select new { b.title }).FirstOrDefault(); return Json(bok); } else { // リクエストがAjax通信以外の場合、何もしない return new EmptyResult(); } } } ---------------------------------------------------------------------------------- submit実行時にサーバ側でキーを取得しAjax通信が成功した場合は ビュー側に記載しているDisp関数により取得値の出力を行う想定ですがここで var data = context.get_data();と定義し Sys.Mvc.AjaxContextオブジェクトのdataプロパティより応答文字列を取得しようと すると「オブジェクトは 'get_data' プロパティまたはメソッドをサポートしていません。」 のメッセージが出力され処理が中断します。 実際にget_dataのインテリセンス機能が働きません。 どうすればAjax通信の応答文字列が取得できるか教授お願いします。
- ベストアンサー
- Microsoft ASP
- 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
- 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 >
- 締切済み
- AJAX
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- 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
お礼
回答ありがとうございました。 ＞ファイルの読み込みが終了していない時点でoutput_result()が呼び出されてしまい、データは空っぽの状態のまま、出力処理が行われてしまう 基準となる点は、ページ読み込み時ではなく、ファイル読込終了時点なんですね。 if ((httpObj.readyState == 4) && (httpObj.status == 200))と書いている場所があったので、 その下で関数を呼び出したら、無事にデフォ表示されるようになりました。 大変参考になりましたー