In this article I will explain with an example, how to use jQuery ajaxSetup function when making jQuery AJAX calls.
The jQuery ajaxSetup function allows to specify the common default values for the jQuery AJAX
requests.
HTML Markup
The following HTML Markup consists of an HTML Button, an HTML SPAN and a hidden HTML DIV.
<input type="button" id="btnGet" value="Get IP Address" />
<br />
<br />
<span id="lblIPAddress"></span>
<div class="modal" style="display: none">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
Using jQuery ajaxSetup function
The HTML Button has been assigned a jQuery click event handler. When the Button is clicked, a jQuery AJAX call is made to the IP Web Service, which returns the IP Address of machine.
A jQuery ajaxSetup function is used to display the
loading GIF Image during the jQuery AJAX call. The hidden HTML DIV is shown inside the beforeSend event handler and it is hidden inside the complete event handler.
The common default values are specified using the jQuery ajaxSetup function while the unique values are specified in the respective jQuery AJAX requests.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
$.ajaxSetup({
global: false,
type: "GET",
url: "http://www.telize.com/jsonip",
beforeSend: function () {
$(".modal").show();
},
complete: function () {
$(".modal").hide();
}
});
$.ajax({
data: "{}",
success: function (r) {
$("#lblIPAddress").html("IP Address: " + r.ip);
}
});
});
});
</script>
Loading (Busy) Indicator (Spinner) with Overlay CSS
Following CSS is used for displaying the Loading (Busy) Indicator (Spinner) with Overlay GIF Image during jQuery AJAX calls.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center
{
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img
{
height: 128px;
width: 128px;
}
</style>
Screenshot
![jQuery ajaxSetup() function example]()
Demo
Downloads
