Scribd
Upload
28 views12 pages

Asynchronous Javascript and XML

AJAX is a technique for creating interactive web applications using asynchronous JavaScript and XML requests to exchange data with a web server behind the scenes. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server, rather than reloading the entire page. The XMLHttpRequest object is used to send and receive data from the server which is processed by JavaScript functions. When the server response is ready, it can be used to dynamically update portions of the web page without reloading.

Uploaded by

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

Asynchronous Javascript and XML

AJAX is a technique for creating interactive web applications using asynchronous JavaScript and XML requests to exchange data with a web server behind the scenes. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server, rather than reloading the entire page. The XMLHttpRequest object is used to send and receive data from the server which is processed by JavaScript functions. When the server response is ready, it can be used to dynamically update portions of the web page without reloading.

Uploaded by

mgferraz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as 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

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>

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

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

The readyState Property


State

Description

The request is not initialized

The request has been set up

The request has been sent

The request is in process

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;
}
}

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