Ниже приведены 2 примера того как можно использовать сгенерированные подгрузчики в Ваших веб-приложениях. Заметьте, что для использования данных примеров желательно начальное знание HTML и Javascript/JQuery. Если требуется, Вы также можете скачать указанные ниже примеры по следующим ссылкам:

Файлы:

1. Пример при использовании JavaScript/AJAX

Данный урок позволяет использовать подгрузчики, созданные на проекте, при помощи скрипта AJAX для подгрузки данных

КОД:

<html>    <head>        <script type="text/javascript">
            var request = createRequestObject();
            var dataReturn='';
            var ajaxTimeout='';
            var enterChecker=false;

            function createRequestObject()
            {
                var ro;
                var browser = navigator.appName;
                if(browser == 'Microsoft Internet Explorer')
                {
                    ro = new ActiveXObject('Microsoft.XMLHTTP');
                }
                else{
                    ro = new XMLHttpRequest();
                }
                return ro;
            }

            function makeRequest (url, fun)
            {
                enterChecker=false;
                request.open('get', url);
                request.onreadystatechange = function() { handleResponse(fun); }
                
                try{
                    request.send(null);
                }
                catch(err){
                    alert('Error occured: '+err);
                    showHidePreloader(false); 
                }
            }

            function makePostRequest(url, params, fun)
            {
                request.open('POST', url, true);

                //Send the proper header information along with the request
                request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                request.setRequestHeader('Content-length', params.length);
                request.setRequestHeader('Connection', 'close');

                request.onreadystatechange = function() {//Call a function when the state changes.
                    if(request.readyState == 4 && request.status == 200) {
                        dataReturn=request.responseText;
                        if(fun!='')
                            ajaxTimeout=setTimeout(fun+'()', 200);
                    }
                }
                
                try{
                    request.send(params);
                }
                catch(err){
                    alert('Error occured: '+err);
                    showHidePreloader(false); 
                }
            }

            function handleResponse(fun) {
                if(request.readyState < 4)
                {
                    ajaxTimeout=setTimeout('handleResponse(\''+fun+'\')',10);
                }
                else if(request.readyState == 4 && !enterChecker)
                {
                    enterChecker=true;
                    var response = request.responseText;
                    dataReturn=response;
                    
                    if(fun!='')
                        ajaxTimeout=setTimeout(fun+'()', 200);
                }
            }

            function stopAjax()
            {
                clearTimeout('ajaxTimeout');
                ajaxTimeout='';
            }


            function showContent(){
                showHidePreloader(false);
                document.getElementById('resultDiv').innerHTML=dataReturn;
            }

            function showHidePreloader(show){
                if(show)
                    document.getElementById('preloader').style.display='block';
                else                    document.getElementById('preloader').style.display='none';
            }
        </script>        <style>            #preloader{
                display:none;
            }
        </style>    </head>    <body>        <div id="preloader"><img src="ajax-loader.gif" /></div>
        <input type="button" onclick="showHidePreloader(true); makeRequest('yourpagename.php?param1=
value1&param2=value2', 'showContent')" value="Send GET request" />        
        <input type="button" onclick="showHidePreloader(true); makePostRequest('yourpagename.php?param1=
value1&param2=value2', 'post_param1=post_value1&post_param2=value2', 'showContent')" value="Send POST 
request" />        <div id="resultDiv"></div>    </body></html>

Выше указанный пример кода показывает 2 вида запросов (GET и POST).

Первая кнопка (Отправить запрос GET) показывает как отправлять запрос на страницу yourpagename.php с 2-мя переменными "GET" - param1 и param2 с соответствующими значениями value1 и value2.

Вторая кнопка (Отправить запрос POST) показывает как отправляется запрос POST на страницу yourpagename.php 2 GET и 2 переменные POST - param1/value1, param2/value2 как переменные GET и post_param1/post_value1, post_param2/post_value2 как переменные POST.

Нажав на одну из данных кнопока в данном примере, Вы вызываете функцию showHidePreloader с параметром "true" в первую входящую переменную "show", которая делает наш подгрузчик видимым.

После того как один из запросов был отправлен на сервер, скрипт ждет до полной загрузки результата (else if(request.readyState == 4 && !enterChecker)). Как только это произойдет, вызывается функция showContent (название этой функции передается как 2-й параметр в функцию makeRequest и как 3-й параметр в функцию makePostRequest без скобок). Функция showContent() получает отправленный сервером текст (значение передается в глобальную переменную dataReturn) и вставляет ее в DIV с ID resultDiv.

Пример данный выше показывает как использовать подгрузчики при помощи классического метода JavaScript/AJAX. Ниже я описываю как выполнить те же самые действия при помощи технологии JQuery.

Пример использования подгрузчиков при помощи JQuery

Вся прелесть технологии JQuery состоит в том что она упрощает практически все в веб-приложениях и делает код программиста намного более читабельным и коротким. Пример кода JQuery указан ниже:

КОД:

<html>    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">        var dataReturn='';

        function makeRequest(url){
            $('#preloader').show();
            $.get(url, function(data) {
                $('#resultDiv').html(data);
                $('#preloader').hide();
            }).fail(function() {
                alert( 'Error occured during requesting the page' );
                $('#preloader').hide();
            });
        }

        function makePostRequest(url, params){
            $('#preloader').show();
            $.post(url,params, function(data){
                $('#resultDiv').html(data);
                $('#preloader').hide();
            }).fail(function() {
                alert( 'Error occured during requesting the page' );
                $('#preloader').hide();
            });
        }

        </script>        <style>            #preloader{
                display:none;
            }
        </style>    </head>    <body>        <div id="preloader"><img src="https://preloaders.net/images/ajax-loader.gif" alt=
"AJAX loader" title="AJAX loader" /></div>        <input type="button" onclick="makeRequest('yourpagename.php?param1=
value1&param2=value2')" value="Send GET request" />        
        <input type="button" onclick="makePostRequest('yourpagename.php?param1=
value1&param2=value2', 'post_param1=post_value1&post_param2=value2')" value="Send POST 
request" />        <div id="resultDiv"></div>    </body></html>

Результаты и функциональности кнопок в примере с JQuery, почти идентичны примеру классического метода JavaScript/AJAX. При этом мы не используем функции showContent() и showHidePreloader(), а просто вставляем эти действия внутрь функций вызываемых кликом. Тем не менее, по желанию, эти действия можно вынести в отдельные функции.

Во втором примере, мы также использовали объекты внутренних классов JQuery - $.post() и $.get() для отправления запросов AJAX.

Рекомендуемая литература:

Официальный сайт JQuery

Иконк загрузки при помощи AJAX и JQuery

1. Пример при использовании JavaScript/AJAX

Пример использования подгрузчиков при помощи JQuery