Post on 15-May-2015
description
transcript
By Arpan ChavdaBy Arpan Chavda
09BCE00609BCE006
AJAX = Asynchronous JavaScript and XML
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
What is AJAX?
Google Suggest AJAX was made popular in 2005 by Google, with
Google Suggest. Google Suggest is using AJAX to create a very
dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.
Afterwards, Google put AJAX on Gmail and youtube and lots of products and other websites also followed AJAXIAN method to make dynamic pages like facebook,twitter,Hotmail,etc.
History
Examples
Google suggest
Gmail
Password verification
How AJAX works?
XMLHttpRequest - supports all kind of HTTP request type.
IFrame - It can make requests using both POST and GET methods
The interface is much responsive, instead of the whole page; a section of the page is transferred at a time.
Waiting time is reduced Traffic to and from the server is reduced.
Advantages
XMLHttpRequest –Maintainance of Older Browsers.
IFrame - implementation difference among different browsers. Unnecessary history records.
Cookies - It prohibits no synchronous requests, it does not cope with large requests/results.
Disadvantages
HTML(Hypertext Markup Language) XMLHttpRequest object (to exchange data
asynchronously with a server) JavaScript/DOM (to display/interact with the
information) CSS (to style the data) XML (often used as the format for transferring
data) You can use PHP or ASP.NET for your purpose
Prerequisites of AJAX
XMLHttpRequest Object Open method Send method
Server Response Objects responseText Property responseXML Property
onreadystatechange event readyState property Status property
AJAX functions
Syntax for creating an XMLHttpRequest object for Modern Browsers(IE7+,Chrome & Firefox):
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest Object
Method Description
open(method,url,async)
Specifies the type of request, the URL, and if the request should be handled asynchronously or not.method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.string: Only used for POST requests
Send a request to Server
variable.open("GET","ajax_info.txt",true);variable.send();
responseText property get the response data as a string If the response from the server is not XML, use
the responseText property. Example:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Server Response
responseXML property get the response data as XML data
Example:xmlDoc=xmlhttp.responseXML;
txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }document.getElementById("myDiv").innerHTML=txt;
Conti.
When using async=true, specify a function to execute when the response is ready in the onreadystatechange event:
Example xmlhttp.onreadystatechange=function()
{ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();
Onreadystatechange event
Property Descriptiononreadystatechange
Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established2: request received 3: processing request 4: request finished and response is ready
status 200: "OK"404: Page not found
Wiley -Learn JavaScript and Ajax with w3Schools.com-Ebook edition
O'Reilly Media, Inc. Head first AJAX by Rebecca Riordan
Ajax programming by Wikipedia (http://en.wikipedia.org/wiki/Ajax_(programming))
AJAX for Designers (Document) by David Heller
References