AJAX

AJAX stands for Asynchronous Javascript and XML processing. AJAX is not programming language but it is one of the programming concept.

Def: AJAX is the art of exchanging data with a server and update parts of a web page without reloading whole page.

  1. AJAX applications are browser-platform independent
  2. AJAX can be used for creating rich, web-based applications that look and works like a desktop application.
  3. With AJAX we can create better, faster, and more user-friendly web applications.
  4. AJAX will work based on Javascript and HTTP requests.
  5. AJAX is a type of programming mode which was populared in the year 2005 by Google(With Google suggest)

AJAX is the use of non standard XMLHTTPRequst object to communicate with server side scripts. It can send as well as receive information in variety of formats includeing XML. HTML, and even text files. AJAX’s most appealing characterstics, however, it its “asynchronous” nature, which means that it can do all of this without having to refresh the page. This allows us to update protions a page based upon server events.

Asynchronous: Asynchronous means getting the response of the server without reloading current web page.

Synchronous: Synchronous means getting response of the server each and every time after reloading the web page.

Why to use AJAX: It is used mainly to build a fast, dynamic website, but also resources. For improving sharing of resources, it is better to use the power of all client computers sharing of resources. It is better to use the power of all the client computers rather than just unique server network. AJAX allows performing processing on client computer (in JavaScipt) with data taken from the server.

The processing of web page formerly was only server-side, using services or PHP scipts, before the whole page was sent within the network. But AJAX can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus etc..

For example, fields of forms, choices of user, may be processed and the result displayed immediately into the same page.

How does AJAX work: AJAX uses a programming model with display and events. These events are user actions they call functions associated to elements of the web page.

Interactively it is achieved with form and buttons. DOM allows linking elements page with actions and also extracting data from XML files provided by the server.

The keystone of AJAX is the XMLHttpRequest

XMLHttpRequest:

All modern browsers support the XMLHttpRequest object(IE5 and IE6 uses an ActiveX object)

The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of web pae, without reloading whole page.

How to create an XMLHttpRequest Object:

All modern browsers(IE7+, Firefox, Chrome, safari and opera) have a built-in XmlRequest object.

Syntax for HttpRequest Object:

Variable=new XMLHttpRequest();

Syntax for ActiveXObject(IE5 and IE6) use an ActiveXObject

Variable=new ActiveXObject(“Mirosoft.XMLHTTP”);

To work with AJAX, XMLHttpRequest object(AJAX engine) provides us four methods and six properties.

The two methods provided by XMLHttpRequest objects are

  1. Open(“GET/POST(Any http method),url,true/false)
  2. send() or send(String)
  3. setRequestHeader(header_name,header_value)
  4. overrideMIMEType(“text/html”) (supported by only firefox)
Method Description
Open(http_method,url,async) Specifies the type of reuqst, the URL, and if the request should be handled asynchronously or not.

Method: the type of request: GET or POST or any other http method

url: the location of the file on the server

async: true(asynchronous) or false (synchronous)

Send Send request  to the server.
Send(String) Only used for POSt methods
setRequestHeader(header,value) Add HTTP headers to the request.

Header: specifies the header name

Value: specifies the header value

 

GET: GET is simplifier and faster than post, and can be used in most cases.

POST: A cached file is not an option (update a file or database on the server)

Sending a large amount of data to the server(POST has no size limitations)

Sending user input(which can contain unknown characters), POST is more robust and secure than GET.

EX: A simple GET method is shown below

xmlhttp.opn(“GET”,”demo_get.jsp”,true);

xmlhttp.send();

If we want ot send information with theGET method, add the information to the URL

xmlhttp.open(“GET”,”demo_get2.jsp?fname=sachin&lname=Tendulkar”true)

xmlhttp.send();

AJAX has given six properties. Those are listed below.

  1. Onreadystatechange
  2. readyState
  3. status
  4. responseText
  5. responwXML
  6. StatusText:

Onreadystatechange: This property holds or contains the name of the Javascipt function to be called whenever response from the server is received by the AJAX engine. While working with AJAX, we need to take the support of minimum of two Javascript functions

One for sending the request to the server and another for receiving response from the server.

 

EX:

function f1()

{

var x=new ActiveXObject(“Microsoft.XMLHTTP”);

x.onreadystatechange=fun2;

---------------

x.open(-,-)

x.send();

ReadyState:

This property holds the status of the request.

This value of this property will be dynamically changed.

Ready state property values are varied from 0 to 4.

0: request not initialized: AJAX engine is created, but open(-,-) is not called.

1: server connection established: Means that open(-,-,-) is called

2: Request received: means that send() is called

3: Processing request: Means that request is under processing.

4: Request finished and response is ready: Means that response for the request is generated  by the server.

  1. Status: Status attributes holds different status codes to know the status of the response returned by the server.

100-109: represents info

200-299: represents success response

300-399: represents redirection

400-499: represents incomplete web resource

500-599: represents server error

  1. ResponseText: This property holds the response data returned by the server for the given req

request

  1. ResponseXML: This property holds the response generated by the server for the given

requests.

  1. StatusText: StatusText is generated text message of response text.

Procedure to develop AJAX code to interact with the web resourece program of web application:

  1. Make web page generate javascript call based request.

EX: Enter country: <input type=”text” name=”t1” onKeyup=”f1()”/>

When the key of keyboard is pressed and released to type a letter in the text.

Here “onKeyup” even is raised and it calls the javascript function “f1()”

Step2: Keep AJAX engine ready in the JavaScript function definition.

Function f1()

{

If(window.XMLHttpRequest)  //object of the current window

{

Var areng=new XMLHttpRequest() //code for IE+7, Firefox, Chrome, Opera

}

else if(window.ActiveXObject) //ActiveX version

{

Var aeng=new ActriveXObject(“Mircosoft.XMLHTTP”)  //code for IE6,7

}

——

———-

}

  1. Specify the name fo the call back function to AJAX engine.

aeng.onreadystatechange=connection;

The dunction that specified “connection” Javascript function will be called automatically by Ajax engine for each change that takes place in readyState. Property values like 0-1,1-2,1-3,1-4

readyState property value is “4”

  1. Process the request of the url having query string.

//read from data

var String=document.f1.t1.value;

//frame request url

var url=”test.jsp?q=”+strng;

  1. Makes AJAX engine send request to targe web resource program asynchronously

Aseng.open(“GET”,url,truye)

  1. Develop targe web resource program like servlet or jsp
  2. Define callback function definition(java script function) having logic to update webpage content when AJAX engine’s “responseState” is “4” and http response “status” code is “200”.

AJAX web architecture:

ajx ar

Advantages of AJAX:

  1. a) Allows feedback, confirmation and errors messages to be displayed on same page/view.
  2. b) Wider variety of controls e.g. sliders, date pickers, windows, tabs, spinners etc.
  3. c) No installation, just an AJAX enabled browser required
  4. d) Higher immunity to viruses and piracy.
  5. e) Reduced load on server resources as processing is distributes overserverand client
  6. f) Lowered application development and deployment costs
  7. g) Reduction in network traffic due to more intelligent client and selective data request

Disadvantages of AJAX:

  • The back and refresh button are rendered useless
    With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed.
  • Back functionality cannot work because the dynamic pages don’t register themselves to the browsers history engine. Hence the need of Iframe becomes essential.
  • The page cannot be bookmarked if implemented using Ajax.
  • If java script is disabled , Ajax will not work
  • Because different components of the pages are loaded at different times, response time may be slow.
  • Because different components of the pages are loaded at different times it may create confusion for the user.

Examples :

<!DOCTYPE html>
<html>
<body>

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

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

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(xhttp);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>