AJAX
- The XML Http Request Object
The keystone
of AJAX is the XMLHttpRequest object.
The
XMLHttpRequest Object
All modern
browsers support the XMLHttpRequest object.
The
XMLHttpRequest object is used to exchange data with a server behind the scenes.
This means that it is possible to update parts of a web page, without reloading
the whole page.
Create an
XMLHttpRequest Object
All modern
browsers (Chrome, IE7+, Firefox, Safari, and Opera) have a built-in
XMLHttpRequest object.
Syntax for
creating an XMLHttpRequest object:
variable =
new XMLHttpRequest();
Old versions
of Internet Explorer (IE5 and IE6) use an ActiveX Object:
variable =
new ActiveXObject("Microsoft.XMLHTTP");
To handle all
browsers, including IE5 and IE6, check if the browser supports the
XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not,
create an ActiveXObject:
Example
var
xhttp;
if
(window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xhttp = new
ActiveXObject("Microsoft.XMLHTTP");
}
»
Access
Across Domains
For security
reasons, modern browsers do not allow access across domains.
This means
that both the web page and the XML file it tries to load, must be located on
the same server.
The examples
on Omegas all open XML files located on the Omegas domain.
If you want
to use the example above on one of your own web pages, the XML files you load
must be located on your own server.
Old Versions
of Internet Explorer (IE5 and IE6)
Old versions
of Internet Explorer (IE5 and IE6) do not support the XMLHttpRequest object.
To handle
IE5 and IE6, check if the browser supports the XMLHttpRequest object, or else
create an ActiveXObject:
Example
if
(window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
}
»
XMLHttpRequest
Object Methods
Method Description
new
XMLHttpRequest() Creates a new
XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method,
url, async, user, psw) Specifies the
request
method: the request
type GET or POST
url: the
file location
async: true
(asynchronous) or false (synchronous)
user:
optional user name
psw:
optional password
send() Sends the request to the server
Used for GET
requests
send(string) Sends the request to the server.
Used for
POST requests
setRequestHeader() Adds a label/value pair to the header to be
sent
XMLHttpRequest
Object Properties
Property Description
onreadystatechange Defines a function to be called when the
readyState property changes
readyState Holds the status of the XMLHttpRequest.
0: request
not initialized
1: server
connection established
2: request
received
3:
processing request
4: request
finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number of a request
200:
"OK"
403:
"Forbidden"
404:
"Not Found"
For a
complete list go to the Http Messages Reference
statusText Returns the status-text (e.g.
"OK" or "Not Found")
0 comments: