AJAX allows web pages to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. It uses a combination of technologies including JavaScript, XMLHttpRequest object, and DOM manipulation to update parts of a web page. Common applications that use AJAX include Google Maps, Gmail, YouTube, and Facebook. AJAX provides benefits like creating rich web applications that work like desktop apps and allowing pages to update dynamically without reloading.

1. AJAX

2. AJAX :
 AJAX is an acronym for Asynchronous JavaScript And XML.
 AJAX is not a programming language. But simply a development technique for
creating interactive web applications and for creating fast and dynamic web pages.
 Classic web pages, (which do not use AJAX) must reload the entire page if the content
should change.
 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.
 AJAX applications are browser- and platform-independent
 Examples of applications using AJAX:
Google Maps, Gmail, YouTube and Face book tabs.

3. TECHNOLOGY BEHIND AJAX :
Ajax is not a single technology, but it is a combination of many technologies.
These technologies are supported by modern web browsers.
 JavaScript:
(JavaScript/DOM (to display/interact with the information)
 Asynchronous Call to the Server
(XMLHttpRequest object (to exchange data asynchronously with a server))
 XML
(often used as the format for transferring data)

4.  JavaScript
 AJAX uses JavaScript to send and receive data between a web browser
and a web server
 DHTML and CSS is used to show the output to the user.
 JavaScript is used very heavily to provide the dynamic behavior to the
application.
 Asynchronous Call to the Server
 Most of the Ajax application used the XMLHttpRequest object to send the
request to the web server. These calls are Asynchronous and there is no need to wait
for the response to come back. User can do the normal work without any problem.
 XML:
 XML may be used to receive the data returned from the web server. JavaScript
can be used to process the XML data returned from the web server easily.

5. History Of Ajax
• During browser innovation, Netscape added a feature known as LiveScript
(LiveScript became JavaScript and grew more powerful,), allowed people to put
small scripts in web pages so that they could continue to do things after you’d
downloaded them.
• Ajax came when the Internet Explorer introduced the concept of IFrame element.
Microsoft introduced another technique, called as Microsoft’s Remote
Scripting that technique involved the pulling of data through means of Java
Applet which communicated with the client side using scripting language like
JavaScript.
• As soon Microsoft introduced new XMLHttpRequest object that acts as an ActiveX
control in the Internet Explorer. Finally, in the year 2006, the W3C (World Wide
Web Consortium) announced the release of the first draft that included the
specification for the object (XMLHttpRequest) and made it an official web
standard.
• AJAX (first coined in the year 2005) is not a new programming language but a
relatively new technique for creating faster, better and dynamic web
applications. If you have the basic understanding of HTML, XHTML, XML and
JavaScript languages then you can have a go with AJAX
• AJAX is basically based on the following web standard, XML HTML JavaScript CSS.

6. HOW AJAX WORKS ?
When user first visits the page, the Ajax engine is initialized and loaded. From
that point of time user interacts with Ajax engine to interact with the web server. The
Ajax engine operates asynchronously while sending the request to the server and
receiving the response from server.
AJAX LIFE CYCLE
User Visit to the page:
User visits the URL by typing URL in browser or clicking a link from some
other page.
Initialization of Ajax engine:
When the page is initially loaded, the Ajax engine is also initialized. The Ajax
engine can also be set to continuously refresh the page content without refreshing the
whole page.

7. Event Processing Loop:
 Browser event may instruct the Ajax engine to send request to
server and receive the response data.
 Server response - Ajax engine receives the response from the server.
Then it calls the JavaScript call back functions.
 Browser (View) update - JavaScript request call back functions is
used to update the browser. DHTML and css is used to update the
browser display.

8. BENEFITS OF AJAX :
 Ajax can be used for creating rich, web-based applications that look and
works like a desktop application
 Ajax is easy to learn. Ajax is based on JavaScript and existing technologies
like XML, CSS, and DHTML. Etc. So, it’s very easy to learn Ajax
 Ajax can be used to develop web applications that can update the page data
continuously without refreshing the whole page

9. • First Program
1. Open new ASP.NET Web Site then click OK.
2. Open Tool Box and drag ScriptManager and UpdatePanel
from AJAX Extensions. Then drag label and Button,
named UsingAjax. Open properties window of
UpdatePanel. Go to Triggers property and click on
collection then add the controlID (Button name, which
you want to make a AJAX part) and select Event (Click).
Added one another button outside the UpdatePannel
,named WithoutAjax and a added another Label.

10. 3. Paste the code in .cs file of the application
protected void with_ajax_Click1(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
protected void without_ajax_Click(object sender, EventArgs
e)
{
Label2.Text = DateTime.Now.ToString();
}

11. 4. Debug the application
• Clicking on "Using Ajax Button" ,only first time (label) will be
updated without reloading whole page.
•
Clicking on "Without Ajax Button", whole page Reloaded.

12. Ajax Controls
• You drop the controls to your page (Default.aspx) from the Tab Ajax
Extensions.
1. ScriptManager Control
• Client script for AJAX-enable ASP.NET Web pages managed by
ScriptManager control . ScriptManager control registered the
client script for the Microsoft Ajax Library with the page.
Script manager support features such as
• Partial-page rendering to the browser
• Web-service calls.
2. ScriptManagerProxy Control
• When a ScriptManager control is already defined in a parent
element (or master page or host page already contains a
ScriptManager control) then used ScriptManagerProxy control
to enables nested components and user control to add service
and script.

13. • 3. Timer control
• The ASP. NET AJAX Timer control
• Performed Postbacks of pages at defined intervals.
• Timer control with an UpdatePanel control, enable partial-
page updates at a defined interval.
• If you want to post the whole page, used Timer Control.
• The Timer control requires specific settings in a web.config
file in order to function correctly.
• If your application does not contain the required
web.config file, errors appear in the Design view of the
page where the control would have appeared.

14. 4. UpdatePanel control
• Which area on web page you want to partial update, used under
the UpdatePanel control. Don't wrap your entire page within an
UpdatePanel. You may use several panels on your page.
UpdatePanel control is the most important control in the ASP.NET
AJAX package. It will AJAX controls contained within it, allowed to
partial rendering of the area on the web page.
5. UpdateProgress Control
• UpdateProgress control provides status information about partial-
page updates in UpdatePanel controls. UpdateProgress control
provides, to customize the content. When a partial-page update is
very fast, you can specify a delay before the UpdateProgress control
is displayed.

15. Timer control
• The ASP. NET AJAX Timer control
• Performed Postbacks of pages at defined intervals.
• Timer control with an UpdatePanel control, enable
partial-page updates at a defined interval.
• If you want to post the whole page, used Timer
Control.
• The Timer control requires specific settings in a
web.config file in order to function correctly.
• If your application does not contain the required
web.config file, errors appear in the Design view of the
page where the control would have appeared.

16. 1. Drag ScriptManager Control, UpdatePanel and label
from toolbox. After this add a timer control.

17. 2. Open the properties of Update panel. Click on collection in
tigger .
3.Select controlID and give the name of your Timer control and
choose the event.

18. 4.Paste the code in the Default.aspx.cs file on your Website
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) { }
protected void Timer1_Tick1(object sender, EventArgs e)
{
Label1.Text = System.DateTime.Now.ToString();
}}

19. 5. The design view of your Website
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label> </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick1"
Interval="60">
</asp:Timer>
</form> </body>

20. 6. Debug the Application

21. • UpdatePanel control
• Which area on web page you want to partial update,
used under the UpdatePanel control. Don't wrap your
entire page within an UpdatePanel. You may use
several panels on your page. UpdatePanel control is the
most important control in the ASP.NET AJAX package. It
will AJAX controls contained within it, allowed to
partial rendering of the area on the web page.
The <asp:UpdatePanel> tag has two childtags:
1. ContentTemplate, The ContentTemplate tag holds
the content of the panel. The content are anything
that you would normally put on your page, from web
controls

22. • 2. Triggers tags, The Triggers tag allows you to define certain
triggers which will make the panel update there contents. The
following example will show the use of both childtags.
• Go to properties of UpdatePanel control, click on Triggers a
new window open. Add controls, which you want to make a
part of web page for partial rendering.