Transcript Ajax

Ajax
Dr. Reda Salama
The hype






Ajax (sometimes capitalized as AJAX) stands for
Asynchronous JavaScript And XML
Ajax is a technique for creating “better, faster, more
responsive web applications”
These changes are so sweeping that the Ajax-enabled web is
sometimes know as “Web 2.0”
The term Ajax was coined by Jesse James Garrett of
Adaptive Path in February 2005, when he was presenting
the previously unnamed technology to a client
Ajax technologies (XHTML, JavaScript, CSS, dynamic
HTML, the DOM and XML) have existed for many years.
Web applications with Ajax were supposed to replace all
our traditional desktop applications. It was a DREAM
2
The Dream: Make Web looks like Desktop

desktop application characteristic (Spreadsheet app, etc.)


responses intuitively and quickly
gives a user meaningful feedback's instantly




A cell in a spreadsheet changes color when you hover your mouse over it
Icons light up as mouse hovers them
Things happen naturally. No need to click a button or a link to
trigger an event
Web Application characteristic

“Click, wait, and refresh” user interaction


Page refreshes from the server needed for all events, data submissions, and
navigation
Synchronous “request/response” communication model

>
The user has to wait for the response
3
The reality





Ajax is a technique for creating “better, faster, more
responsive web applications”
 But they still aren’t as responsive as desktop
applications, and probably never will be
 Web applications are useless when you aren’t on the
web
GUIs are HTML forms (and you know how beautiful
and flexible those are)
The technology has been available for some time
Nevertheless, Ajax is the “hot new thing” because:
 Google uses it extensively, in things like Google
Earth and Google Suggest
 It has been given a catchy name
Ajax is a useful technology, and a good thing to have on
your resumé
4
Example
5
Ajax Issues






Usability of web applications has lagged behind compared to
desktop applications
Rich Internet Applications (RIAs)
 Web applications that approximate the look, feel and usability of
desktop applications
 Two key attributes—performance and rich GUI
RIA performance
 Comes from Ajax (Asynchronous JavaScript and XML), which
uses client-side scripting to make web applications more
responsive
Ajax applications separate client-side user interaction and server
communication, and run them in parallel, making the delays of
server-side processing more transparent to the user
“Raw” Ajax uses JavaScript to send asynchronous requests to the
server, then updates the page using the DOM
When writing “raw” Ajax you need to deal directly with crossbrowser portability issues, making it impractical for developing
large-scale applications
6
Ajax Issues (Cont.)





Portability issues
 Hidden by Ajax toolkits, such as Dojo, Prototype and Script.aculo.us
 Toolkits provide powerful ready-to-use controls and functions that
enrich web applications and simplify JavaScript coding by making it
cross-browser compatible
Achieve rich GUI in RIAs with
 Ajax toolkits
 RIA environments such as Adobe’s Flex, Microsoft’s Silverlight and
JavaServer Faces
 Such toolkits and environments provide powerful ready-to-use controls
and functions that enrich web applications.
Client-side of Ajax applications
 Written in XHTML and CSS
 Uses JavaScript to add functionality to the user interface
XML is used to structure the data passed between the server and the client
XMLHttpRequest
 The Ajax component that manages interaction with the server
 Commonly abbreviated as XHR.
7
Traditional Web Applications vs. Ajax Applications

Traditional web applications






User fills in the form’s fields, then submits the form
Browser generates a request to the server, which receives the request and
processes it
Server generates and sends a response containing the exact page that the
browser will render
Browser loads the new page and temporarily makes the browser window
blank
 Client waits for the server to respond and reloads the entire page with
the data from the response
While a synchronous request is being processed on the server,
the user cannot interact with the client web browser
The synchronous model was originally designed for a web of
hypertext documents
 some people called it the “brochure web”
 model yielded “choppy” application performance
8
Traditional Web Applications (load entire)
9
Ajax-enabled Web Applications (load partial)



