Vivian Crap

• Creating an XMLHttpRequest object.
• Specifying and submitting your HTTP request to a web server.
• Synchronously or asynchronously retrieving the server’s response.

          			function createHttpRequest() {
          				var httpRequest = null;
          					if (window.ActiveXObject) // For IE6 and below
          						httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
          					else // For IE7 and Modern Browsers
          						httpRequest = new XMLHttpRequest();
          				return httpRequest;
          			}
          		

          			XMLHttpRequest.open("GET", url, true);
          		

If you pass false as the third argument to open(), the send() method is synchronous: it blocks and does not return until the server’s response has arrived. Asynchronous responses are generally preferred.

HTTP GET

          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			xmlHttpRequest.onreadystatechange = function() {

          			}
          			xmlHttpRequest.open("GET", "query.php?username=vivian", false);
          			xmlHttpRequest.send(null);
          		

HTTP POST

          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			xmlHttpRequest.onreadystatechange = function() {

          			}
          			xmlHttpRequest.open("POST", "query.php", false);
          			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          			xmlHttpRequest.send("username=vivian");
          		

With POST requests, data is passed to the server in the body of the request, rather than encoding it into the URL itself. Since request parameters are encoded into the URL of a GET request, the GET method is suitable only when the request has no side effects on the server — that is, when repeated GET requests for the same URL with the same parameters can be expected to return the same result. When there are side effects to a request (such as when the server stores some of the parameters in a database), a POST request should be used instead.

Escape the Data

          			var HTTPUTILITY = {
          				encodeFormData: function(data) {
          					if (!data) return;
          					var pairs = [];
          					var regexp = /%20/g; // A regular expression to match an encoded space.
          					for (var name in data) {
          						// Create a name/value pair, but encode name and value first. The global function encodeURIComponent does almost what we want,
          						// but it encodes spaces as %20 instead of as "+". We have to fix that with String.replace().
          						var value = data[name].toString();
          						var pair = encodeURIComponent(name).replace(regexp, "+") + "=" + encodeURIComponent(value).replace(regexp, "+");
          						pairs.push(pair);
          					}
          					return pairs.join("&"); // Concatenate all the name/value pairs, separating them with &.
          				}
          			};
          		

The POST method uses the AJAX.encodeFormData() function to convert the properties of an object to a string form that can be used as the body of a POST request. This string is then passed to the XMLHttpRequest.send() method and becomes the body of the request. (The string returned by AJAX.encodeFormData() can also be appended to a GET URL; just use a quest-mark character to separate the URL from the data.)

          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			xmlHttpRequest.onreadystatechange = function() {
          				if (xmlHttpRequest.readyState != 4) {
          					// Start to progress
          				} else { // The server's response is complete.
          					if (xmlHttpRequest.status == 0 || xmlHttpRequest.status == 200)
          						callback(xmlHttpRequest.responseText)
          					else
          						// Error
          				}
          			}
          			xmlHttpRequest.open("POST", "query.php", false);
          			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          			xmlHttpRequest.send("username=vivian");
          		

Notes on readyState 3

Data is being received from the server.readyState 3 differs somewhat in Firefox and Internet Explorer. Firefox invokes the onreadystatechange handler multiple times in readyState 3, to provide download progress feedback. A script might use these multiple invocations to display a progress indicator to the user. Internet Explorer, on the other hand, interprets the event handler name strictly, and invokes it only when the readyState value actualy changes. This means that it is invoked only once for readyState 3, no matter how large downloaded document is.

          			var timer = null;
          			var timeout = 1000;
          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			if (timeout) {
          				if (timer) clearTimeout(timer);
          				timer = setTimeout(function(){
          					xmlHttpRequest.abort();
          				}, timeout);
          			}
          			xmlHttpRequest.onreadystatechange = function() {
          				if (xmlHttpRequest.readyState != 4) {
          					// Start to progress
          				} else { // The server's response is complete.
          					if (timer) clearTimeout(timer);
          					if (xmlHttpRequest.status == 0 || xmlHttpRequest.status == 200)
          						callback(xmlHttpRequest.responseText)
          					else
          						// Error
          				}
          			}
          			xmlHttpRequest.open("POST", "query.php", false);
          			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          			xmlHttpRequest.send("username=vivian");
          		

By appending the julian day number to the end of the URL(?timestamp=123412341234), we effectively make each call unique and that means Internet Explorer will not cache the Ajax call as it is wont to do.

• The XMLHttpRequest Object
• XMLHttpRequest Level 2
• Access Control
• The Ultimate AJAX Object