[程式][JQuery] 讓AJAX運作的時候，跳出loding的訊息。－Part 1－四處流浪的阿基。I am Vagrant Walker

JQuery中基本的AJAX教學請參考：http://expect7.pixnet.net/blog/post/37919326
如果有需要loding中的圖示請參考：http://expect7.pixnet.net/blog/post/39827699
範例程式下載：http://www.megaupload.com/?d=QB8F68VI

其實讓畫面顯示正在處理中並沒有太複雜，只要你對於基本的JQuery AJAX有點了解就可以寫出來了。

他的關鍵是在於JQuery AJAX 中的complete，beforeSend這兩個參數。
complete：請求完成時執行的函式(不論結果是success或error)。
beforeSend：發送請求之前會執行的函式。

以下就是範例

index.html

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script>
        var Submit=function(){
            var URLs="back.php";

            $.ajax({
                url: URLs,
                data: $('#sentToBack').serialize(),
                type:"POST",
                dataType:'text',
                success: function(msg){
                    alert(msg);
                },
                beforeSend:function(){
                    $('#loadingIMG').show();
                },
                complete:function(){
                    $('#loadingIMG').hide();
                },
                error:function(xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }

        </script>
    </head>
    <body>
     <form id="sentToBack">
            <input type="text" name="Text"/>
            <input type="button" value="送出" onClick="Submit()"/>
        </form>
        <div id="loadingIMG" style="display:none"><img src="loading.gif" height='14'/>資料處理中，請稍後。</div>
    </body>
</html>

一開始把loadingIMG設定為不可被看見(隱藏)，當你按下送出按鈕後，他會去執行Submit()的函數。其後執行ajax的運作。
當他開始運作的時候，會先去執行beforeSend裡面的function，這時會把loadingIMG顯示出來($('#loadingIMG').show();)，當執行完成之後，不論是成功或是有錯誤，都會去執行complete，在去把loadingIMG隱藏起來($('#loadingIMG').hide();)。

如果要測試的話，可以在這個範例的back.php中寫入sleep(10)，讓這支PHP休息10秒再繼續執行，這樣就能看到明顯的效果了。

<?php

sleep(5);
echo "dd";

?>

後記：我還有寫一篇相關的，可以參考－ http://expect7.pixnet.net/blog/post/44966959