![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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
以上、よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
せっかくのAJAXなんだから、非同期にしちゃだめなんですか。
たぶん
sendRequest(xmlhttp, "POST", "test.php", true, null, getResult);
じゃないかと....
ご回答ありがとうございます。
Ajaxを使用するのが初めてで、
同期、非同期に関する動作を設定できることが勉強できていませんでした。
ご指摘どおり、falseをtrue設定にし、非同期処理にしたところ、
問題が解決致しました。
初歩的なことであったとは思いますが、
ご回答して頂き、ありがとうございました。
以上です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
正規表現で、特定の文字列を含...
-
VBA
-
入力フォームの値をQRコードで...
-
二つのbxsliderをレスポンシブ...
-
Base64に変換したHTMLの<script...
-
スライドを最後の画像で止めたい
-
GASでスプレッドシートの一番上...
-
RPA(PowerAutomate)の実装について
-
c言語でペイントミノ
-
グーグルディスカバー ログイン...
-
エクセルVBAでサイトログイン
-
英語でなんて書いてあるかわか...
-
ExcelでA1から下に 1番 2 3 . ....
-
サーバーとルーターでどこまで...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Response.Write(変数)
-
ajaxでhtmlを返して画面に描画…...
-
データ受け渡しについて
-
【Ajax】改行を含めたデータを...
-
HTMLでリアルタイムグラフを作...
-
Jqueryのキャッシュについて
-
AjaxでDBと連携した動的リスト...
-
カンマ&日本語を含むCSVを配列...
-
Rを使う際、データを読み込む時...
-
Ajaxでpostした内容のresponse...
-
大量のデータを表として展開す...
-
jQueryの$.postの戻り値による...
-
【JavaScript】confirmのボタン...
-
saved from url=(0013)abou
-
DirectXとOpenGLはどちらが動作...
-
HTMLでDBからデータを表形式で...
-
[JavaScript] preven...
-
ASP.NET(VB)VBソースからJavas...
-
リンクを押すとEXEファイルを実...
-
JQuery サーバー上にアップする...
おすすめ情報