In an Ajax application, when the user interacts with a page
 Client creates an XMLHttpRequest object to manage a
request
 XMLHttpRequest object sends the request to and awaits the
response from the server
 Requests are asynchronous, allowing the user to continue
interacting with the application while the server processes the
request concurrently
 When the server responds, the XMLHttpRequest object that
issued the request invokes a callback function, which typically
uses partial page updates to display the returned data in the
existing web page without reloading the entire page
Callback function updates only a designated part of the page
Partial page updates help make web applications more responsive,
making them feel more like desktop applications
10
Ajax-enabled web application interacting
with the server asynchronously.
11
Traditional vs. AJAX

Interface construction is
mainly the responsibility of
the server

Interface is manipulated by
client-side JavaScript
manipulations of the Document
Object Model (DOM)

User interaction via form
submissions

User interaction via HTTP
requests ‘behind the scenes’

An entire page is required
for each interaction
(bandwidth)

Communication can be
restricted to data only

Application is unavailable
while an interaction is
processing (application
speed)

Application is always
responsive
12
How Ajax works




You do something with an HTML form in your browser
JavaScript on the HTML page sends an HTTP request
to the server
The server responds with a small amount of data, rather
than a complete web page
JavaScript uses this data to modify the page?. How?


One possibility through the DOM
This is faster because less data is transmitted and
because the browser has less work to do
13
Underlying technologies





JavaScript
XHTML
CSS
DOM
XML/XSLT




HTTP
XMLHttpRequest


XML is often used for receiving data from the server
Plain text can also be used, so XML is optional
Object that performs asynchronous interaction with the server
All these are open standards
14
Starting from the browser…

Your browser must allow JavaScript, or Ajax won’t
work



Otherwise, there’s nothing special required of the browser
Your browser has some way of providing data to the
server—usually from an HTML form
JavaScript has to handle events from the form, create
an XMLHttpRequest object, and send it (via HTTP)
to the server


Nothing special is required of the server—every server can
handle HTTP requests
Despite the name, the XMLHttpRequest object does not
require XML because response can be sent also as html text
15
The XMLHttpRequest object


JavaScript has to create an XMLHttpRequest object
For historical reasons, there are three ways of doing this





