Partial Page Rendering

Partial Page Rendering

Partial page removes the unnecessary loading whole page as a result of a postback. Instead, only particular regions of the page that have changed are updated. As a result, we do not see the whole page reload with every postback which make more user interaction with the web page.
For example, while updating cricket score refresh button is used to update the score. In this case, only score part of a page is only updated.

We can do in .NET framework by extending exiting ASP.NET application with AJAX and incorporates AJAX functionality.

AJAX Libraries

Ajax libraries are a set of JavaScript libraries that are used to perform client-side process to send request to   the server.
 1.AjaxAnywhere
This library is used to help to develop Ajax based application in JSP or JSF framework. It is designed to turn any set of exiting JSP or JSF component into AJAX –components without complex JavaScript coding. Suppose we have to refresh or update some part of a page then we have to separate our page into multiple parts and use AjaxAnywhere to refresh only that part that needs to be updated or refreshed.

2.AjaxCFC
AjaxCFC is a ColdFusion framework meant to speed up Ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.

3.Ajax.NET Professional
Ajax.NET professional is a Ajax Framework for themicrosoft.NET framework which we can use with any .NET languages like C#, Vb.NET, F# to create JavaScript proxies to invoke any .NET method from the client side.
4.ANAA-An Ajax API

It is a complete Ajax library written in JavaScript with function to load and save data from and to the server.It's code is easy and simple to understand.It works with PHP or other backends.

5.Anthem.NET
It is Ajax library that supports only ASP.NET 1.1 and ASP.NET 2.0.It depends on classic client id generation.But it can work with upgraded version also with some changes in webcofig file like version.It works on IE,Firefox,safari and under mono also.

6.Dojo
Dojo is a japanese word which means "place of the way".Dojo is one of the mosr powerful language for constructing Ajax based rich internet application.It is a open source modular Javascript library designed to ease the rapid development of cross-plateform,JavaScript ,Ajax based application and web applications.

7.DWR-Direct Web Remoting
It is a Java library that enables Java on the server and Javascript in the browser to interact and call each other in simple way.It is easy Ajax for Java.
It generates the JavaScript to allow web browsers to securely call into Java code like it was running locally.it can marshal virtually any data including collections,XML and binary data like images and pdf files.

8.JsHttpRequest
It is a Ajax library for Ajax based script creation.It is cross browser ajax library used for ajax file uploading from browser to server without page reload.It is an analogue of XmlHttpRequest.It is useful in creating dynamic web page cretaion.It uses JavaScript in frontend and PHP in backend.It iscompatible with Prototype Ajax library.

9.Prototype
It is a JavaScript framework for creation of dynamic web application.It is JavaScript library which enables you to manipulate DOM in a very easy and safe way(cross-browser).It has built in support for classes-style OOP including inheritence

10.Rialto-Rich Internet Application Toolkit

It is Ajax based cross browser JavaScript widgets library. Since it is technology agnostic, it can be encapsulated in JSP, JSF,.NET,Python or PHP graphic components. It is easy to use and create rich internet application development. It’s main target audience are corporate developer and corporate application. If we know Rialto, no need to understand and write DHTML, Ajax or DOM code.
Widgets library includes forms, drag & drop, tree, data list with fix header and resizable columns, pop up, splitter. Rialto enables single page interface application development. It is available under open source Apache License.

11.Rico
Rico is an open source JavaScript library for developing rich internet applications that uses Ajax. It uses Prototype JavaScript framework library and JSON standard. Since Rico uses the Prototype library, which contains classes for using Ajax, Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request. Rico provides one of the simplest interfaces for enabling your web application to support drag and drop. Just register any HTML element or JavaScript object as a draggable and any other HTML element or JavaScript object as a drop zone and Rico handles the rest.

12.Sajax-Simple Ajax Toolkit
Sajax is an open source tool to make web applications using the Ajax framework. Sajax makes it easy to call PHP, Perl or Python functions from your WebPages via JavaScript without performing a browser refresh.

13.Sardalya
It is a cross-browser AJAX Framework, designed to work in all DOM-supporting browsers, aiming to make DHTML programming easy and fun.

14.Visual WebGui
Visual WebGui is the only .NET based platform that enables the development and modernization of Client-Server applications for native Web (Cloud) & Mobile deployments. It enables moving existing Client-Server applications to native Web, Cloud & Mobile environments without risky, expensive rewrite and reengineering.

15.WebORB
WebORB for .NET was designed for universal connectivity, which means it supports multiple client-side technology connectivity with .NET server-sider resources. Multi-client support is especially important when you want to port an existing application to multiple client-side technologies, such as Flex and iOS. The client-side technologies currently supported by WebORB for .NET include Flash,Flex,Silverlight,AJAXand JSON.

