Introduction to ASP.Net Ajax Part 2
I have given a brief introduction about ASP.Net Ajax in Part 1. Next I will explain in detail what are the different actions happening in the back ground of Ajax enabled web site. Please refer the figure given in Part 1 for more details.
Ajax in Action
The following are major actions happening inside an Ajax enabled web site.
1.Web Server gets a standard page request.
2.Client load the page.
3.Javascript on the page fires on an event.
4.Creation of XMLHttpRequest objects.
5.XMLHttpRequest object makes an asynchronous request(GET or POST) to the web server.
6.Server sees it as just another HTTP request.
7.Web Server returns the result in XML format.
8.A call back function in the client is fired once it is completed.
9.Updating the DOM.What is XMLHttpRequest Object?
The XMLHttpRequest object is the key to AJAX. XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object which is a javascript object.Prior to IE7 browsers it is implemented using ActiveXObject.
Syntax for creating an XMLHttpRequest object:
var xmlhttp =new XMLHttpRequest();
To handle all modern browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject.So we need to explicitly check this our code as follows.
var xmlhttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Noteworthy properties of XMLHttpRequest object are as follows.
i) readyState - retrieves the current state of the request information.
Here are the possible values for the ready State property.
0- The request is not initialized
1- The request has been set up
2- 2The request has been sent
3- 3The request is in process
4- The request is completed
ii) Onreadystatechange – sets or retrieves the event handler for asynchronous requests.
iii) responseBody – retrieves the response body as an array of unsigned bytes.
iv) responseText – retrieves the response body as string.
v) responseXML – retrieves response body as an XML DOM object.
vi) Status – retrieves the http status code of a request.
vii) statusText – retrieves the http status of a request.
Noteworthy methods of XMLHttpRequest object are as follows.
i) Abort – abort the current http request.
ii) getAllResponseHeaders – sends back the complete list of response headers.
iii)getResponseHeader – sends back the specified response header.
iv) sendRequestHeader – insert custom http request in the header.
v) Open - Assigns method, destination URL, and other optional attributes of a pending request.
vi) Send - Sends an HTTP request to the server and receives a response. Clientside vs Server side
As I mentioned earlier in Part1 ASP.Net Ajax architecture comprises the client side as well as server side architecture.ie;ASP.Net ajax Web application consists of either a client-only solution or a client and server solution.
A client-only solution uses Microsoft Ajax Library but does not use any ASP.NET server controls. For instance, an HTML can include script elements that reference the Microsoft Ajax Library .js files. The Microsoft Ajax Library allows Ajax applications to perform all processing on the client.
A client and server solution consists of using both the Microsoft Ajax Library and ASP.NET server controls.
The server pieces that support Ajax development are ASP.NET Web server controls and components that manage the UI and flow of an application.There are also ASP.NET Web services that enable you to access ASP.NET application services for forms authentication, roles, and user profiles.
Ajax server controls consist of server and client code that integrate to produce rich client behavior. When you add an Ajax-enabled control to an ASP.NET Web page,the page automatically sends supporting client script
to the browser for Ajax functionality.
The most frequently used Ajax server controls are :
1.ScriptManager : The ScriptManager control is required in order to use the UpdatePanel, UpdateProgress, and Timer controls. However, the ScriptManager control is not required when creating a client-only solution.
2.UpdatePanel : Enables you to refresh selected parts of the page, instead of refreshing the whole page by using a synchronous postback.
3.UpdateProgress :Provides status information about partial-page updates in UpdatePanel controls.
4.Timer : Performs postbacks at defined intervals. You can use the Timer control to post the whole page, or use it together with the UpdatePanel control to perform partial-page updates at a defined interval.
You can also create custom ASP.NET server controls that include Ajax client behaviors. Custom controls that enhance the capabilities of other ASP.NET Web controls are referred to as extender controls.ASP.Net Ajax Extender Controls
We can add ASP.Net Ajax features to existing ASP.Net controls using ASP.Net Ajax extender controls. ASP.Net does not came with any extender controls but ASP.Net Ajax Control Toolkit does. ASP.Net Ajax Control Toolkit is a free toolkit that contains numerous ASP.Net controls and control extenders which developers can directly drop in to their web page just like normal web server control.We cannot use the Ajax control extenders alone instead we can use by attaching them to another ASP.Net Server control.These extender controls can be attached to any Web Server Control by setting the TargetControlID property of the extender control to the ID of the server control being extended. I will be giving more insights into those areas in the upcoming section.
Ex : ModalPopupExtender,PasswordStrength Control etc.
ASP.NET AJAX Client Life-Cycle Events
Client side events helps to customize the user interface during postback and asynchronous postbacks.The classes which raises the client side events lies inside Microsoft AJAX Library.
The two main Microsoft AJAX Library classes that raise events during
the client life cycle are the Application and PageRequestManager classes.When an ASP.Net Ajax enabled web page is loaded in the browser,an instance of the Application class is created.The application object just created does all the works for the server side Script Manager.
PageRequestManager class is created if the page supports partial rendering and page uses one or more update panel controls on the server side.
Application Events
init : Raised only once when the page is first rendered after all scripts have been loaded,but before objects are created.
load: Raised after all scripts have been loaded and objects in the application have been created and initialized. Raised also for all postbacks to the server,which includes asynchronous postbacks.
unload :Raised before all objects in the client application are disposed.During this event you should free any resources that your code is holding.
If a page contains a ScriptManager control and one or more UpdatePanel controls, the page can perform partial-page updates.The PageRequestManager class raises client events that are specific to asynchronous postbacks.
PageRequestManager Events
initializeRequest: Raised during initialization of an asynchronous postback.
beginRequest: Raised before processing of an asynchronous postback starts, and the postback request is sent to the server. If there is a postback already processing, it is stopped using the abortPostBack method.
pageLoading: Raised after a response to an asynchronous postback is received from the server,but before any content on the page is updated.
pageLoaded: Raised after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback.
endRequest: Raised after an asynchronous postback is finished and control has been returned to the browser. If an error occurs, the page is not updated. Use this event to provide customized error notification to users or to log errors.