-- The name
o Browser-based presentation using HTML and CSS
o Data stored in XML format and fetched from the server
o Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
o JavaScript to make everything happen
-- How
o JavaScript code can fetch data from the server as needed
o When more data is needed from the server, the JavaScript uses a special object supported by browsers, the XMLHttpRequest object, to send a request to the server behind the scenes – without causing a page refresh
o The JavaScript in the browser doesn't have to stop everything to wait for that data to come back from the server. It can continue with other tasks and wait for the data in the background – that's called asynchronous data retrieval
o The data that comes back from the server can be XML, or just plain text. The JavaScript code in the browser can read that data and put it to work immediately
-- The XMLHttpRequest object is usually part of the browser's window object, so to check whether XMLHttpRequest is ready to use, we can use the following code
var XMLHttpRequestObject = null;
if(window.XMLHttpRequest)
XMLHttpRequestObject = new XMLHttpRequest();
-- If the browser doesn't support XMLHttpRequest, but supports ActiveX, we can add an else part to the condition
else {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
-- To configure the object to use an URL we can use the open() method of the object
XMLHttpRequestObject.open("GET", "http://test.com/data");
-- The open() method can take the following parameters
o method – the HTTP method used to open the connection, such as GET, POST, PUT, HEAD or PROPFIND
o URL – the requested URL
o asyncFlag – a Boolean value indicating whether the call is asynchronous. The default is true
o userName – the user name
o password – the password
-- The open() method has the following format
open("method", "URL"[, asyncFlag[, "username"[, "password"]]])
-- When using
-- It is not necessary that the URL we use with the open() method should be an absolute URL, it can also be a relative URL
-- By default, the connection to this URL is made asynchronously, which means that this statement doesn't wait until the connection is made and the data is finished downloading
-- When we call the open() method it doesn't actually make the connection
-- Only when the send() method is called that the connection is made
-- But before that we need to setup the object to handle the data received from the URL
-- The XMLHttpRequest object has a property named onreadystatechange that lets us handle asynchronous loading operations
-- If we assign the name of a JavaScript function in the script to this property, that function will be called each time the XMLHttpRequest object's status changes – as when it's downloading data
-- We can use the JavaScript shortcut to create an anonymous function on the fly and assign it to this property
XMLHttpRequestObject.onreadystatechange = function() {
//code to handle the XMLHttpRequest object's status changes
}
-- This new anonymous function will be called when the XMLHttpRequest object undergoes some change
-- We need to watch two properties of the object to determine the download is complete
o readyState – tells us how the data loading is going.
The possible values are
§ 0 – initialized
§ 1 – loading
§ 2 – loaded
§ 3 – interactive
§ 4 – complete
o status – it holds the status of the download itself. This is the standard HTTP status code that the browser got for the URL that we supplied
200 means everything is fine.
Some of the possible values
§ 200 – OK
§ 204 – No content
§ 400 – Bad Request
§ 401 – Unauthorized
§ 403 – Forbidden
§ 404 – Not Found
§ 500 – Internal Server Error
§ 505 – Http Version Not Supported
-- To make sure the data we want has been downloaded completely and everything went okay, we need to make sure that the XMLHttpRequest object's readyState property equals 4 and the status property equals 200
-- If this condition is true, then we can know that the data downloading went fine and is complete now, and the data is ready for use now
-- We can get the data from the XMLHttpRequest object in two ways
o If the retrieved data has to be treated as standard text – use the object's responseText property
o If the data has been formatted as XML – use the objects responseXML property
-- To make the data appear in the web page, we can assign it to some element in the page
XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
-- After setting up the code to handle the response from the server, we actually make the request
-- To make a request, we use the send() method
-- When we're using the GET method, we send a value of null
XMLHttpRequestObject.send(null);
-- The call to send() is what actually downloads the data so that the anonymous function can handle that data
-- XMLHttpRequest offers only responseText and responseXML properties
-- We can only download text using
-- XMLHttpRequest object of IE has a responsesStream property, which represents a binary data stream from the server
-- But JavaScript cannot handle a binary stream, but can be handled by other scripting languages like VBScript
