Ajax

Get More Refcardz! v isit refcardz.com

#2
CONTENTS INCLUDE:
n

n

n

n

n

n

Getting Started with Ajax

Getting to Know HTTP
Tips for Using XHR
Ajax and Architecture
Ajax Toolkits
Ajax User Interfaces
Hot Tips and more...

By Dave Crane

GETTING STARTED

GETTING TO KNOW HTTP

The standard way to do Ajax is to use the XMLHttpRequest object,
known as XHR byits friends. Use XHR directly, or via one of the
helpful Ajax libraries such as Prototype or jQuery. How do we use
XHR “by hand”? To start with, we need to get a reference to it:

To make use of the XHR to its fullest, we recommend you
become familiar with the workings of the HTTP protocol. Using
Ajax, you have much more control over HTTP than with classic
web app development.

if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}

request

headers

We can then open a connection to a URL:

browser

w ww.dzone.com

xhr.open(
“GET”,
“my-dynamic-content.jsp?id=”
+encodeURI(myId),
true
);

server

Specify a callback function to receive the response:

headers

bodyxhr.onreadystatechange = function(){
processReqChange(req);
}

response

HTTP is a stateless request-response protocol.

and then send the request:
xhr.send(null);

n

The server may be busy, or the network may be slow. We don’t want
to sit around doing nothing until the response arrives, and because
we’ve assigned the callback function, we don’t have to. That’s the
five-minute guidefor the impatient. For those who like to know
the details, we’ve listed the fuller details of the XHR object below.
Method Name

Both request and response contain headers and an optional
body, which is free text.

n

Only a POST request contains a body.

n

A request defines a verb or method.

n

open a connection to a URL
method = HTTP verb (GET, POST, etc.)
url = url to open,may include querystring
async = whether to make asynchronous request

The Mime type of request and response can be set by the
header Content-type

Parameters and Descriptions

open(method, url, async)

Getting Started with A jax

body

onreadystatechange

add a header to the HTTP request

send(body)

send the request
body = string to be used as request body

abort()

stopthe XHR from listening for the response

readyState

I E7 provides a native JavaScript XHR, so we
check for that first.

assign a function object as callback (similar to onclick,
onload, etc. in browser event model)

setRequestHeader
(namevalue)

Not all Microsoft browsers rely on ActiveX.

Hot
T ip

stage in lifecycle of response (only populated after send()
is called)

Get More R efcardz
( They’re free! )

httpStatus

body of response as a JavaScript string (only set after
response reaches the interactive readyState)

responseXML

n

The HTTP return code (integer, only populated after
response reaches the loaded state)

responseText

n

body of the response as a XML document object (only
set after response reaches the interactive readyState)

nn
n
n

getResponseHeader
(name)

read a response header by name

getAllResponseHeaders()

n

Get an array of all response header names

Authoritative content
Designed for developers
Written by top experts
Latest tools & technologies
Hot tips & examples
Bonus content online
New issue every 1-2 weeks

Subscribe Now for FREE!
Refcardz.com
DZone, Inc.

|

w ww.dzone.com2

Getting Started with Ajax

tech facts at your fingertips

Common HTTP Verbs

Handling the Response

99% of the time, you’ll only need GET and POST. Many other
verbs are used by WebDAV, Subversion over HTTP, and other
niche applications, but not all web servers will understand them.

We’ve assigned a callback handler function to our XHR object.
This function will get called...