Preloaders world

AJAX loaders usage with AJAX and JQuery

1. How to use Preloaders.net web-application?
2. How to embed AJAX loader in your application? (sample scripts)
3. How to perform search?

Below you can see 2 samples of how you can use the generated preloaders in your web-applications. Note that the given examples are given to users with beginner level of HTML, JavaScript and/or JQuery knowledge. In case needed you can download the given below script examples by following the links below:

Files:
1. JavaScript / AJAX example files
2. JQuery example files
3. Both JavaScript / AJAX and JQuery examples files

1. Simple JavaScript/AJAX example

This tutorial shows you how to use simple AJAX script to pre-load a particular web-page

CODE:

<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>


The example above shows 2 types of different requests (GET and POST).

The first button (Send GET request) shows how to send a request to yourpagename.php file with 2 "GET" variables - param1 and param2 with values value1 and value2 correpsondingly.

The second button (Send POST request) shows how to send a POST request to yourpagename.php file with 2 GET and 2 POST variables - param1/value1, param2/value2 as GET variables and post_param1/post_value1, post_param2/post_value2 as POST variables.

Having clicked either of 2 buttons in the example you will have the showHidePreloader function run with the "true" value sent to "show" variable, which will make the ajax loader visible.

After either of the requests has been sent to a server the script will wait for the result to be loaded. After content has been loaded the showContent function will be called (the name of the callback function is provided as the 2nd parameter in the makeRequest function and the 3rd parameter in the makePostRequest function without paranthesis). The showContent() function gets the returned by the server text/html (set to the dataReturn global variable) and inserts it into DIV with ID of resultDiv.

The example above showed how to use a preloader with simple JavaScript/AJAX method. Below I explain how to do that with JQuery.

2. JQuery

The beauty of JQuery is that it simplifies everything and makes the developer code much more readable and much shorter. The example of JQuery code could be as follows:

CODE:

<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="http://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>


The result and set of button actions of the JQuery code is identical to the JavaScript/AJAX, except that in the JQuery example we are not using showContent() and showHidePreloader() functions which you can create on your own in case needed.

Also it is important to notice that in the second example we used embedded JQuery functions - $.post() and $.get() to make AJAX requests.

Recommended web-resources:

1. JQuery official web-site



x