Category Archives: Ajax

AJAX In Action

This section will give you clear picture of the exact steps of AJAX operation.

Steps of AJAX Operation

A client event occurs
An XMLHttpRequest object is created
The XMLHttpRequest object is set up.
The XMLHttpRequest object makes an asynchronous request to the Webserver.
Webserver returns the response.
The XMLHttpRequest object calls the callback() function and processes the result.
The HTML DOM is updated

Working Example of AJAX:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
var xmlhttp="";
function createObject(){
   try{
   // Opera 8.0+, Firefox, Safari
   xmlhttp= new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
   }catch (e) {
      try{
         xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         alert("Browser not supports AJAX!");
         return false;
      }
   }
 }
 //return xmlhttp;
}
createObject();
function test(){
xmlhttp.open("GET","result.php",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
	document.getElementById("result_div").innerHTML=xmlhttp.responseText;
	}

}
}
</script>
</head>

<body>
<a href="javascript:void(0);" onclick="test();">Click Here</a>
<div id="result_div"></div>
</body>
</html>

<html>

<head>

<title>Untitled Document</title>

var xmlhttp="";

function createObject(){

try{

// Opera 8.0+, Firefox, Safari

xmlhttp= new XMLHttpRequest();

}catch (e){

// Internet Explorer Browsers

try{

xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");

}catch (e) {

try{

xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

alert("Browser not supports AJAX!");

return false;

}

//return xmlhttp;

}

createObject();

function test(){

xmlhttp.open("GET","result.php",true);

xmlhttp.send();

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

}

</script>

</head>

<body>

<a href="javascript:void(0);" onclick="test();">Click Here</a>

</body>

</html>

Here is the “result.php”

<?php
   echo "Ajax Result";
?>

<?php

echo "Ajax Result";

AJAX Browser Support

Leave a reply

All the modern browsers have built-in support for AJAX, it means they supports the creation of javascript XMLHttpRequest object. The XMLHttpRequest enables the web page to communicate with the server and to make the data exchange possible.

There are three browser specific methods available to create the XMLHttpRequest object or to check the browser’s AJAX support –

XMLHttpRequest object in IE7+, Firefox, Chrome, Opera, Safari

httpRequest = new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari

1	httpRequest = new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari

Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object

httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

1 2	httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

AJAX readyState

Leave a reply

Whenever XMLHttpRequest object makes request to server this request goes through a cycle till server returns the response, XMLHttpRequest object have option to keep track of this request/readyState cycle using onreadystatechange property which triggers or fires a event as readyState changes.

The readyState property defines the current state of the XMLHttpRequest object.

Property	Description
onreadystatechange	It defines an event handler for an event that fires at every state change.
readyState	Returns the status of the XMLHttpRequest. possible values for the readyState propery: 0: The request is not initialized 1: Server connection has been set up 2: The request has been sent 3: The request is in process 4: The request is completed and response is ready
status	200: “OK” 404: Page not found
statusText	Returns the status as a string (e.g. “Not Found” or “OK”).

<script language="javascript">
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("result_div").innerHTML=xmlhttp.responseText;
    }
  } 
</script>

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

}

</script>

Using a Callback Function in AJAX

<script language="javascript">
xmlhttp.onreadystatechange=callback_fun;
function callback_fun()
{

	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
	document.getElementById("result_div").innerHTML=xmlhttp.responseText;
	}

}
</script>

xmlhttp.onreadystatechange=callback_fun;

function callback_fun()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

}

</script>

AJAX Response

Leave a reply

After interpreting or processing the request server returns the response, to get the handle the response from the server, use the responseText or responseXML property of the XMLHttpRequest object.

Property	Description
responseText	The responseText property returns the response as a string
responseXML	The responseXML property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.

<script language="javascript">
document.getElementById("result_div").innerHTML=xmlhttp.responseText;
</script>

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

</script>

<script language="javascript">
var xmlDoc=xmlHttp.responseXML;
document.getElementById("result_div").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
</script>

var xmlDoc=xmlHttp.responseXML;

document.getElementById("result_div").innerHTML=

xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

</script>

AJAX Request

Leave a reply

After checking the browser support or successfully creating the XMLHttpRequest object, we can exchange the information between server and webpage by making the request using XMLHttpRequest object.

XMLHttpRequest object have the following methods to send a request to server –

