Are there any resources out there that would point me in the right direction? Thanks.
Here's an example:
Client (Browser) End.
The JS function getXHRObject() find the XMLHTTPRequest Object implemented by the users browser. If the browser is IE6- then we need to retrieve this from an ActiveX Object.
Firefox, Safari, IE7 etc. implement the native XMLHTTPRequest Object.
sendXHR() is teh JS function that actually makes the XMLHTTPRequest.
[HTML]xmlhttp.onreadystatechange = function() { handleXHRstateChange(); };[/HTML]
xmlhttp is the XMLHTTPRequest Object. "onreadystatechange" is method of the XMLHTTPRequest that is triggered on state changes. This is where you attach your function that monitors the state change and does stuff...
Here is the HTML page with the JavaScript that will make an XMLHTTPRequest to the PHP Script. This implementation uses a Global XMLHTTPRequest Object. You can also use a closure, but that is a bit complicated if you've never noticed closures before...
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of simple AJAX request</title>
</head>
<body>
<script>
/** global XMLHTTPRequest Object */
var xmlhttp = false;
/**
* Retrieve the XMLHTTPRequest Object
*/
function getXHRObject() {
var xmlhttp = false;
if (window.XMLHttpRequest) {
// FF, IE7+, Opera, Safari
xmlhttp = (new XMLHttpRequest());
} else if (window.ActiveXObject) {
// find latest XMLHTTP implementation for IE 6-
var versions = [
"Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];
var n = versions.length;
for (var i = 0; i < n; i++) {
try {
if (xmlhttp = (new ActiveXObject(versions[i]))) {
alert(versions[1]);
break;
}
} catch (e) { /* try next */ }
}
}
return xmlhttp;
}
/**
* Send an HTTP Request via XMLHTTPRequest
*/
function sendXHR(url, method, data, user, pw) {
// validate the params
url = url || window.location;
method = method || 'GET';
data = data || '';
user = user || null;
pw = pw || null;
// create an execute xmlHTTPRequest
xmlhttp = getXHRObject();
if (!xmlhttp) {
alert('Your browser does not support XMLHTTPRequest. Please upgrade.');
return false;
}
// set the request handler.
// note: xmlhttp will be available in the handler since it is a global (another method is using a JS closure)
xmlhttp.onreadystatechange = function() { handleXHRstateChange(); };
xmlhttp.open(method, url, true, user, pw);
xmlhttp.send(data);
}
/**
* Handle the state changes triggered by the XMLHTTPRequest
*/
function handleXHRstateChange() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('The XMLHTTPRequest was completed successfully.');
alert(xmlhttp.responseText);
} else if (xmlhttp.status == 401) {
alert('Page needs Authorization or the username and password supplied are incorrect.');
} else {
alert('An unexpected HTTP Status was returned. HTTP Status: '+xmlhttp.status);
}
}
}
// test
function sendQuery() {
sendXHR('server.php?task='+document.getElementById('task').value+'&r='+(new Date()).getTime());
}
</script>
<form id="ajax_form" onsubmit="sendQuery();return false;" action="server.php">
<fieldset>
<legend>Simple Example of XMLHTTPRequest (AJAX) with PHP Server Script</legend>
Query: <input type="text" id="task" name="task" />
<input type="submit" value="Send" /> (examples: day, month, year)
</fieldset>
</form>
</body>
</html>
[/HTML]
Heres the PHP Script: (server.php)
[PHP]<?php
/**
* Example of a server end for an AJAX client
*/
// get the HTTP GET param named "task"
$task = isset($_GET['task']) ? trim($_GET['task']) : false;
// choose which PHP code to run based on $task
if ($task == 'day') {
echo date('l', time());
} elseif ($task == 'month') {
echo date('F', time());
} elseif ($task == 'year') {
echo date('Y', time());
} else {
echo 'Usage: task=day, task=month, task=year';
}
?>[/PHP]