Creating web applications with consistent layout and user interface is very important for your users. In several ASP.NET projects I’ve completed lately, I’ve been using a lot jQuery and jQuery Ajax to achieve rich user experience and seamless interaction between the client and the server. In almost all of them, I took advantage of the nice jQuery
global ajax handlers and jQuery ajax functions. Let’s say you build web application which mainly interacts using Ajax post and get to accomplish various operations. As you may already know, you can easily perform Ajax operations using jQuery Ajax low-level method or jQuery $.get, $.post, etc. Simple get example: $.get("/Home/GetData", function (d) {
alert(d);
});
As you can see, this is the simplest possible way to make Ajax call. What it does in behind is constructing low-level Ajax call by specifying all necessary information for the request, filling with default information set for the required properties such as data type, content type, etc...
If you want to have some more control over what is happening with your Ajax Request, you can easily take advantage of the
global ajax handlers. In order to register
global ajax handlers, jQuery API provides you set of
global Ajax methods. You can find all the methods in the following link http://api.jquery.com/category/ajax/global-ajax-event-handlers/, and these are:
ajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess
And the low-level ajax interfaces http://api.jquery.com/category/ajax/low-level-interface/:
ajax
ajaxPrefilter
ajaxSetup
For
global settings, I usually use ajaxSetup combining it with the ajax event handlers.
$.ajaxSetup is very good to help you set default values that you will use in all of your future Ajax Requests, so that you won’t need to repeat the same properties all the time unless you want to override the default settings.
Mainly, I am using
global ajaxSetup function similarly to the following way:
$.ajaxSetup({
cache: false,
error: function (x, e)
{
if (x.status == 550)
alert("550 Error Message");
else if (x.status == "403")
alert("403. Not Authorized");
else if (x.status == "500")
alert("500. Internal Server Error");
else
alert("Error...");
},
success: function (x)
{
//do something
global on success...
}
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now, you can make ajax call using low-level $.ajax interface and you don’t need to worry about specifying any of the properties we’ve set in the $.ajaxSetup function.
So, you can create your own ways to handle various situations when your Ajax requests are occurring.
Sometimes, some of your Ajax Requests may take much longer than expected… So, in order to make user friendly UI that will show some progress bar or animated image that something is happening in behind, you can combine ajaxStart and ajaxStop methods to do the same.
First of all, add one <div id=”loading” style=”display:none;”> <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Ajax Loader" /></div> anywhere on your Master Layout / Master page (you can download nice ajax loading images from http://ajaxload.info/).
Then, add the following two handlers:
$(document).ajaxStart(function () {
$("#loading").attr("style", "position:absolute; z-index: 1000; top: 0px; "+
"left:0px; text-align: center; display:none; background-color: #ddd; "+
"height: 100%; width: 100%; /* These three lines are for transparency "+
"in all browsers. */-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";"+
" filter: alpha(opacity=50); opacity:.5;");
$("#loading img").attr("style", "position:relative; top:40%; z-index:5;");
$("#loading").show();
});
$(document).ajaxStop(function () {
$("#loading").removeAttr("style");
$("#loading img").removeAttr("style");
$("#loading").hide();
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Note: While you can reorganize the style in a more reusable way, since these are
global Ajax Start/Stop, it is very possible that you won’t use the same style in other places.
With this way, you will see that now for any ajax request in your web site or application, you will have the loading image appearing providing better user experience.
What I’ve shown is several useful examples on how to simplify your Ajax code by using
Global Ajax Handlers and the low-level AjaxSetup function. Of course, you can do a lot more with the other methods as well.
Hope this was helpful.
Regards,
Hajan
