Transcript ajax overview - WordPress.com

AJAX OVERVIEW
1
What is AJAX?




AJAX stands for Asynchronous JavaScript And XML.
AJAX is not a technology in itself or it is not a new programming
language, but it is a technique for creating better, faster and more
interactive web applications using existing technologies like HTML
or XHTML, CSS, JavaScript, DOM, XML, XSLT and the
XMLHttpRequest object.
With AJAX, JavaScript can communicate directly with the server,
using the JavaScript XMLHttpRequest object. With this object,
JavaScript can trade data with a web server, without reloading the
page.
Popular sites using AJAX are Gmail, Flickr, Google Maps, My
Yahoo(shuffling windows) and many more.
2
Defining AJAX
Ajax incorporates:
 Standards-based presentation using XHTML and CSS.
 Dynamic display and interaction using the Document
Object Model.
 Data interchange and manipulation using XML and XSLT.
JSON can also be used as alternative format.
 Asynchronous data retrieval using XMLHttpRequest.
 JavaScript binding everything together.
3
Benefits of AJAX
Does quick, incremental updates to the user interface
without reloading the entire browser page. Thus
improves bandwidth utilization.
 Ajax applications are browser and platform
independent.
 Parse and work with XML documents.

4
How it works
AJAX runs in your browser
 Works with asynchronous data transfers (HTTP
requests) between the browser and the web server
 Http requests are sent by JavaScript calls without
having to submit a form
 XML is commonly used as the format for receiving
server data but plain text may be used as well

5
XMLHttpRequest Object
Introduced originally by Microsoft in IE as an ActiveX
object, called XMLHTTP.
 Later Mozilla, Safari and other browsers introduced
XMLHttpRequest that works exactly as Microsoft
ActiveX object.
 The object is supported in Internet Explorer 5.0+, Safari
1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
 More about this object can be read at.
http://developer.mozilla.org/en/AJAX/Getting_Started
http://www.w3schools.com/Ajax/ajax_example.asp

6
Steps to make AJAX call

Initialize XMLHttpRequest object
var xmlRequest;
function InitializeRequest() {
var e;
try {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlRequest = new XMLHttpRequest();
}
catch (e) {
try {
// code for IE6, IE5
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
7
Steps to make AJAX call

The setRequestHeader method (Optional)
xmlRequest.setRequestHeader("Content-Type", "application/x-www-formurlencoded");

The onreadystatechange event listener
xmlRequest.onreadystatechange = nameOfTheFunction;
OR
xmlRequest.onreadystatechange = function() {
// do the thing
};

The open method
Syntax: open(method, url, async, user, password)
xmlRequest.open('GET', url, true);
8
Steps to make AJAX call

The send method
xmlRequest.send();
OR
xmlRequest.send(null);
OR
xmlRequest.send(data);

The abort method
xmlRequest.abort();
9
Handling the Server Response
function nameOfTheFunction() {
if (xmlRequest.readyState == 4) {
if (xmlRequest.status == 200) { \\OK
alert(xmlRequest.responseText);
}
else {
alert('There was a problem with
the request.');
}
}
}

The HTTP response
◦ responseText
◦ responseXML
10
readyState Property
It defines the current state of the
XMLHttpRequest object
 Possible values for the readyState

State Description
0
The request is not initialized
1
The request has been setup
2
The request has been submitted
3
The request is in process
4
The request is completed
11
Retrieving Response Header Info
getResponseHeader
xmlRequest.getResponseHeader('Last-Modified');
 getAllResponseHeaders
xmlRequest.getAllResponseHeaders();
Output:

HTTP/1.1 200 OK
Server: Microsoft-IIS/4.0
Cache-Control: max-age=172800
Expires: Sat, 06 Apr 2002 11:34:01 GMT
Date: Thu, 04 Apr 2002 11:34:01 GMT
Content-Type: text/html
Accept-Ranges: bytes
Last-Modified: Thu, 14 Mar 2002 12:06:30 GMT
ETag: "0a7ccac50cbc11:1aad"
Content-Length: 52282

Complete List:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
http://en.wikipedia.org/wiki/List_of_HTTP_headers
12
Samples
13
Drawbacks







Ajax interfaces are substantially harder to develop properly than static
pages.
Pages dynamically created using successive Ajax requests do not
automatically register themselves with the browser's history engine.
Dynamic web page updates also make it difficult for a user to bookmark a
particular state of the application.
Any user whose browser does not support JavaScript or
XMLHttpRequest, or simply has this functionality disabled, will not be able
to properly use pages which depend on Ajax. Similarly, devices such as
mobile phones, PDAs, and screen readers may not have support for the
required technologies.
Ajax opens up another attack vector for malicious code that web
developers might not fully test for.
Ajax-powered interfaces may dramatically increase the number of usergenerated requests to web servers and their back-ends (databases, or
other). This can lead to longer response times and/or additional hardware
needs.
User interfaces can be confusing or behave inconsistently when normal
web patterns are not followed.
14
Question & Answers
15