Scribd
Upload
581 views12 pages

Asynchronous Javascript and XML

AJAX stands for Asynchronous JavaScript And XML. AJAX allows web pages to request small bits of information from a server asynchronously in the background without interfering with the display and behavior of the existing page. It uses a combination of JavaScript, HTML and CSS to update parts of a web page asynchronously by exchanging data with a web server behind the scenes. The document provides an overview of how AJAX works, the XMLHttpRequest object used to communicate with servers, and an example of a basic AJAX application that retrieves time data from a server without reloading the whole page.

Uploaded by

vedicsoft
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
581 views12 pages

Asynchronous Javascript and XML

AJAX stands for Asynchronous JavaScript And XML. AJAX allows web pages to request small bits of information from a server asynchronously in the background without interfering with the display and behavior of the existing page. It uses a combination of JavaScript, HTML and CSS to update parts of a web page asynchronously by exchanging data with a web server behind the scenes. The document provides an overview of how AJAX works, the XMLHttpRequest object used to communicate with servers, and an example of a basic AJAX application that retrieves time data from a server without reloading the whole page.

Uploaded by

vedicsoft
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 12

AJAX

Asynchronous JavaScript And XML


INTRODUCTION
• AJAX stands for Asynchronous JavaScript And XML.

• AJAX is a type of programming made popular in 2005 by Google (with


Google Suggest).

• AJAX is not a new programming language, but a technique for creating


better, faster, and more interactive web applications.

• With AJAX you can create better, faster, and more user-friendly web
applications.

• AJAX is based on JavaScript and HTTP requests.

• AJAX is a browser technology independent of web server software.

• AJAX applications are browser and platform independent.

2
How does AJAX work?
• Pre-requisite:
– HTML/XHTML
– Javascript

• AJAX uses asynchronous data transfer (HTTP requests)


between the browser and the web server, allowing web
pages to request small bits of information from the server
instead of whole pages.

• JavaScript communicates directly with the server,


through the JavaScript XMLHttpRequest object

3
First AJAX Application

testAjax.html

<html>
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>

4
First AJAX Application
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>

5
More About the XMLHttpRequest Object

• The onreadystatechange Property


– stores the function that will process the
response from a server.
• The readyState Property
– holds the status of the server's response.
• The responseText Property
– holds data sent back from the server

6
The onreadystatechange Property
• Method 1:
xmlHttp.onreadystatechange = function()
{
// We are going to write some code here
}

• Method 2:
xmlHttp.onreadystatechange = function

-- Define the funtion() as usual

7
The readyState Property

State Description

0 The request is not initialized

1 The request has been set up

2 The request has been sent

3 The request is in process

4 The request is complete


8
The responseText Property

xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState==4)
{
// Get the data from the server's response
document.myForm.time.value=xmlHttp.responseText;
}
}

9
Sending Request to Server
• To send off a request to the server, we use the open()
method and the send() method.

xmlHttp.open("GET", "<server url>",true);


xmlHttp.send(null);

• When the AJAX function must be execute

<form name="myForm">
Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>

10
First AJAX Application
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>

11
Happy
AJAX
Programming!

Reference: http://www.w3schools.com/ajax/default.asp

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy