AJAX :

Asynchronous JavaScript And XML

 Back then :

Click
Search
And you get this :
These days :
 Introduction
• Ajax, shorthand for Asynchronous JavaScript and XML
• The first known use of the term in public was by Jesse James
Garrett in his February 2005 article Ajax: A New Approach to
Web Applications.

• ASP.NET AJAX, previously called "Atlas", is a Microsoft

implementation of an AJAX based framework, created for
ASP.NET .

• This allows for a richer experience for the user, since loading
dynamic content can be done in the background, without
refreshing and redrawing the entire page.
• Google have made Ajax very popular.
 ASP.NET Ajax Advantages
• When using Ajax, a web application can request only the
content that needs to be updated, thus drastically reducing
bandwidth usage and load time.

• The web application will be operated faster or more

responsive, even if the application has not changed on the
server side.

• Ajax enable to reduce connections to the server, since scripts

and style sheets only have to be requested once.

• State can be maintained throughout a Web site such as

JavaScript variables.
 Why Ajax is important ?
 AJAX enables a much better user experience for Web sites and
applications.
 Developers can now provide user interfaces that are nearly as
responsive and rich as more traditional Windows Forms
applications while taking advantage of the Web's innate ease of
deployment and heterogeneous, cross-platform nature.
 These benefits have been shown to dramatically reduce
software maintenance costs and increase its reach. You can use
AJAX to load specific portions of a page that need to be
changed.
 It further reduces network traffic.
 ASP.NET Ajax Disadvantages
• Clicking the browser’s “back” button may not return the user
to an earlier state of the Ajax-enabled page.

• Dynamic web page updates also caused some troubles for a

user to bookmark a particular state of the application.

• Ajax opens up another attack vector for malicious code that

web developers might not expected for.

• Any user whose browser does not support Ajax or JavaScript,

or simply has JavaScript disabled, will not be able to use its
functionality.
ASP.Net Ajax Server Controls
ScriptManager Control
 Downloads JavaScript files to client
 Enables partial-page rendering using UpdatePanel
 Provides access to Web services via client-side proxies
 Manages callback timeouts and provides error handling options
and infrastructure
 Provides registration methods for scripts
 Enables ASP.NET AJAX localization support
 Every page requires one ScriptManager instance!

Declarative
Markup like
Asp.Net
Controls
ASP.Net Ajax Server Controls
UpdatePanel Control
Enable sections of a page to be partially rendered without a post back called as
Partial page rendering.
 Clean round trips to server and flicker-free updates
 Requires no knowledge of JavaScript or AJAX
A declarative model that works like ASP.NET server controls.
Can be used with Master pages, User Controls and Data Bound Controls.
Single or Multiple Update panel controls can also be used on a Web page.
Declarative
It can be created and refreshed programmatically. Markup like
Markup like
Asp.Net
Controls
ASP.Net Ajax Server Controls
UpdateProgress Control
It provides status information about partial-page updates in UpdatePanel
controls.
It Helps to prevent flashing when a partial-page update is very fast.
It helps to design a more intuitive UI when a Web page contains one
or more UpdatePanel controls.
Displays custom template-driven UI for:
-Indicating that an async update is in progress
-Canceling an async update that is in progress
Automatically displayed when update begins or "DisplayAfter" interval
elapses.

Declarative
Markup like
Asp.Net
Controls
Timer Control
The ASP.NET AJAX Timer control performs post backs at defined intervals.
Timer control allows to:
Periodically update the contents of one or more UpdatePanel controls
without refreshing the whole Web page.
Run code on the server every time that a Timer control causes a
postback.
Synchronously post the whole Web page to the Web server at defined
intervals.
Declarative
Markup like
Asp.Net
Controls
 jQuery
• jQuery is an extensible open source JavaScript Library that’s
fast, lightweight , and CSS3 and cross browser compliant.

• It simplifies event handling and animations and makes it easier

to develop web applications that are responsive.

• jQuery has become the JavaScript library of choice for

building lightning fast and responsive applications in no time.

• “jQuery is a fast and concise JavaScript Library that simplifies

HTML document traversing, event handling, animating, and
Ajax interactions for rapid web development. jQuery is
designed to change the way that you write JavaScript”
 jQuery
• The jQuery Library was first released in 2006 by John
Resing, and it became widely popular among web
development communities worldwide.
• jQuery is a lightweight JavaScript library that emphasizes
interaction between JavaScript and HTML
• jQuery is free, open source software Dual-licensed under the
MIT License and the GNU General Public License
• Helps web developers to create simple pieces of interaction
without being forced to write long, complex, book-length
pieces of code
 jQuery
• Features
– Select and manipulate HTML
– Manipulate CSS
– Browser Independent
– Support for a simplified event- handling model.
– JavaScript Effects and animations
– HTML DOM traversal and modification
– AJAX
 jQuery
• There are various ways to include jQuery in your web page-
• Reference a local copy using the <script> tag.
• Reference a local copy using the ScriptManager control’s.
• Use an embedded script.
• Reference a remote copy of the jQuery library.
 How jQuery Works
• The jQuery syntax is used to select HTML elements
and perform some action on those element(s).

