AJAX AJAX Asynchronous JavaScript and XML --- MADHAVI

HISTORY HISTORY 18 February 2005 by Jesse James Garrett “A New Approach to Web Applications”.

AJAX AJAX new way to use existing standards. creating fast and dynamic web pages. web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. Classic web pages, must reload the entire page.

TECHNOLOGIES TECHNOLOGIES HTML (or XHTML) and CSS,XHTML Document Object Model (DOM), XML and XSLT, and JavaScript.

WORK

APPLICATIONS APPLICATIONS Google suggest, Gmail, Youtube, and Facebook tabs.

BROWSERS BROWSERS Mozilla Firefox 1.0 and above Netscape version 7.1 and above Apple Safari 1.2 and above. Microsoft Internet Exporer 5 and above Opera 7.6 and above browser does not support AJAX it means that browser does not support creation of Javascript object XMLHttpRequest object.

XMLHttpRequest XMLHttpRequest Update a web page without reloading the page Request data from a server after the page has loaded Receive data from a server after the page has loaded Send data to a server in the background

Create All modern browsers have a built-in XMLHttpRequest object. variable=new XMLHttpRequest(); Old versions of Internet Explorer uses an ActiveX Object: variable=new ActiveXObject("Microsoft.XMLHTTP"); To handle all modern browsers, If it does, create an XMLHttpRequest object, if not, create an ActiveXObject

Request xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); MethodDescription open(method,url,async) method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) send(string) string: Only used for POST requests

Server Response PropertyDescriptionresponseTextget the response data as a stringresponseXMLget the response data as XML data The responseText Property Example document.getElementById("myDiv").innerHTML=xmlhttp.res ponseText; The responseXML Property If the response from the server is XML, Example xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("ARTIST");

Onreadystate readyStateHolds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready Status 200: "OK" 404: Page not found

SECURITY-Server Side AJAX-based Web applications use the same serverside security schemes of regular Web applications You specify authentication, authorization, and data protection requirements in your web.xml file (declarative) or in your program (programatic) AJAX-based Web applications are subject to the same security threats as regular Web applications

Client Side JavaScript code is visible to a user/hacker. Hacker can use the JavaScript code for inferring server side weakness

Example var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

.txt file AJAX is not a new programming language AJAX is a technique for creating fast and dynamic web pages

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.res ponseText; } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); }

Let AJAX change this text ChangeContent

output

Drawbacks If JavaScript is not activated, Ajax can't works Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines.

conclusion Create a web applications  faster and  dynamic

Special thanks to Krishna Raju sir