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


  • Anoniem   17 augustus 2011 14:20

    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. 

  • Anoniem   24 mei 2011 11:03

    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