AJAX
Download
1 / 14

AJAX - PowerPoint PPT Presentation


  • 128 Views
  • Uploaded on

AJAX. Bharat chaitanya. What is AJAX ?. A synchronous J avaScript a nd X ML is a combination of standard Web technologies for the browser based web applications. JavaScript, CSS, DOM, XML It provides seamless interactivity in browser clients. No browser reloads

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' AJAX' - louisa


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

AJAX

Bharat chaitanya


What is ajax
What is AJAX ?

  • Asynchronous JavaScript and XML is a combination of standard Web technologies for the browser based web applications.

    • JavaScript, CSS, DOM, XML

  • It provides seamless interactivity in browser clients.

    • No browser reloads

    • Much smoother than standard request-wait-response for browser forms.


Main idea
Main Idea

  • AJAX’s key concept is the use of XMLHttpRequest to buffer requests and responses within the browser.

    • Use XMLHttpRequest to make a call to the server and get back the response without displaying it.

    • The response is stored locally as either plain text (plain or HTML), or XML.

    • JavaScript + DOM can be used to walk the HTML or XML tree to handle most user interactions.


Ajax cont
AJAX –Cont

  • AJAX is combination of several technologies:

    • For binding and user interaction -JavaScript

    • For styling - XHTML and CSS

    • For returned document handling -Document Object Model (DOM)

    • For data manipulation and conversion -XML and XSLT

    • For asynchronous data retrieval -XMLHttpRequest


Xmlhttprequest xhr
XmlHttpRequest (XHR)

  • An API that can be used by JavaScript, and other web browser scripting languages to transfer XML and other text data to and from a web server using HTTP.

  • Besides XML, XMLHttpRequest can be used to fetch data in other formats such as HTML or plain text.

  • XMLHttpRequest is an important part of the Ajax web development technique. It is used to create responsive and dynamic web applications.


Ajax frameworks
AJAX Frameworks

  • Toolkits to ease Ajax development.

  • Focus solely on the client side, providing easy ways to add visual effects to your pages or streamlining the use of XMLHttpRequest.

    • Taconite

    • DOJO

    • Scriptaculous

  • High-level approach to Ajax development.


Ajax applications
AJAX Applications

  • Google Maps

  • Gmail

  • Meebo


Pros and cons
Pros and cons

  • Pros

    • Asynchronous calls to a web server

    • Open standards

    • Bandwidth usage

  • Cons

    • Browser integration

    • Reliance on JavaScript

    • Order of XMLHttpRequests



Ajax code
AJAX code

// code for Mozilla, Opera, Safari

if (window.XMLHttpRequest)

{

req = new XMLHttpRequest();

}

// code for IE

else if (window.ActiveXObject)

{

try

{ // For versions later than 5.0

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

}

catch(e)

{ // For previous versions

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

}

}

req.open("GET", url, true); // true=script continues to run without waiting for response

req.onreadystatechange = callback; //must when true

req.send(null);


Servlet
Servlet

String targetId = request.getParameter("id");

if (targetId.equals("bharat"))

{

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("<message>valid</message>");

}

else

{

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("<message>invalid</message>");

}


Ajax code1
AJAX Code

function callback()

{

// readyState of 4 signifies request is complete

if (req.readyState == 4)

{

// status of 200 signifies successful HTTP call

if (req.status == 200)

{

parseMessage();

}

}

}


Ajax code2
AJAX Code

function parseMessage()

{

var message = req.responseXML.getElementsByTagName("message")[0];

setMessage(message.childNodes[0].nodeValue);

}

function setMessage(message)

{

var mdiv = document.getElementById("userIdMessage");

if (message == "invalid")

{

mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";

} else

{

mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";

}

}


ad