Search

jQuery APIリファレンス非同期通信：Ajaxイベント

  1. ajaxComplete(callback)〔Ajaxリクエストの完了時に実行する関数を指定〕
  2. ajaxError(callback)〔Ajaxリクエストが失敗した時に実行する関数を指定〕
  3. ajaxSend(callback)〔Ajaxリクエストの送信前に実行する関数を指定〕
  4. ajaxStart(callback)〔Ajaxリクエストが開始されまだアクティブになっていない時に実行する関数を指定〕
  5. ajaxStop(callback)〔Ajaxリクエストの終了時に実行する関数を指定〕
  6. ajaxSuccess(callback)〔Ajaxリクエストが成功して完了した時に実行する関数を指定〕

ajaxComplete(callback)
Ajaxリクエストの完了時に実行する関数を指定

2009/2/27

ajaxComplete(callback)　戻り値：jQuery

Ajaxリクエストが完了した時に実行する関数を指定します。 XMLHttpRequestとそのリクエストに使用した設定が、コールバック関数に引数として渡されます。

  • 第1引数callbackには、実行する関数を指定します。

    function(event, XMLHttpRequest, ajaxOptions){
    this; /* DOM要素 */
}

例：Ajaxリクエストが完了した時にメッセージを表示

$("#msg").ajaxComplete(function(request, settings){
    $(this).append("<li>リクエスト完了</li>");
});
jQuery.ajaxCompleteの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>非同期通信：Ajaxイベント：ajaxComplete(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").hide();
                /* 指定したファイルを読み込んで表示 */
                function loadData(filename){
                    $.get(filename, function(data,stat){
                        $("#res").text(filename+"の内容：<br>"+data).show();
                    });
                }
                /* Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示する */
                $("#loading").ajaxComplete(function(){
                    $(this).show();
                });
                /* Ajaxリクエスト完了時にリクエスト完了メッセージを表示する */
                $("#loading").ajaxStop(function(){
                    $(this).text("リクエスト完了");
                });
                loadData("data/data_ajax.csv");
            });
        </script>
        <style type="text/css">
            #loading { color:blue; font-size:2em; font-weight:bold; }
            #res { background-color:#fff; border:1px solid #ccc; padding:10px; height:100px; overflow:auto; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>非同期通信：Ajaxイベント：ajaxComplete(callback)の使用例 | jQuery</h1>
            <p>▼Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示し、リクエストが完了した時に読込中メッセージを非表示にします。</p>
<!-- CODE -->
            <p id="loading">読込中・・・</p>
            <div id="res"></div>
<!-- CODE / -->
        </div>
    </body>
</html>

ajaxError(callback)
Ajaxリクエストが失敗した時に実行する関数を指定

2009/2/27

ajaxError(callback)　戻り値：jQuery

Ajaxリクエストが失敗した時に実行する関数を指定します。

XMLHttpRequestとそのリクエストに使用した設定が、コールバック関数に引数として渡されます。 第3引数として渡される例外オブジェクトは、例外がリクエスト処理中に発生した場合に渡されます。

  • 第1引数callbackには、実行する関数を指定します。

    function(event, XMLHttpRequest, ajaxOptions, thrownError){
    /* thrownErrorは、エラーがキャッチされた場合だけ渡されます */
    this;  /* dom element listening */
}

例：Ajaxリクエストが失敗した時にメッセージを表示

$("#msg").ajaxError(function(event, request, settings){
    $(this).append("<li>エラーが発生したURL："+settings.url+"</li>");
});
jQuery.ajaxErrorの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>非同期通信：Ajaxイベント：ajaxError(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 指定したファイルを読み込んで表示 */
                function loadData(filename){
                    /* ファイルが存在する場合は、ファイルの内容を表示 */
                    $.get(filename, function(data,stat){
                        $("#res").html("指定したファイル「"+filename+"」の内容：<div>"+data+"</div>");
                    });
                }
                /* ファイルが存在しないなど、Ajaxリクエストでエラーが発生した場合はエラーメッセージを表示 */
                $("#msg").ajaxError(function(event, request, settings){
                    $(this).append("<li>指定したファイル「<span>"+settings.url+"</span>」は存在しません</li>");
                });
                $("#btn1").click(function(){
                    loadData("/content/demo/sample_utf-8.txt")
                });
                $("#btn2").click(function(){
                    loadData("hoge.txt")
                });
            });
        </script>
        <style type="text/css">
            li span { color:red; }
            #res { background-color:#333; color:#fff; padding:10px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>非同期通信：Ajaxイベント：ajaxError(callback)の使用例 | jQuery</h1>
            <p>▼Ajaxリクエストが失敗した時にメッセージを表示します。</p>