For most browsers, just do
var request = new XMLHttpRequest();
For some versions of Internet Explorer, do
var request = new ActiveXObject("Microsoft.XMLHTTP");
For other versions of Internet Explorer, do
var request = new ActiveXObject("Msxml2.XMLHTTP");
Doing it incorrectly will cause an Exception
The next slide shows a JavaScript function for choosing
the right way to create an XMLHttpRequest object
16
Step1: Getting the XMLHttpRequest objectAlternative 1
var request = null; // we want this to be global
function getXMLHttpRequest( ) {
try { request = new XMLHttpRequest(); }
catch(err1) {
try { request = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(err2) {
try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(err3) {
request = null;
}
}
}
if (request == null) alert("Error creating request object!");
}
17
Step1: Getting the XMLHttpRequest objectAlternative 2
var req;
function initRequest() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
18
Step 2: Preparing the XMLHttpRequest object


Once you have an XMLHttpRequest object, you have
to prepare it with the open method
request.open(method, URL, asynchronous)
 The method is usually 'GET' or 'POST'
 The URL is where you are sending the data




If using a 'GET', append the data to the URL
If using a 'POST', add the data in a later step
If asynchronous is true, the browser does not wait for a
response (this is what you usually want)
request.open(method, URL)
 As above, with asynchronous defaulting to true
19
Step 3: Send the XMLHttpRequest object



Once the XMLHttpRequest object has been prepared, you have
to send it
request.send(null);
 This is the version you use with a GET request
request.send(content);
 This is the version you use with a POST request
 The content has the same syntax as the suffix to a GET request
 POST requests are used less frequently than GET requests
 For POST, you must set the content type:
request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
request.send('var1=' + value1 + '&var2=' + value2);
20
The escape method

In the previous slide we constructed our parameter list
to the server



This list will be appended to the URL (for a GET)
However, some characters are not legal in a URL


request.send('var1=' + value1 + '&var2=' + value2);
For example, spaces should be replaced by %20
The escape method does these replacements for you



request.send('var1=' + escape(value1) + '&var2=' +
escape(value2));
Look at
http://www.w3schools.com/tags/ref_urlencode.asp
escape() & unescape() Methods
 http://www.w3schools.com/jsref/jsref_escape.asp
21
Step 4: Get & evaluate the response



Ajax uses asynchronous calls—you don’t wait for the response
Instead, you have to handle an event
 request.onreadystatechange = someFunction;
 This is a function assignment, not a function call
 Hence, there are no parentheses after the function name
 When the function is called, it will be called with no parameters
 function someFunction() {
if(request.readyState == 4){
var response = request.responseText;
if (http_request.status == 200) {
// Do something with the response
}
}
}
To be safe, set up the handler before you call the send function
22
The readyState property




The readyState property defines the current state of the
XMLHttpRequest object.
Here are the possible values for the readyState property:
 readyState=0 after you have created the XMLHttpRequest
object, but before you have called the open() method.
 readyState=1 after you have called the open() method, but
before you have called send().
 readyState=2 after you have called send().
 readyState=3 after the browser has established a communication
with the server, but before the server has completed the response.
 readyState=4 after the request has been completed, and the
response data have been completely received from the server.
Not all browsers use all states
Usually you are only interested in state 4
Mostly from: http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp
23
The magic number 4



The callback function you supply is called not just once, but
(usually) four times
request.readystate tells you why it is being called
Here are the states:

0 -- The connection is uninitialized






This is the state before you make the request, so your callback function
should not actually see this number
1 -- The connection has been initialized
2 -- The request has been sent, and the server is (presumably) working
on it
3 -- The client is receiving the data
4 -- The data has been received and is ready for use
I don’t know any reason ever to care about the other states

I guess the browser just wants you to know it’s not loafing
24
The magic number 200


A ready state of 4 tells you that you got a response--it
doesn’t tell you whether it was a good response
The http_request.status tells you what the server
thought of your request
404 Not found is a status we are all familiar with
 200 OK is the response we hope to get
 Look at
http://www.w3schools.com/tags/ref_httpmessages.asp

25
Putting it all together
Head:
 function getXMLHttpRequest () { ... } // from an earlier slide
 function sendRequest() {
getXMLHttpRequest();
var url = some URL
request.open("GET", url, true); // or POST
request.onreadystatechange = handleTheResponse;
request.send(null); // or send(content), if POST
 function handleTheResponse() {
if (request.readyState == 4) { //4 means I have response
if (request.status == 200) {
var response = request.responseText;
// do something with the response string
} else {
alert("Error! Request status is " + request.status);
}
}
}
Body: <input value="Click Me" type="button" onclick="sendRequest">
26
On the server side


The server gets a completely standard HTTP request.
Server programming model remains the same





It receives standard HTTP GETs/POSTs
Can use Servlet, JSP, JSF, ...
In a servlet, this would go to a doGet or doPost method
The response is a completely standard HTTP response,
but partial HTML page as a response,
the server returns an arbitrary text string (possibly XML,
possibly something else). Response content type can be




text/xml
text/plain
text/json
text/javascript
27
Using response data


When you specify the callback function,
request.onreadystatechange = someFunction;
you can’t specify arguments
Two solutions:
 Your function can use the request object as a global variable
 This is a very bad idea if you have multiple simultaneous
requests
 You can assign an anonymous function:
request.onreadystatechange = function() {
someFunction(request); }
 Here the anonymous function calls your someFunction
with the request object as an argument.
28
Displaying the response


http_request.onreadystatechange =
function() { showContentsAsAlert(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
function showContentsAsAlert(http_request) {
if (http_request.readyState == 4) { /* 4 means got the response */
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
From: http://developer.mozilla.org/en/docs/AJAX:Getting_Started
29
responseText and responseXML

The Content-Type in the header tells the type of server
response



For non-XML, you can use text/html or text/plain
For sending XML, it's better to use text/xml
When the server sends text/xml, the browser parses it,
creates an XML DOM tree, and places this tree in the
responseXML object

The XML is also available in the responseText object, but to
use this you will have to parse it yourself
30
Displaying theAjax response

Here is the previous code for dealing with a non-XML
response:

function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
31
Doing it with XML


Here’s an XML file named test.xml:
<?xml version="1.0" ?>
<root> I'm a test. </root>
function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;
var root_node =
xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
} else {
alert('There was a problem with the request.');
}
}
}
32
Examples
1- Text Exmple:
http://www.w3schools.com/ajax/tryit.asp?filename=t
ryajax_first
2- XML Exampl
http://www.w3schools.com/ajax/tryit.asp?filename=try
ajax_responsexml
33
HTML DOM vs. XML DOM

The DOM for the web page represents HTML
The DOM for the XML represents the server's response

They have the same methods!

34
Problem: Lost response





You create a request object, and append your request
information to it
When the server responds, its result is also in the
request object
Question: What happens if, before you get a response,
you use the request object to send off another request?
Answer: You have overwritten the request object, so
the response to the original request is lost
Solution: In this situation, you will need to create and
use more than one request object
35
Summary






Create an XMLHttpRequest object (call it request)
Build a suitable URL, with ?var=value suffix
request.open('GET', URL)
request.onreadystatechange = handlerMethod;
request.send(null);
function handlerMethod() {
if (request.readyState == 4) {
if (http_request.status == 200) {
// do stuff
}
}
}
36
Sending XML to the server


The server is really good at handling name-value pairs
If you want to send XML...

It pretty much has to be sent as POST





XML gets long very quickly
All those special characters need to be URL-encoded
You have to
setRequestHeader("Content-Type", "text/xml")
The server doesn't have DOM trees--you will have to parse
the XML yourself
Bottom line: Sending XML to the server is too much
work!
37
Problem: Only works the first time



You send a request using GET, and it works
Something changes on the server, and you want to see the new
value, so you send the same request again
Nothing happens! Why not?
 Answer: The browser has cached your URL; it sees that you
use it again without change, and gives you the cached response
 Wrong solution: Turn off browser caching
 That doesn't work at the level of JavaScript
 Correct solution: Change the URL in some unimportant way
 url = url + "?dummy=" + newDate().getTime(); //
time is in ms
 The server is free to ignore this parameter
 Another correct solution: Use POST instead of GET
38
Problem: JavaScript isn’t loaded



You put the JavaScript in an external .js file
Some browsers ignore the external JavaScript file
Solution: Put a space between the opening script tag and the
closing script tag
 Not this:
<script type="text/javascript" src="ajax.js"></script>
 But this:
<script type="text/javascript" src="ajax.js"> </script>
39
XMLHTTP Methods
abort()
Aborts a request.
open(method, uri, [async, Sets properties of request
[username, [password]]]) (does not send). (Note
about async.)
send(content)
Sends the request with
content in the body.
content should be null
unless method is ‘post’.
40
XMLHTTP Properties
onreadystatechange
Function obj to handle request
progress.
readyState
Read only. Current request
progress.
responseText
Read only. Response body as string.
responseXML
Read only. Response body parsed as
text/xml and in DOM Document obj.
status
Read only. HTTP response status
code.
41
Typical AJAX Flow


Make the call
 Gather information (possibly from HTML form)
 Set up the URL
 Open the connection
 Set a callback method
 Send the request
Handle the response (in callback method)
 When request.readyState == 4 and request.status == 200
 Get the response in either text or xml
 request.responseText or request.responseXML
 Process the response appropriately for viewing
 Get the objects on the page that will change
 document.getElementById or
document.getElementByName, etc.
 Make the changes
42
Instantiating XMLHTTP
function getXMLHTTP() {
var req = false;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
}
catch(e) {}
}
else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {}
}
} // end if
return req;
} // end function
43
Instantiating XMLHTTP
var request = getXMLHTTP();
request.onreadystatechange = handleReadyStateChange;
request.open(‘get’,‘/bar/checkuname.php?u=jessica’);
request.send(null);
Handling Responses
function handleReadyStateChange() {
if (!request) return;
// ignore unless complete readyState
if (request.readyState == 4) {
// Ignore unless successful.
if (request.status == 200) {
// act on the response
var xmlbody = request.responseXML;
// the line below is important!
request = false;
processResponse(xmlbody);
}
}
} // end function
44
Example Response XML
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<usernameresult>
<username value="jessica" available="false" />
<usernamealts>
<username value="jess" available="true" />
<username value="jessica2005" available="true" />
<username value="jessie" available="true" />
</usernamealts>
</usernameresult>
•
Requested username is unavailable, but the script has
determined some alternatives.
45
Acting on a Response


