AJAX is a new trend in web development where it gives very smooth functionality for your website. In simple term we can use AJAX technology to refresh individual parts of the web page without refreshing whole page. This feature will increase the efficiency of your web page, smooth operation and enable more description web page design.
What is AJAX?
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
Microsoft Visual Studio 2008 is coming with rich collection of AJAX controllers built in. AJAX is based on Java and JavaScript so it is nothing to do with .NET or Visual Studio. But most importantly we can easily use AJAX with most of the web development project. With AJAX Extensions of Visual Studio 2008 we can use AJAX with the visual studio development environment. This is really easy and fun. Let do it with a small project, so that you can easily understand the concept.
In this project I will show you how to develop a web page that will display current server time stamp without refreshing web page again and again. To get server time web page should send request, get response and display it. In this basic example I am using ScriptManager and UpdatePanel controllers. ScriptManager is a highlevel controller define with respect to the web page. But you can have one or more UpdatePanel for a given web page. Those UpdatePanel s can be individually update based on deferent events. So you should understand that we can perform several functions on the web page at a given time synchronously using multiple UpdatePanel s.
Fig 1: AJAX Extensions Toolbox
AJAX toolbox contains ScriptManager, ScriptManagerProxy, Timer, UpdatePanel and UpdateProgress controllers. More frequently we use ScriptManger and UpdatePanel. Update panel we use to place controllers that need to get update with the page events, but without page refresh. In this example you can see I have add ScriptManger and UpdatePanel. Within UpdatePanel there is ContentTemplete, inside that you can I have placed two buttons and one label. Once you click on one button it will display the current server time on the label and click on other button will execute javascript method "test".
Fig 2: How to use AJAX ScriptManger
Fig 3: How to use AJAX UpdatePanel
The final step is to write code for server side operations. Write respective server side code inside the particular controllers' (Eg: button, menu...) event handling methods same as you do in normally applications. But here different is this server side code will execute on server and send results to corresponding controller but no page refresh.
Fig 4: How to write server side coding in AJAX
Fig 1: AJAX Extensions ToolboxAJAX toolbox contains ScriptManager, ScriptManagerProxy, Timer, UpdatePanel and UpdateProgress controllers. More frequently we use ScriptManger and UpdatePanel. Update panel we use to place controllers that need to get update with the page events, but without page refresh. In this example you can see I have add ScriptManger and UpdatePanel. Within UpdatePanel there is ContentTemplete, inside that you can I have placed two buttons and one label. Once you click on one button it will display the current server time on the label and click on other button will execute javascript method "test".
Fig 2: How to use AJAX ScriptManger
Fig 3: How to use AJAX UpdatePanelThe final step is to write code for server side operations. Write respective server side code inside the particular controllers' (Eg: button, menu...) event handling methods same as you do in normally applications. But here different is this server side code will execute on server and send results to corresponding controller but no page refresh.
Fig 4: How to write server side coding in AJAX
Comments
Post a Comment