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

以上、よろしくお願い致します。

No.1 ベストアンサー 回答者： yyr446 回答日時： 2010/08/13 14:01

せっかくのAJAXなんだから、非同期にしちゃだめなんですか。

たぶん

sendRequest(xmlhttp, "POST", "test.php", true, null, getResult);

じゃないかと....

この回答へのお礼

ご回答ありがとうございます。

Ajaxを使用するのが初めてで、
同期、非同期に関する動作を設定できることが勉強できていませんでした。
ご指摘どおり、falseをtrue設定にし、非同期処理にしたところ、
問題が解決致しました。

初歩的なことであったとは思いますが、
ご回答して頂き、ありがとうございました。

以上です。

お礼日時：2010/08/13 14:46