<!-- CODE -->
            <p>
                <button id="btn1">存在するファイル（"/content/demo/sample_utf-8.txt"）を読込</button>
                <button id="btn2">存在しないファイル（"hoge.txt"）を読込</button>
            </p>
            <ul id="msg"></ul>
            <div id="res"></div>
<!-- CODE / -->
        </div>
    </body>
</html>

ajaxSend(callback)
Ajaxリクエストの送信前に実行する関数を指定

2009/2/27

ajaxSend(callback)　戻り値：jQuery

Ajaxリクエストが送信される前に実行する関数を指定します。

XMLHttpRequestとそのリクエストに使用された設定が、コールバック関数似引数として渡されます。

  • 第1引数callbackには、実行する関数を指定します。

    function(event, XMLHttpRequest, ajaxOptions){
    this; /* dom element listening */
}

例：Ajaxリクエストが送信される前にメッセージを表示

$("#msg").ajaxSend(function(evt, request, settings){
    $(this).append("<li>リクエスト開始："+settings.url+"</li>");
});
jQuery.ajaxSendの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>非同期通信：Ajaxイベント：ajaxSend(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").hide();
                /* 指定したファイルを読み込んで表示 */
                function loadData(filename){
                    $.get(filename, function(data,stat){
                        $("#res").text(filename+"の内容：<br>"+data).show();
                    });
                }
                /* Ajaxリクエストが開始される前にメッセージを表示する */
                $("#mes").ajaxSend(function(eve, request, settings){
                     $(this).append("<li>リクエスト開始："+settings.url+"</li>");
                });
                /* Ajaxリクエスト終了時にメッセージを表示する */
                $("#mes").ajaxStop(function(){
                     $(this).append("<li>リクエスト終了</li>");
                });
                loadData("data/data_ajax.csv");
            });
        </script>
        <style type="text/css">
            #mes { color:blue; font-size:2em; font-weight:bold; }
            #res { background-color:#fff; border:1px solid #ccc; padding:10px; height:100px; overflow:auto; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>非同期通信：Ajaxイベント：ajaxSend(callback)の使用例 | jQuery</h1>
            <p>▼Ajaxリクエストが開始前と終了時にメッセージを表示にします。</p>
<!-- CODE -->
            <ul id="mes"></ul>
            <div id="res"></div>
<!-- CODE / -->
        </div>
    </body>
</html>

ajaxStart(callback)
Ajaxリクエストが開始されまだアクティブになっていない時に実行する関数を指定

2009/2/27

ajaxStart(callback)　戻り値：jQuery

Ajaxリクエストが開始されまだアクティブになっていない時に実行する関数を指定します。

  • 第1引数callbackには、実行する関数を指定します。

    function(){
    this; /* dom element listening */
}

例：Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示

$("#loading").ajaxStart(function(){
    $(this).show();
});
jQuery.ajaxStartの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>非同期通信：Ajaxイベント：ajaxStart(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").hide();
                /* 指定したファイルを読み込んで表示 */
                function loadData(filename){
                    $.get(filename, function(data,stat){
                        $("#res").text(filename+"の内容：<br>"+data).show();
                    });
                }
                /* Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示する */
                $("#loading").ajaxStart(function(){
                    $(this).show();
                });
                /* Ajaxリクエスト終了時に読込中メッセージを非表示にする */
                $("#loading").ajaxStop(function(){
                    $(this).hide();
                });
                loadData("data/data_ajax.csv");
            });
        </script>
        <style type="text/css">
            #loading { color:blue; font-size:2em; font-weight:bold; }
            #res { background-color:#fff; border:1px solid #ccc; padding:10px; height:100px; overflow:auto; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>非同期通信：Ajaxイベント：ajaxStart(callback)の使用例 | jQuery</h1>
            <p>▼Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示し、リクエストが完了した時に読込中メッセージを非表示にします。</p>
