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
