CLICK HERE TO DOWNLOAD PPT ON AJAX
AJAX Presentation Transcript
1 AJAX
2.Examples of applications using AJAX:
Google
Maps
Gmail
Youtube
Facebook tabs
2.Examples of applications using AJAX:
Maps
Gmail
Youtube
Facebook tabs
3.HOW AJAX WORKS
4.ABOUT AJAX
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!
5.EXAMPLE
To understand how AJAX works, we will create a small AJAX application:
Example ->
If You click on this button
change text automatically:
AJAX is not a new programming language.
AJAX is a technique for creating fast and dynamic web pages.
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!
5.EXAMPLE
To understand how AJAX works, we will create a small AJAX application:
Example ->
If You click on this button
change text automatically:
AJAX is not a new programming language.
AJAX is a technique for creating fast and dynamic web pages.
6. AJAX EXAMPLE EXPLAINED
The AJAX application above contains one div section and one button.
The div section will be used to display information returned from a server. The button calls a function named loadXMLDoc(), if it is clicked:
7.SCRIPT USED IN JAVA
<html> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
The AJAX application above contains one div section and one button.
The div section will be used to display information returned from a server. The button calls a function named loadXMLDoc(), if it is clicked:
7.SCRIPT USED IN JAVA
<html> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
8.
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
9.
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
10.AJAX Control Toolkit .NET 3.5 - Binary – AJAX Control Toolkit for .NET 3.5 and sample site(Recommended).
AJAX Control Toolkit .NET 4 - Binary – AJAX Control Toolkit for .NET 4 and sample site (Recommended).
AJAX Control Toolkit - Source – AJAX Control Toolkit source code for ASP.NET 3.5/ASP.NET 4. You must install the free Microsoft Ajax Minifier to open the source code version of the Ajax Control Toolkit.
11.REQUIREMENT SOFTWARE IN ASP.NET
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
12.SETUP OF AJAX USED IN DOT NET
AJAX Control Toolkit .NET 4 - Binary – AJAX Control Toolkit for .NET 4 and sample site (Recommended).
AJAX Control Toolkit - Source – AJAX Control Toolkit source code for ASP.NET 3.5/ASP.NET 4. You must install the free Microsoft Ajax Minifier to open the source code version of the Ajax Control Toolkit.
11.REQUIREMENT SOFTWARE IN ASP.NET
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
12.SETUP OF AJAX USED IN DOT NET
13.AJAX TOOLKIT
With the help of ajax toolkit download we can use in dot net technology:
As we will add Ajax toolkit.dll finally we get these toolkits automatically:
14.FIGURE: TOOLKIT OF AJAX
With the help of ajax toolkit download we can use in dot net technology:
As we will add Ajax toolkit.dll finally we get these toolkits automatically:
14.FIGURE: TOOLKIT OF AJAX
15.EXAMPLE
Next, for example, register the AjaxControlToolkit at the top of the page (or in the web.config for the whole project)
<%@ Register TagPrefix="asp"
Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit"%>
Next, for example, register the AjaxControlToolkit at the top of the page (or in the web.config for the whole project)
<%@ Register TagPrefix="asp"
Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit"%>
16.ADVANTAGES OF USING AJAX
Apart from knowing what is Ajax and it is equally important to know what are the advantages of using it. Now I think you will be more interested in our Ajax tutorials and learn about topics such as Ajax grips, Ruby on Rails, Data Ajax and many more.
Apart from knowing what is Ajax and it is equally important to know what are the advantages of using it. Now I think you will be more interested in our Ajax tutorials and learn about topics such as Ajax grips, Ruby on Rails, Data Ajax and many more.
17.Make multiple AJAX calls with different request from the same page
Instant result from server-side
Not to wait for the page to get reload
The interface is much more responsive, because only a small part of the page is transferred at a time
Waiting time is reduced when a visitor submits a form
Traffic to and from the server is considerably less because only one http request processed by client-side and server-side
Instant result from server-side
Not to wait for the page to get reload
The interface is much more responsive, because only a small part of the page is transferred at a time
Waiting time is reduced when a visitor submits a form
Traffic to and from the server is considerably less because only one http request processed by client-side and server-side
18.FINAL OUTPUT
Posts
0 comments