What does AJAX stand for and when did this name come into existence?
· AJAX stands for Asynchronous JavaScript and XML.
· AJAX is a way of developing Web applications that combines:
· XHTML and CSS standards based presentation
· Interaction with the page through the DOM
· Data interchange with XML and XSLT
· Asynchronous data retrieval with XMLHttpRequest
· JavaScript to tie it all together
· AJAX was first pioneered by Microsoft in their Outlook Web Access interface. The techniques have been in use since around 1998, but have really only become popular since the beginning on 2005.
The first ‘A’ in AJAX stands for asynchronous. Explain what this means.
This is the key. In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back.
With Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.
meaning that the client and server must work independently – and communicate independently
What exactly is XMLHTTPRequest?
XMLHttpRequest (XHR) is an API that can be used by JavaScript and other web browser scripting languages to transfer XML and other text data between a web server and a browser. Though it can do synchronous fetches, it is virtually always asynchronous, due to the greater UI responsiveness.
The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats such as HTML, JSON or plain text.
XMLHttpRequest is an important part of the Ajax web development technique, and it is used by many websites to implement responsive and dynamic web applications. Examples of web applications that make use of XMLHttpRequest include Google Maps, Windows Live’s Virtual Earth, the MapQuest dynamic map interface, Facebook, and many others.
Explain how Firefox and IE treat this differently.?
There is a difference in how and when the cached data is revalidated between Internet Explorer and Firefox . Firefox revalidates the cached response every time the page is refreshed, issuing an “If-Modified-Since” header with value set to the value of the “Last-Modified” header of the cached response.
Internet Explorer does so only if the cached response is expired (i.e., after the date of received “Expires” header). This raises some issues, and it is widely believed that a bug exists in Internet Explorer, and the cached response is never refreshed. It is possible to unify the caching behavior on the client. Also IE, if the open method is called after setting the onreadystatechange callback, there will be a problem when trying to reuse the XHR object. To be able to reuse the XHR object properly, use the open method first and set onreadystatechange later. This happens because IE resets the object implicitly in the open method if the status is ‘completed
.
What role does the property readyState play in the use of XMLHTTPRequest?
readyState : Retrieves the current state of the request operation.
· 0 = uninitialized – open() has not yet been called.
· 1 = open – send() has not yet been called.
· 2 = sent – send() has been called, headers and status are available.
· 3 = receiving – Downloading, responseText holds partial data (although this functionality is not available in IE [2])
· 4 = loaded – Finished.
readyState 4 is equivalent to the load event and is a standard part of any xmlhttp script. ready state property tells you what’s going on XMLHttpRequest object as it is downloading data .
Here is a cross-browser general purpose example of an AJAX/XMLHttpRequest JavaScript function
function ajax(url, vars, callbackFunction) {
var request = new XMLHttpRequest();
request.open(“POST”, url, true);
request.setRequestHeader(“Content-Type”,
“application/x-javascript;”);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText) {
callbackFunction(request.responseText);
}
}
};
request.send(vars);
}
In summary, what is the major benefit of using XMLHTTPRequest?
Ø One main benefit of XmlHttp over all other methods is that it doesn’t invoke the browser’s navigation system. So, for example, the “throbber” in the top right of the browser doesn’t animate, the progress bar does not progress, and the stop button doesn’t become active. XmlHttp is completely invisible to the user.
Ø at XmlHttp can easily and compatibly receive any textual data as a response. What type of response to send is an important thing to consider, as it will impact the performance, compatibility, and extensibility of your application.
Ø Fast, returns any type of data, invisible to user.
http://en.wikipedia.org/wiki/XMLHttpRequest
http://www.ajaxtraining.blogspot.com/2007/12/xmlhttprequest-object-readystate.html
http://developer.mozilla.org/en/docs/AJAX