AJAX and ASP.NET

Basic Controls of ASP.NET AJAX

There are some ASP.NET Web server controls that enable you to add Ajax functionality to an ASP.NET Web page. Ajax functionality includes re-rendering parts of a page with a partial-page update and therefore avoiding a full-page postback.
These controls are ScriptManager, ScriptManagerProxy, Timer, Update Panel and Update Progress.

ScriptManager
When it is used.?
1. Whenever we want client-script functionality of the Microsoft Ajax Library and any custom script that we want to send to the browser.
2. While partial-page rendering which enables regions on the page to be independently refreshed without a postback. The ASP.NET UpdatePanel, UpdateProgress and Timer Controls require a ScriptManager in order to support partial-page rendering.
3. When we want client script to access Web services and specially marked methods in ASP.NET pages, it needs to enable JavaScript proxy classes for Web services.
4. To access ASP.NET authentication, profile and roles application services, JavaScript Classes is needed and must be enabled by ScriptManager.

ScriptManager enables client-script functionality, partial-page rendering, JavaScript proxy classes and JavaScript Classes on a page.
When a page contains one or more UpdatePanel controls, the ScriptManager control manages partial-page rendering in the browser. The control interacts with the page life cycle to update the parts of the page that are inside UpdatePanel controls. The EnablePartialRendering property of the ScriptManager control determines whether a page participates in partial-page updates. By default, the EnablePartialRendering property is true. Therefore, by default partial-page rendering is enabled when you add a ScriptManager control to the page.

ScriptManagerProxy
Only one instance of the ScriptManager control can be added to the page. The page can include the control directly or indirectly inside a nested component such as a user control, content page for a master page, or nested master page. If a page already contains a ScriptManager control, but a nested or parent component needs additional features of the ScriptManager control, the component can include a ScriptManagerProxy control.

Timer
To avoid the refreshing whole page and to refresh only some region of page or content of UpdatePanel, a timer control is used for this purpose.

UpdatePanel

UpdatePanel control is used to create rich, dynamic and client-centric Web applications. By using UpdatePanel control, we can refresh selected parts of the page instead of refreshing the whole page with a postback.This is called as partial page update. An ASP.NET Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script. When we use an UpdatePanel control, the page behavior becomes browser independent and can potentially reduce the amount of data that is transferred between client and server.

AJAX

What is Ajax?

AJAX
=A+JA+X
=Asynchronous +JavaScript+XML
= Asynchronous + (JavaScript+XML)
=Group of interrelated web development techniques to create asynchronous web application

Definition
AJAX is group of technologies which implements web application that communicates with the server in the background without interfering with the current state of page.

UI Shifting

                             
Why Ajax?

When we use HTML for web application each client action required that the page be re-loaded from the server. In this process all page content disappears then reappears. Each time a page is reloaded due to a partial change, all of the content must be re-sent instead of only the changed information. If we want to display some specific part of the page, we have to reload the page. This leads additional load on the server and use excessive bandwidth.

To avoid this complexity, a new technology came into web picture that implements the web application in the background without interfering the exiting states of page.

Component of Ajax
Ajax is having following components
1. JavaScript
2. HTML and CSS
3. XML
4. DOM
5. XmlHttpRequest object

Here HTML and CSS is used as markup and style information.DOM is used to display dynamically and allow user to interact with the information.DOM is used with JavaScript. JavaScript and XmlHttpRequest object provide a method for exchanging the data asynchronously between client and server to avoid full page reload. JavaScript brings these technologies together.

What is postback?
When a client sends a request to a server, the server sends a response back to the client. This entire process of request and response is called postback. There are two types of postback.

Synchronous Postback
This is normal postback. Here the entire content of webpage is sent to the server and in response the server sends the required response to the client.

Asynchronous Postback
Asynchronous means we make a request to a server and perform other actions while the server is processing your request -- and on the arrival of the response required actions is performed. Here instead of sending entire information to the server, only the specific information is sent to the server as a request. So only a particular portion of webpage is updated with the new information and rest of the page remains same. This is called partial update. In this process web page uses XmlHttpRequest object to send the request to the server.

Architecture of AJAX

When a client sends initial request to server, in response page is loaded with AJAX Engine. Then after client send request to AJAX Engine through JavaScript call and AJAX Engine forward request to the server through XmlHttpRequest object. The server send response as Xml response and AJAX Engine parse the response and sends to the client as HttpResponse.Here AJAX Engine is only JavaScript function which uses XmlHttpRequest to sends the request to the server.