P2PU | Javascript | Sample Code for Learning

Sample Code for Learning

SAMPLE CODE FOR LEARNING
=========================================================================
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 ! Good Luck and Enojy!
=========================================================================

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>

(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

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 inner catch

}//end initial catch

}//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>

Task Discussion

Anonym Aug. 17, 2011, 2:20 p.m.

Since Ajax is such a powerful tool in the web designers aresenal, let's make this example above the best it can be by updating any erroneous/vague comments so they make sense to the beginning AJAX entusiast.

AJAX can be a powerful delivery system and user enhancement that can certainly speed up the communication process between client and server.

Think of AJAX like the sugar coating of an M&M. Inside is delicious content and on the outside is the tasty shell.

Anonym May 24, 2011, 11:03 a.m.

I copied this from the "Framework and Repositories" Task:

Places to find code

http://snipplr.com/all/language/javascript

http://openjsan.org/

https://github.com/languages/JavaScript/created