Youtube Channel

Ajax



(Asynchronous JavaScript and XML)
  • The default communication between a browser and a server in web application is ‘synchronous communication’.
  • Synchronous communication means, a client (browser) has to wait for the server response after getting the response only, it is possible to send a second request to server.
  • In synchronous communication model, a client has to wait until a server has provided a response.
  • In synchronous model when a response is sent by a server then the new page will be loaded on browser on top of existing page. It means the user is lost the pervious page content.
  • The problems of synchronous model are solved by making the communication as asynchrous using AJAX technology
  • Ajax is a client side technology and it runs on web browser.
  • Ajax technology provides Ajax engine (object or component), which takes care about asynchronous communication between a browser and server.
  • Ajax is found by Google not by adaptive path company.
  • Adaptive Path Company creates Ajax applications for its clients, but it is not company who invented Ajax.
  • Technologies used in Ajax
  1. Html
  2. Dom –document object model
  3. Css
  4. JavaScript
  5. Xml
  6. Ajax engine
  • Real life examples of Ajax
  1. Google maps
  2. Netflix
  3. Gmail
  4. Yahoo maps
  5. Etc
partial updating a web page
  1. By default html pages are static
  2. To make html page as dynamic we use JavaScript and document object model
  3. Dom is a model for navigating the control to a particular area of a page either for reading the content or for writing the content.
  4. JavaScript is used to write the dom statements in a function and to invoke them at a particular point.
  5. By adding JavaScript and dom we can make html pages as a dynamic html (dhtml).
  6. To practically update a web page that area of that page can be identified with either a tag name or using id.
Document.getElementTagName(“p”).childNode[2].nodeValue=”xyz’;
<p>this is <b>kamlesh</b></p>
  1. Every elemtn is attributing and text are called nodes.
  2. In a page if we want to reach a particular reginon we call on eothe following two methods of document object
  • getElementById()
  • getElementByTagName()
We prefer getElementById() because id ‘s are unique in a page.
To read content of an id or to write the content to an id we call property innterHTML
The following example is to display a welcome content when a button is clicked using Java Script and dom in html-
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function welcome()
{
document.getElementById(“id1″).innerHTML=”welcome to Dhtml”;
}
</script>
</HEAD>

<BODY>
<input type=button value=”click me” onclick=”welcome()”>
<br>
<br>
<h1><span id=”id1″?</span></h1>
</BODY>
</HTML>
  • we can partially update the content of a page by identifying that portion or region with tab name.
  • In html dom: we can navigate to a particular tag of page by calling getElementByTagName() method of document object.
  • If etElementByTagName() is called , then either to read the content of that tag as to write the tab. We call node value property.
Example:
<p> i am kamlesh<b> mishar</b></p>
w.r.t to tag<p>
childNode[0]-ài am kamlesh
childNode[1]-à<b>
childNode[2]àerror
childNode[1].childNode[0]-àmishra

example 2
<html>
<head>
<title>welcome</title>
</head>
<body>
</body>
</html>
w.r.t <html> tag
childNode[1]-àwelcome
childNode[4]-àbody

wrt <head> tag
childNode[1]-àwelcome
childNode[2]-àerror

wrt to <html> tag
childNode[1]-à<body>
childNode[0].childNode[0]-à<title>


Activation of Ajax engine
o   Each web browser by default contains Ajax engine for asynchronous communication between a browser and a server.
o   By default Ajax engine is in de-activated state on browser.
o   To work with Ajax technology first of all we used to activate the engine.
o   Ajax engine will be either in the form of activex object or in the form of XML HttpRequest.
o   In internet explorer browser the Ajax engine will be in the form of activex object and in non internet explorer browser the engine will be in the form of XMLHttpRequest.
o   While activating the Ajax engine our application should support for both ie and non ie browser also. So we use one of the following two ways to active Ajax engine.

Way 1-
If(window.ActiveXobject)
{
//for internet explorer(ie)
Var xhr=new ActiveXobject(msxm2.XMLHTTP);
}
Else
{
//for non internet explorer(non-ie)
Var xhr=new XMLHttprequest();
}

Download Examples