Scribd
Upload
24 views11 pages

Manjeet

AJAX allows web pages to asynchronously exchange small amounts of data with a server in the background without reloading the entire page. It uses a combination of XMLHttpRequest, JavaScript, CSS, and XML to update parts of a web page rather than reload the whole page. An AJAX application example uses an XMLHttpRequest object to retrieve text from an external file and display it in a div element on the page without reloading when a button is clicked.

Uploaded by

Manjit kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views11 pages

Manjeet

AJAX allows web pages to asynchronously exchange small amounts of data with a server in the background without reloading the entire page. It uses a combination of XMLHttpRequest, JavaScript, CSS, and XML to update parts of a web page rather than reload the whole page. An AJAX application example uses an XMLHttpRequest object to retrieve text from an external file and display it in a div element on the page without reloading when a button is clicked.

Uploaded by

Manjit kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

AJAX(Asynchronous

JavaScript and XML)


AJAX Introduction
o AJAX = Asynchronous JavaScript and XML.
o AJAX is not a new programming language, but a new way to use existing
standards.
o AJAX is the art of exchanging data with a server, and updating parts of a web
page - without reloading the whole page.
o AJAX is about updating parts of a web page, without reloading the whole
page.
o Before you continue you should have a basic understanding of the following:
o HTML / XHTML
o CSS
o JavaScript / DOM
What is AJAX?
o AJAX = Asynchronous JavaScript and XML.
o AJAX is a technique for creating fast and dynamic web pages.
o 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.
o Classic web pages, (which do not use AJAX) must reload the entire page if the
content should change.
o Examples of applications using AJAX: Google Maps, Gmail, Youtube, and
Facebook tabs.
How AJAX Works
AJAX is Based on Internet Standards

o AJAX is based on internet standards, and uses a combination of:


o XMLHttpRequest object (to exchange data asynchronously with a server)
o JavaScript/DOM (to display/interact with the information)
o CSS (to style the data)
o XML (often used as the format for transferring data)
AJAX Example
o To understand how AJAX works, we will create a small AJAX application:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
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>
</head>
<body>
Output

infobizzs.com
AJAX Example Explained
o The AJAX application above contains one div section and one button.
o The div section will be used to display information returned from a server. The
button calls a function named loadXMLDoc(), if it is clicked:
<!DOCTYPE html>
<html>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>


<button type="button" onclick="loadXMLDoc()">Change
Content</button>

</body>
</html>
o Next, add a <script> tag to the page's head section. The script section contains the
loadXMLDoc() function:
<head>
<script>
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

You might also like