Ajax – Simple Ajax GET Request

This is another example of implementing simple Ajax GET request. Please refer to Ajax – Simple Ajax POST Request for a POST request. Actually, both of them are quite similar and it is good to try both to get more familiar with the generic Ajax requests.

Let’s start our example now.

Create the get.html and get_result.php in your web root.
get.html

<html>
  <head>
    <script type="text/javascript" src="js/simple_ajax_get.js"></script>
  </head>
  <body>
    <form>
      <input type="text" name="uname" id="uname" />
      <input type="button" onclick="javascript:checkUsername(document.getElementById('uname').value);"/>
    </form>
  </body>
</html>

 

get_result.php

<?php
  print($_GET['username']);
?>

 

Next, create the js/simple_ajax_get.js.

function createRequestObject() {
  http_request = false;
  
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      /* set type accordingly to anticipated content type */
      //http_request.overrideMimeType('text/xml');
      http_request.overrideMimeType('text/html');
    }
  } else if (window.ActiveXObject) { // IE
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
  }
  return http_request; //return the object
}

/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleThoughts() {
  /**
   * Make sure that the transaction has finished. The XMLHttpRequest object 
   * has a property called readyState with several states:
   * 0: Uninitialized
   * 1: Loading
   * 2: Loaded
   * 3: Interactive
   * 4: Finished
   */
  try {
    if(http.readyState == 4) { //Finished loading the response
      /**
       * We have got the response from the server-side script,
       * let's see just what it was. using the responseText property of 
       * the XMLHttpRequest object.
       */
      if (http_request.status == 200) {
        var response = http.responseText;
        //alert(response);
        
        // Only pass when input = Eureka!
        if (response != "Eureka!") {
          alert("Please input Eureka!");
        } else {
          alert("Validation passed!");
        }
      }
    }
  } catch(Exception) {}
}

var http = createRequestObject();

function checkUsername(userName) {
  http.onreadystatechange = handleThoughts;
  http.open('get', 'get_result.php?username=' + userName);
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.setRequestHeader("Connection", "close");
  http.send(null);
}

 

Try it now
Validation failed!

 

Validation passed!

 

Done =)

Reference:

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s