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 updating parts of a web page -
without reloading the whole page.
What is AJAX?
AJAX =
Asynchronous JavaScript and XML. AJAX is a technique for creating fast and
dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging
small amounts of data with the server behind the scenes. This means that it is
possible to update parts of a web page, without reloading the whole page.
Classic
web pages, (which do not use AJAX) must reload the entire page if the content
should change.
Examples of applications using AJAX:
Google Maps, Gmail, Youtube, and Facebook tabs.
ASP.NET
AJAX runs on the following browsers:
·
Microsoft Internet
Explorer (>= 6.0)
·
Mozilla Firefox (>=
1.5)
·
Opera (>= 9.0)
·
Apple Safari (>=
2.0)
·
Google Chrome
AJAX is based on Internet Standards AJAX is based on internet standards, and uses a combination of:
- XMLHttpRequest object (to
exchange data asynchronously
with a server)
- JavaScript/DOM (to
display/interact with the information)
- CSS (to style the data)
- XML (often used as the
format for transferring data)
Ajax applications are browser- and platform-independent!
AJAX stands for Asynchronous JavaScript and XML. This is a cross
platform technology which speeds up response time. The AJAX server controls add
script to the page which is executed and processed by the browser. However like
other ASP.Net Server controls, these AJAX server controls also can have methods and
event handlers associated with them, which are processed on the Server side.
The control toolbox in the Visual Studio IDE contains a group of
controls called the 'AJAX Extensions'
Major
benefits of incorporating AJAX functionality in a website include:
·
Partial page updates - Only the portion of the page that needs updating is
posted back and not the whole page.
·
Faster user response - Since only a subset of data moves between the client and
server, the results are shown quickly.
·
Enhanced user interface - With AJAX, desktop like user interface with progress
indicators and timers can be implemented.
·
Enhanced features - with AJAX features like autocomplete can be implemented.
ASP.NET AJAX server controls mainly provide functionality for
having partial page updates, update progress indication, and frequent updates
based on a timer. Also, it takes care of generating all the JavaScript that is
required to perform these functionalities. So with these controls, the
developer doesn't have to write any JavaScript to implement AJAX.
Traditional Web Applications
Figure below presents the typical
interactions between the client and the server in a traditional web
application.
Ajax Web Applications
Ajax web applications add a layer
between the client and the server to manage communication between the two.
The
controls provided by ASP.NET for having AJAX functionality are:
1.
ScriptManager
2.
ScriptManagerProxy
3.
UpdatePanel
4.
UpdateProgress
5.
Timer
1
Let us
try to understand these controls one by one and try to work out an example to
see how each of them can be used to implement AJAX features.
ScriptManager
The
ScriptManager control is a non-visual component on the page. This
control is required on each page that needs to have AJAX features implemented
on it. The main functionality of a ScriptManager control is to push Microsoft AJAX framework code to
the client side when the page is being rendered. This control can be thought of
as the agent which will write the JavaScript required on the client side to
facilitate AJAX functionality.
There
should be only one
ScriptManager control on the page that needs AJAX functionality. Let
us create a webpage and add a ScriptManager control to it:
“ ID="ScriptManager1" runat="server" />”
ScriptManagerProxy
We have seen that the
ScriptManager control is required on the page that needs AJAX
functionality. We also know that there should be only one ScriptManager control on the page. Now consider a situation where
there is a master page and content page and both need AJAX functionalities.
There is one more scenario, let's say we have aUserControl that needs AJAX and it has to be added on a page where
AJAX is already implemented. Since there could be only one ScriptManager on the page, adding a ScriptManager control in these scenarios will result in two ScriptManager controls on the page. So to handle such conditions,
the ScriptManagerProxy control can be used.ScriptManagerProxy should be used on content pages that have master pages
containing a ScriptManagercontrol. It can also be used inside UserControls when the page containing the UserControl already has
theScriptManager control.
UpdatePanel
This
is a container control that contains other ASP.NET controls. This control
defines a region that is capable of making partial page updates. We can add
various server controls inside an
UpdatePanel and this controls inside theUpdatePanel will communicate to the server irrespective of the
page's postback.
Let
us add an
UpdatePanel on the page and some server controls inside it. We
will try to do some arithmetic operations inside this UpdatePanel and try to get the results without a postback. Once
the controls are added, the design view of the page will look like:
Now let us handle the button click event and perform the
arithmetic operations on that:
protected void btnCalculate_Click(object sender, EventArgs e)
{
try
{
int a
= Convert.ToInt32(txtA.Text);
int b
= Convert.ToInt32(txtB.Text);
int
sum = a + b;
int
difference = a - b;
int
multiplication = a * b;
Label1.Text = string.Format("Sum
= {0}",
sum);
Label2.Text = string.Format("Difference
= {0}",
difference);
Label3.Text = string.Format("Multiplication
= {0}",
multiplication);
}
catch
(Exception ex)
{
//pokemon exception handling
}
}
Now since all the controls are inside the
UpdatePanel control, clicking the button will not result in a postback
but it will asynchronously call the server-side function and give us the
results. When we run the page in the browser:
Notice
that clicking on the button does not cause the postback but gives us the result
asynchronously. We can control partial page updates using the
UpdateMode property of the UpdatePanel and setting Trigger.
UpdateProgress
The
scenario we just handled gave us the results instantly, but imagine a scenario
where the server side processing for the asynchronous event takes some time. If
the operation is time consuming then we can provide the user feedback by using
the
UpdateProgress control inside the UpdatePanel.
Let us
have one more
UpdatePanel on the page doing the same task, but
this time we will make the server side functionality take more time than
required (by using sleep). We will add a simple UpdateProgress control to make the user aware of the
fact that some processing is being done by the page right now. Let us look at
the Design view of this UpdatePanel and UpdateProgress control now.
Let us handle the server side event for button click but this
time let's add a sleep for some time here.
protected void btnCalculate2_Click(object sender, EventArgs e)
{
try
{
//Lets pretend that we are doiing something
time consuming
System.Threading.Thread.Sleep(3000);
int a
= Convert.ToInt32(txtA2.Text);
int b
= Convert.ToInt32(txtB2.Text);
int
sum = a + b;
int
difference = a - b;
int
multiplication = a * b;
Label4.Text = string.Format("Sum
= {0}",
sum);
Label5.Text = string.Format("Difference
= {0}",
difference);
Label6.Text = string.Format("Multiplication
= {0}",
multiplication);
}
catch
(Exception ex)
{
//pokemon exception handling
}
}
Now when we run the page and click the button, the
updateProgress message will be shown.
We can
also have images and animated GIFs inside the
updateProgress control to provide more user friendly
feedback.
Timer
There
might be some scenarios where we want to update a particular portion of the
page after some time duration irrespective of user action. To achieve this, we
can use the
Timer control. Let us add a timer control to
our page and display the server time after every 5 seconds. The design view of
the page will look like:
Let us now handle
the timer_tick event.
Since the control is inside the UpdatePanel the time will be updated after every 5 seconds without
causing any postback. Let us look at the server side code for the timer event
and then run the page and see the time changing every 5 seconds.
protected void Timer1_Tick(object
sender, EventArgs e)
{
Label8.Text = DateTime.Now.ToString();
}
____________________________________________________________________
Reach us At: - 0120-4029000; 0120-4029024; 0120-4029025,
0120-4029027; 0120-4029029
Mbl: 9953584548
No comments:
Post a Comment