Sample Code for Learning [Aug. 17, 2011, 5:38 p.m.]
For anyone that has some tested code that would work as a good example to practice with, please drop it here. Anyone that has a better idea for posting working samples of code, please feel free to drop your thoughts here.
If there's a link to examples, post that as well!
Babysteps To an AJAX REQUEST
the following example uses an initial page of index.html and sends a request to another page titled whatever you'd like. Feel free to replace our example of 'request.html' with your page name
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax Application</title>
</head>
<body>
<!--
SCENARIO
1. User clicks the link "Make A Request" in the browser
2. The Event Handler calls the makeRequest() function
3. The request is made and then (onreadystatechange) execution is passed to alertContents();
4. If the http response codes are correct for the protocol request the action is executed
-->
<span id="ajaxButton">Make a request</span>
<script>
(function() {
//create instance of http request
var httpRequest;
//create the trigger for the response
document.getElementById("ajaxButton").onclick = function() { makeRequest('request.html'); };
function makeRequest(url) {
//create a cross-browser instance(i.e. object) of the required class
//this technique is a form of object detection
//this technique is a form of object detection
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // if < IE 5
try {httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {
try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}
catch (e) {}//end catch (e)
}//end catch (e)
}//end elseif
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}//end if !http request
//process the server response(i.e. event handler)
//states what behaviour should occur when the event is triggered
//which is triggered by the server
httpRequest.onreadystatechange = alertContents;
//make the formal request and set the parameters(method)
//you must set the request header below this line for post methods as opposed to the get method
//httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//call for data that you want to send to the server
httpRequest.open('GET', url);
httpRequest.send();
}//end makeRequest(url) function
function alertContents() {
//check state of the request
//If the state has the value of 4,
//that means that the full server
//response has been received and
//it's OK for you to continue processing it
if (httpRequest.readyState === 4) {
/*
The full list of the readyState values is as follows:
===============================================
0 (uninitialized):: open method has not been called yet
1 (loading) :: open method has been called but send has not
2 (loaded) :: send has been called the request has begun
3 (interactive) :: the server is in the process of sending a response
4 (complete) :: the server has finished sending a respose
*/
//check response code of the http server responses(i.e. status code)
//this means the server was successful sending a request
//304 basically indicates the document has not been modified since last
//request so the browser can use a cached version of the document
if (httpRequest.status === 200 || httpRequest.status === 304) {
//**see https://developer.mozilla.org/en/HTTP#HTTP_Response_Codes
alert(httpRequest.responseText);
}else {
alert('There was a problem with the request.');
}//end else
}//end initial if
}//end alertContents() function
} //closing bracket
)();//end function
</script>
</body>
</html>