jquery ajaxStartメソッド

TOPページに戻る > jquery入門

スポンサード リンク

ajaxイベント

Ajax送信に関係するイベント。送信開始から完了時までに実行する処理です
実際に使うときは、load画面などを作るときに利用できます

jquery ajaxStart()メソッド

ajaxStartメソッドは、Ajaxの送信開始に処理を実行するメソッドです
サーバー情報を送る前に処理を実行します

$("セレクタ").ajaxStart(function(){
	送信開始に処理を実行する
});

ajaxSend()メソッド

ajaxajaxSendメソッドは、Ajaxの送信前に処理を実行するメソッドです
サーバー情報を送る前に処理を実行します

$("セレクタ").ajaxSend(function(){
	サーバー送信前に処理を実行する
});

ajaxSuccess()メソッド

ajaxSuccessメソッドは、Ajaxの送信成功時に処理を実行するメソッドです
サーバー情報を送った後に処理を実行します

$("セレクタ").ajaxSend(function(){
	送信成功時に処理を実行する
});

ajaxError()メソッド

ajaxErrorメソッドは、Ajaxの送信エラー時に処理を実行するメソッドです
サーバー情報を送った後に処理を実行します

$("セレクタ").ajaxError(function(){
	エラー時に処理を実行する
});

ajaxComplete()メソッド

ajaxCompleteメソッドは、Ajaxの送信完了時に処理を実行する(送信の成功/失敗にかかわらず実行される)メソッドです
サーバー情報を送った後に処理を実行します

$("セレクタ").ajaxComplete(function(){
	送信完了時に成功/失敗にかかわらず処理を実行する
});

ajaxStop()メソッド

ajaxStopメソッドは、Ajaxの送信完了時に処理を実行する(一番最後に実行する)メソッドです
サーバー情報を送った後に処理を実行します

$("セレクタ").ajaxStop(function(){
	送信完了時に処理を実行する
});

ロード画面を作る

ローディング画像を作って、Ajaxの送信完了するまで表示させます(今回はアニメーションgifを使っていますがローディング待ちのときに表示するものはテキストでもflashでもなんでもいいです)
今回はローディング画像をみやすくするため存在しないファイルを指定しています。
とりあえず、ローディング画像を隠します。ボタンをクリックしたときにhoge2.txtをロードします。通信が開始したらローディング画像を表示します
※ロードが早すぎて見えないので処理を変えてあります。実際に使う時はajaxStopの処理はshow()からhide()に変更し、ajaxError()メソッドを使ってエラー処理を入れます

jquery

$(function() {
	$("#foo").hide();
	$("button").click(function(){
	$("#hoge").load("./hoge2.txt");
	});
	
	 $("#foo").ajaxStart(function(){
               $(this).show();
            })
            .ajaxStop(function(){
               $(this).show();
            });
});

ちなみにエラー処理はこんなかんじです。チェーンメソッドで連結します

            .ajaxError(function(){
               $(this).text("通信に失敗しました");
            })
css
#hoge{
 border: solid 1px;
 width: 250px;
 height: 250px;
 }

html

<div id="hoge"><img src="loading.gif" alt="" width="32" height="32" id="foo"></div>
<button>textファイルを読み込む</button>

サンプル







(C)2012 ホームページ作成無料