JavaScript’s alert() function? You could use this, but it’s
annoying and quite defeats one of the reasons to use
AJAX: allowing the application to always remain
responsive.
A better choice is to manipulate the DOM with
JavaScript.
46
Manipulating the DOM
function processResponse(oXML) {
if (!oXML) return;
if (!oXML.documentElement) return;
var doc = oXML.documentElement;
// return a nodeList of all username elements
var unames = doc.getElementsByTagName('username');
var msgs = new Array();
// iterate through the username nodeList
for (var i=0; i<unames.length; i++) {
var u = unames.item(i);
var username = u.getAttribute('value');
var availability = u.getAttribute('available');
// make the available attribute more user-friendly
if (availability == 'true') {
availability = 'available';
}
else {
availability = 'not available';
}
msgs[msgs.length] = 'Username '+ username
+' is '+ availability;
}
47
processResponse Cont’d
// create an unordered list element
ul = document.createElement('ul');
ul.id = 'msg';
// for each message, create a list item
// element and a text node containing
// the message. The text node is a child
// node of the list item element, and the
// the list item is a child node of the
// unordered list element.
for (var k=0; k<msgs.length; k++) {
var li = document.createElement('li');
var txt = document.createTextNode(msgs[k]);
li.appendChild(txt);
ul.appendChild(li);
}
// obtain a reference to the maindiv element
// and insert our new unordered list just before it
var maindiv = document.getElementById('maindiv');
maindiv.parentNode.insertBefore(ul,maindiv);
}
48
Altered DOM After Manipulation


…
parentNode

ul

li






Username jessica is not available
Username jess is available
Username jessica2005 is available
Username jessie is available
maindiv
…
49
AJAX Libraries



SAJAX
 Makes things marginally easier
 Doesn’t support XML responses
 uses innerHTML, so can’t even use DOM
CPAINT
 Supports XML and text responses
 Actively developed and mature
 Documentation a little immature
JPSPAN
 Excellent abstraction
 Seamlessly “imports” server-side objects into JavaScript
 Clear documentation
 Doesn’t support Opera
 Limited usefulness
50
Further Information






http://developer.apple.com/internet/webcontent/xmlhttpreq.html
http://xulplanet.com/references/objref/XMLHttpRequest.html
http://www.mozilla.org/xmlextras/
http://www.ajaxpatterns.org/
http://www.ajaxmatters.com/
JavaScript and HTML DOM Reference
http://www.w3schools.com/jsref/
http://www.w3schools.com/jsref/dom_obj_document.asp
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_for
m_elements
51
Another Example
52
53
54
55