Scribd
Upload
50 views

Getting Started With: by Dave Crane

1) The document discusses how to make AJAX requests using the XMLHttpRequest (XHR) object. It explains how to open a connection, assign a callback function, add headers, send the request, and handle the response. 2) It provides more details on the HTTP protocol, including common verbs like GET and POST, headers, and request/response structure. 3) Handling asynchronous responses is key - the onreadystatechange callback fires as the response arrives, with the readyState property indicating completion.

Uploaded by

slkguy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views

Getting Started With: by Dave Crane

1) The document discusses how to make AJAX requests using the XMLHttpRequest (XHR) object. It explains how to open a connection, assign a callback function, add headers, send the request, and handle the response. 2) It provides more details on the HTTP protocol, including common verbs like GET and POST, headers, and request/response structure. 3) Handling asynchronous responses is key - the onreadystatechange callback fires as the response arrives, with the readyState property indicating completion.

Uploaded by

slkguy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Getting Started with Ajax

By Dave Crane
getting started Getting toKnow HTTP
The standard way to do Ajax is to use the XMLHttpRequest object, known as XHR by its 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: Specify a callback function to receive the response: and then send the request: The server may be busy, or the network may be slow. We dont want to sit around doing nothing until the response arrives, and because weve assigned the callback function, we dont have to. Thats the five-minute guide for the impatient. For those who like to know the details, weve listed the fuller details of the XHR object below.
browser body

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


server headers body

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


response

HTTP is a stateless request-response protocol.


n

Both request and response contain headers and an optional body, which is free text. Only a POST request contains a body. A request defines a verb or method. The Mime type of request and response can be set by the header Content-type
Parameters and Descriptions

xhr.send(null);
Method Name

open(method, url, async)

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 assign a function object as callback (similar to onclick, onload, etc. in browser event model) add a header to the HTTP request send the request body = string to be used as request body stop the XHR from listening for the response stage in lifecycle of response (only populated after send() is called) The HTTP return code (integer, only populated after response reaches the loaded state) body of response as a JavaScript string (only set after response reaches the interactive readyState) body of the response as a XML document object (only set after response reaches the interactive readyState) read a response header by name Get an array of all response header names

onreadystatechange

setRequestHeader (namevalue) send(body)

abort() readyState httpStatus

responseText

responseXML

getResponseHeader (name) getAllResponseHeaders()

Common HTTP Verbs


99% of the time, youll 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.
Verb GET Notes Strictly speaking, should be used only to fetch data, not to effect changes on the server. GET requests contain no body. Parameters are passed in the querystring of the URL. POST Should be used to update data on the server. Parameters/data passed in the body. HEAD Will fetch the headers of the response only, not the body. Useful for finding out how large a resource is (read the Content-length header) or how old it is (read the Last-modified header), for example.

Handling the Response


Weve assigned a callback handler function to our XHR object. This function will get called several times as the response comes in. Typically, we only want to parse the response once it has fully arrived, i.e. the readyState is complete.

XHR ReadyState Values


State 0 1 2 3 Value Uninitialized Loading Loaded Interactive Comments The request hasnt yet been sent The response hasnt yet arrived Response headers can be read Response body is incomplete, but can be read 4 Complete Response body is complete

You might also like