Method	Description
open(method,url,async)	We can now open our request to the server by calling the open method that belongs to the AJAX object that we created in previous chapter.This method takes three parameters. method: The method parameter can have a value of “GET” or “POST”. url: Location of the script on the server async: TRUE or FALSE(Asynchronous means that the processing will continue on without waiting for the server side retrieval to complete whereas a synchronous call would stop all other processing and wait for the response from the server)
send(string)	Sends the request to the server.string: Only used for POST requests
setRequestHeader(header,value)	Adds a header/value pair to the HTTP header to be sent. header:Header name value: Header value

Method

Description

open(method,url,async)

We can now open our request to the server by calling the open method that belongs to the AJAX object that we created in previous chapter.This method takes three parameters.

method: The method parameter can have a value of “GET” or “POST”.

url: Location of the script on the server

async: TRUE or FALSE(Asynchronous means that the processing will continue on without waiting for the server side retrieval to complete whereas a synchronous call would stop all other processing and wait for the response from the server)

send(string)

Sends the request to the server.string: Only used for POST requests

setRequestHeader(header,value)

Adds a header/value pair to the HTTP header to be sent.

header:Header name

value: Header value

<script language="javascript">

xmlhttp.open("GET","result.php",true);
xmlhttp.send();
document.getElementById("result_div").innerHTML=xmlhttp.responseText;
</script>

xmlhttp.open("GET","result.php",true);

xmlhttp.send();

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

</script>

<script language="javascript">
/*
To avoid the cached result we can add a random string to the URL
*/
xmlhttp.open("GET","result.php?r=" + Math.random(),true);
xmlhttp.send();
document.getElementById("result_div").innerHTML=xmlhttp.responseText;
</script>

To avoid the cached result we can add a random string to the URL

xmlhttp.open("GET","result.php?r=" + Math.random(),true);

xmlhttp.send();

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

</script>

<script language="javascript">
/*
To POST form data ,sets HTTP header with setRequestHeader().
Specify the data you want to send in the send() method
*/
xmlhttp.open("POST","post_form.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=christene&roll=101");
</script>

To POST form data ,sets HTTP header with setRequestHeader().

Specify the data you want to send in the send() method

xmlhttp.open("POST","post_form.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("name=christene&roll=101");

</script>

<script language="javascript">
<!-- 
var xmlhttp;
function createObject(){
   try{
   // Opera 8.0+, Firefox, Safari
   xmlhttp= new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         alert("Browser not supports AJAX!");
         return false;
      }
   }
 }
}
//-->
xmlhttp=createObject();
xmlhttp.open("GET","result.php",true);
xmlhttp.send();
document.getElementById("result_div").innerHTML=xmlhttp.responseText;
</script>

<!--

var xmlhttp;

function createObject(){

try{

// Opera 8.0+, Firefox, Safari

xmlhttp= new XMLHttpRequest();

}catch (e){

// Internet Explorer Browsers

try{

xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");

}catch (e) {

try{

xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

alert("Browser not supports AJAX!");

return false;

}

//-->

xmlhttp=createObject();

xmlhttp.open("GET","result.php",true);

xmlhttp.send();

document.getElementById("result_div").innerHTML=xmlhttp.responseText;

</script>

AJAX Introduction

Leave a reply

What is AJAX?

The acronym AJAX stands for Asynchronous JavaScript and XML.

It is usually a combination of several technologies such as HTML, JavaScript, The DOM and the XMLHttpRequest object (an object that lets you make requests to a server).
AJAX allows you make web based user interfaces more responsive and rich by letting you update specific part of the page without refreshing the entire page.
Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.
With AJAX when submit is pressed, JavaScript will make a request to the server, process the results and update the current page. The user will never know that anything was even sent to the server.
XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
AJAX is a web browser technology independent of web server software.
A user can continue to use the application while the client program requests information from the server behind the scenes

How AJAX Works

[images]

AJAX is based on the following open standards

Browser-based presentation using HTML and Cascading Style Sheets (CSS)
Data stored in XML format and fetched from the server
Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
JavaScript to make everything happen

AJAX – Recommended Prerequisites

It is recommended that you are familiar with following before attempting this tutorial.

Basic HTML Concepts (GET requests/URL parameters)
Basic Javascript Concepts
The <div> tag

More Ajax

Learn

ABOUT PAGES

Category Archives: Ajax

AJAX In Action

Steps of AJAX Operation

Working Example of AJAX:

AJAX Browser Support

XMLHttpRequest object in IE7+, Firefox, Chrome, Opera, Safari

Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object

AJAX readyState

Using a Callback Function in AJAX

AJAX Response

AJAX Request

XMLHttpRequest object have the following methods to send a request to server –

AJAX Introduction

What is AJAX?

How AJAX Works

AJAX is based on the following open standards

AJAX – Recommended Prerequisites