<!-- CODE -->
            <p id="loading">読込中・・・</p>
            <div id="res"></div>
<!-- CODE / -->
        </div>
    </body>
</html>

ajaxStop(callback)
Ajaxリクエストの終了時に実行する関数を指定

2009/2/27

ajaxStop(callback)　戻り値：jQuery

Ajaxリクエストが終了した時に実行する関数を指定します。

  • 第1引数callbackには、実行する関数を指定します。

    function(){
    this; /* dom element listening */
}

例：すべてのAjaxリクエストが終了した時に読込中メッセージを非表示にする

$("#loading").ajaxStop(function(){
    $(this).hide();
});
jQuery.ajaxStopの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>非同期通信：Ajaxイベント：ajaxStop(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").hide();
                /* 指定したファイルを読み込んで表示 */
                function loadData(filename){
                    $.get(filename, function(data,stat){
                        $("#res").text(filename+"の内容：<br>"+data).show();
                    });
                }
                /* Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示する */
                $("#loading").ajaxStop(function(){
                    $(this).show();
                });
                /* Ajaxリクエスト終了時に読込中メッセージを非表示にする */
                $("#loading").ajaxStop(function(){
                    $(this).hide();
                });
                loadData("data/data_ajax.csv");
            });
        </script>
        <style type="text/css">
            #loading { color:blue; font-size:2em; font-weight:bold; }
            #res { background-color:#fff; border:1px solid #ccc; padding:10px; height:100px; overflow:auto; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>非同期通信：Ajaxイベント：ajaxStop(callback)の使用例 | jQuery</h1>
            <p>▼Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示し、リクエストが終了した時に読込中メッセージを非表示にします。</p>
<!-- CODE -->
            <p id="loading">読込中・・・</p>
            <div id="res"></div>
<!-- CODE / -->
        </div>
    </body>
</html>

ajaxSuccess(callback)
Ajaxリクエストが成功して完了した時に実行する関数を指定

2009/2/27

ajaxSuccess(callback)　戻り値：jQuery

Ajaxリクエストが成功して完了した時に実行する関数を指定します。

イベントオブジェクト、XMLHttpRequest、そのリクエストに使用した設定が、コールバック関数に引数として渡されます。

  • 第1引数callbackには、実行する関数を指定します。

    function(){
    this; /* dom element listening */
}

例：すべてのAjaxリクエストが成功して完了した時にメッセージを表示

$("#loading").ajaxSuccess(function(evt, request, settings){
    $(this).append("<li>リクエスト成功！</li>");
});
jQuery.ajaxSuccessの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>非同期通信：Ajaxイベント：ajaxSuccess(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").hide();
                /* 指定したファイルを読み込んで表示 */
                function loadData(filename){
                    $.get(filename, function(data,stat){
                        $("#res").text(filename+"の内容：<br>"+data).show();
                    });
                }
                /* Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示する */
                $("#loading").ajaxSuccess(function(){
                    $(this).show();
                });
                /* Ajaxリクエストが成功して完了した時にリクエスト成功メッセージを表示する */
                $("#loading").ajaxSuccess(function(eve, request, settings){
                    $(this).text("リクエスト成功："+settings.url);
                });
                loadData("data/data_ajax.csv");
            });
        </script>
        <style type="text/css">
            #loading { color:blue; font-size:2em; font-weight:bold; }
            #res { background-color:#fff; border:1px solid #ccc; padding:10px; height:100px; overflow:auto; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>非同期通信：Ajaxイベント：ajaxSuccess(callback)の使用例 | jQuery</h1>
            <p>▼Ajaxリクエストが開始されまだアクティブになっていない時に読込中メッセージを表示し、リクエストが成功して完了した時にリクエスト完了メッセージを表示にします。</p>
<!-- CODE -->
            <p id="loading">読込中・・・</p>
            <div id="res"></div>
<!-- CODE / -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women