• Basic syntax: $(selector).action()

– A dollar sign to define jQuery
– A (selector) to find HTML elements
– An action() to be performed on the element(s)
 How jQuery Works
Different types of Selectors:
1) The Universal selector:

$(‘*’).css(‘font-family’,’Arial’);
2) The ID selector:

$(‘#Button1’).addClass(‘NewClassName’);
3) The Element selector:

$(‘h2’).css(‘color’,’blue’);
4) The Class selector:

<h1 class = ‘highlight’> Heading 1 </h1>

<h2> Heading 2 </h2>
<p class = ‘highlight’> First Paragraph</p>
<p> Second Paragraph </p>
$(‘.highlight’).css(‘background-color’,’red’);
5) Grouped and Combined Selectors:

$(‘h1, h2’).css(‘color’, ‘orange’);

$(‘#Maincontent p’).css(‘border’, ‘1px solid red’);
Include jQuery in ASP.NET project
• Step 1: Open Visual Studio 2005/2008 (I will
demonstrate using VS 2008)

Step 2: Create a new Web Site.

• Step 3: Give some name to the website.

Step 4: Below is the folder structure.

• Step 5: To add the jQuery script file
Right click the Scripts folder > Add Existing Item >
Browse to the path where you downloaded the
jQuery library (jquery-1.3.2.min.js) > Select the file
and click Add. The structure will look similar to the
following:
 Events
– Browsers are preprogrammed to recognize certain
actions such as clicking, page loading, mouse
movements etc.
– You write programs to respond to these events
– Two Step process
• Identify the element that you want to respond to the
event
• Assign an event and create a function to run when
event occurs
 jQuery Events
Event Method
$(selector).click(function)
$(selector).dblclick(function)
$(selector).focus(function)
$(selector).mouseover(function)
$(selector).keypress(function)
Description
Invokes a function when the selected elements
are clicked
Invokes a function when the selected elements
are double-clicked
Invokes a function when the selected elements
receive the focus
Invokes a function when the mouse is over the
selected elements
Invokes a function when a key is pressed inside
the selected elements
 Manipulating CSS
CSS Properties
$(selector).css(propertyName)
$(selector).css(propertyName,value)
$(selector).css({properties})
$(selector).addClass(class)
Description
Get the style property value of the first
selected element
Set the value of one style property for
selected elements
Set multiple style properties for selected
elements
Apply style class to the selected elements
 Manipulating HTML

Function
$(selector).html(content)
$(selector).append(content)
$(selector).after(content)
Description
Changes the (inner) HTML of selected
elements
Appends content to the (inner) HTML of
selected elements
Adds HTML after selected elements
 jQuery Selectors

• Selectors are most useful feature in jQuery,

Selectors helps to select element(s) in an
HTML document.
• jQuery has large number of options for
selectors, you can select an element or array
of elements by its ID, tag name, class name,
with particular attributes. There are lots
options to traverse through parent and
children to find out an element.
Syntax Description

$("p") All <p> elements

$("p.intro") All <p> elements with class="intro"

$(".intro") All elements with class="intro"
$("#intro") The first element with id="intro"
$("ul li:first") The first <li> element of each <ul>
$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
All elements with class="head" inside a <div> element with
$("div#intro .head")
id="intro"
 Getting started with jQuery Code
• Download a copy of the jquery JS file and
store it on your hard drive

• Reference the JS file in your HTML

• Access the jQuery functions via the $ object

 jQuery Effects

Function Description
$(selector).hide() Hide selected elements
$(selector).show() Show selected elements

$(selector).toggle() Toggle (between hide and show) selected elements

$(selector).slideDown() Slide-down (show) selected elements

$(selector).slideUp() Slide-up (hide) selected elements

$(selector).slideToggle() Toggle slide-up and slide-down of selected elements

$(selector).fadeIn() Fade in selected elements

$(selector).fadeOut() Fade out selected elements

$(selector).fadeTo() Fade out selected elements to a given opacity

$(selector).fadeToggle() Toggle between fade in and fade out

 Slide
<div id="slideMe">
This content will appear and disappear when the div is slid in and
out.</div>
<input type="button" id="btnSlideToggle" value="Slide Toggle">

<script src="http://code.jquery.com/jquery.js"></script>
<script>

$('#btnSlideToggle').click(function() {
$('#slideMe').slideToggle('fast');
});
</script>
 Fade
• <div id="fadeMe"> This content will appear and disappear
when the div is faded in and out. </div>
• <input type="button" id="btnFadeOut" value="Fade Out">
• <input type="button" id="btnFadeIn" value="Fade In">
<script>
• $('#btnFadeIn').click(function() { $
('#fadeMe').fadeIn('slow'); }); $
('#btnFadeOut').click(function() { $('#fadeMe').fadeOut(); });
• </script>
 Popup Boxes

• Alert Box
• Confirm Box
• Prompt Box
 Alert Box

<html>
<head>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box">

</body>
</html>
 Confirm Box
• var r=confirm("Press a button");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
 Prompt Box
• var person=prompt("Please enter your
name","Harry Potter");
if (person!=null && person!="")
{
x="Hello " + person + "! How are you today?";
}