//Introduction to XMLHTTPRequest
//
//by Cynshard
//
//http://infonomicon.org

+-------------+
| What is it? |
+-------------+

XMLHTTPRequest is an object provided by the browser through javascript 
that allows a webpage, presumably a web application of sorts, to submit 
GET, POST, or RAW information to a webserver. This action is almost 
identical to following a link or submitting a form with one major 
difference, the request is sent in the background and does not require a 
page refresh.

+-------------+
| Big deal... |
+-------------+

It is a big deal. This nice little object allows nifty applications like 
gmail and google suggest to work the way they do. While, in my opinion, 
google suggest is a poor way to use this nifty little object it is neat 
to toy around with.
Ok, ok, so what do I need to use it?

Most web applications need two things to use XMLHTTPRequest, a front end 
page containing the original javascript and a back-end page that the 
front-end page calls that returns something useful. Here is the basic 
idea:

The front end page has some sort of widget, say a text box. There is a 
javascript event trigger tied to a button. This setup will cause your 
XMLHTTPRequest function to be called when you click the button. The form 
value will be sent to the php script as a GET variable. If the value is 
a string it will be sent back to the front-end as a javascript alert, 
othewise a javascript alert will be sent with the message "Invalid value 
sent". Pretty simple eh?

It's worth noting that the front-end portion and the back-end portion 
don't have to be two separate files. As long as the "back-end" only 
prints something that can be exectued (i.e. no extra html) you should be 
fine.

+------------------------+
| Let's get to the code: |
+------------------------+

Here is the html:

<input type="text" id="text" /><br />
<input type="button" value="get alert" 
onclick="someXMLHTTPRequestFunc(document.getElementById('text').value)" 
/>

Here is the function that is called by the onkeyup event:

function someXMLHTTPRequestFunc( value ) {
  var XHR = getXHR();
  if( XHR ) {
    var url = "backend.php?value=" + value;
    // open(METHOD,location,asynchronous) opens the connection with the 
provided settings
    XHR.open("GET",url,true);
    // define the onreadystatechange event handler
    // possible values of readystate are:
    // 0=Loading
    // 1=Uninitialized
    // 2=Loaded
    // 3=Interactive
    // 4=Complete
    XHR.onreadystatechange=function() {
      // If the readystate is complete
      if(XHR.readyState==4 ) {
        eval(XHR.responseText);
      }
    }
    // Send the request
    XHR.send(null);
  }
}

The following is the getXHR() function it returns an XMLHTTPRequest 
object in a way that is browser friendly:

function getXHR() {
  var XHR = null;
  // Since IE is prevalent, let them go first
  if( window.ActiveXObject ) {
    try {
      XHR = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch( no_msxml2 ) {
      try {
        XHR = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch( no_ms_xmlhttp ) {
          XHR = null;
      }
    }
  }
  // Mozilla/Netscape
  if( !XHR && typeof XMLHttpRequest != "undefined" ) {
    XHR = new XMLHttpRequest();
  }
  return XHR;
}

And finally here is the backend.php file:

<?php
$value = $_GET['value'];
// Definately wanna do more validation than this...
if( is_string( $value ) && strlen($value) > 0 ) {
  echo "alert('". $value ."');";
} else {
  echo "alert('Invalid value sent');";
}
?>

Here are some useful links that cover more on the XMLHTTPRequest object:

    * Dynamic HTML and XML: The XMLHttpRequest Object
        http://developer.apple.com/internet/webcontent/xmlhttpreq.html

    * Using the XML HTTP Request object
        http://jibbering.com/2002/4/httprequest.html