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
以上、よろしくお願い致します。
