Ajax Control Demo
GET Array:
Array
(
)
Operation
Click on any of the control structors above to see the ajax operation work. Note, there is NO Browser web page refresh.
Description of the AJAX Operation
- The index.php file (below) is the file that is called by a Browser when initally accessed.
- The index.php file also loads the axaj.js code that preforms the background server communications.
- The index.php file also includes the ajax-slave.php file (below). Both files are seen as a single web page by the Browser.
- The ajax-slave.php file is loaded by an include() statement that exist inside a <div id="myspan"> div inside the index.php file.
- The ajax.js file (below) is triggered through the ajax-slave.php file via javascript onclick(), onblur(), and onchange() triggers.
- Any of these javascript triggers can send a GET message to the ajax.js file.
- After receiving a message, the ajax.js file sends a request to the server and then waits for the server to respond.
- After receiving a response from the server, the ajax.js file then fires an action to the ajax-slave.php file.
- That action causes a portion of the web page to refresh between the "myspan" div.
- The ajax-slave.php file then reloads and operates on the GET message.
- As a result, that portion of the web page (i.e., ajax-slave.php) changes.
- The complete action mimics the operation of a normal desktop application.
The three files that accomplish this feat follow:
1) CODE for index.php
<?php // index.php
include('includes/header.php');
?>
<h1>Ajax Control Demo</h1>
<div id="myspan"> <!-- start of myspan ajax operation-->
<?php include('ajax-slave.php'); ?>
</div> <!-- end of myspan ajax operation-->
<?php
include('includes/footer.php');
?>
2) CODE for ajax-slave.php
<?php // ajax-slave.php
$mytext = isset($_GET['mytext']) ? $_GET['mytext'] : null;
$mytextarea = isset($_GET['mytextarea']) ? $_GET['mytextarea'] : null;
$myradio = isset($_GET['myradio']) ? $_GET['myradio'] : 1;
$mycheck1 = isset($_GET['mycheck1']) ? $_GET['mycheck1'] : null;
$mycheck2 = isset($_GET['mycheck2']) ? $_GET['mycheck2'] : null;
$mycheck3 = isset($_GET['mycheck3']) ? $_GET['mycheck3'] : null;
$mycheck4 = isset($_GET['mycheck4']) ? $_GET['mycheck4'] : null;
$mycheck5 = isset($_GET['mycheck5']) ? $_GET['mycheck5'] : null;
$myselect = isset($_GET['myselect']) ? $_GET['myselect'] : 1;
$url = 'ajax-slave.php';
$c = 'CHECKED';
$s = 'SELECTED';
?>
<br>
<fieldset>
<legend>AJAX Examples:</legend>
<label for="mytext">Text</label>
<input type="text" id="mytext" name="mytext" value="<?php echo($mytext); ?>"
onblur="get(this.parentNode, '<?php echo($url); ?>');">
<br><br>
<label for="mytextarea">Textarea</label>
<textarea rows="4" cols="50" id="mytextarea" name="mytextarea"
onblur="get(this.parentNode, '<?php echo($url); ?>');">
<?php echo($mytextarea); ?>
</textarea>
<br><br>
<label for="radio">Radio</label>
<input type="radio" id="myradio" name="myradio" value="1"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($myradio == 1)
{
echo($c);
} ?>> 1
<input type="radio" id="myradio" name="myradio" value="2"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($myradio == 2)
{
echo($c);
} ?>> 2
<input type="radio" id="myradio" name="myradio" value="3"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($myradio == 3)
{
echo($c);
} ?>> 3
<br><br>
<label for="checkbox">Checkbox</label>
<input type="checkbox" id="mycheck1" name="mycheck1" value="1"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($mycheck1 == 1)
{
echo($c);
} ?> > 1
<input type="checkbox" id="mycheck3" name="mycheck2" value="2"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($mycheck2 == 2)
{
echo($c);
} ?> > 2
<input type="checkbox" id="mycheck3" name="mycheck3" value="3"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($mycheck3 == 3)
{
echo($c);
} ?> > 3
<input type="checkbox" id="mycheck4" name="mycheck4" value="4"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($mycheck4 == 4)
{
echo($c);
} ?> > 4
<input type="checkbox" id="mycheck5" name="mycheck5" value="5"
onclick="get(this.parentNode, '<?php echo($url); ?>');"
<?php if ($mycheck5 == 5)
{
echo($c);
} ?> > 5
<br><br>
<label for="myselect">Select</label>
<select id="myselect" name="myselect" onchange="get(this.parentNode, '<?php echo($url); ?>');">
<option value="1"
<?php if ($myselect == 1)
{
echo($s);
} ?> >1
</option>
<option value="2"
<?php if ($myselect == 2)
{
echo($s);
} ?> >2
</option>
<option value="3"
<?php if ($myselect == 3)
{
echo($s);
} ?> >3
</option>
<option value="4"
<?php if ($myselect == 4)
{
echo($s);
} ?> >4
</option>
</select>
</fieldset>
<div class="clear">
</div>
<pre>
<?php
echo('<br>GET Array:<br>');
print_r($_GET);
?>
</pre>
3) CODE for ajax.js
// AJAX GET
var http_request = false;
function makeRequest(url, parameters)
{
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/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;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function alertContents()
{
if (http_request.readyState === 4)
{
if (http_request.status === 200)
{
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
}
else
{
alert('There was a problem with the request.');
}
}
}
function get(obj, url)
{
var getstr = "?";
var i;
for (i = 0; i < obj.childNodes.length; i++)
{
if (obj.childNodes[i].tagName === "INPUT")
{
if (obj.childNodes[i].type === "text")
{
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
if (obj.childNodes[i].type === "checkbox")
{
if (obj.childNodes[i].checked)
{
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
else
{
getstr += obj.childNodes[i].name + "=&";
}
}
if (obj.childNodes[i].type === "radio")
{
if (obj.childNodes[i].checked)
{
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
}
}
if (obj.childNodes[i].tagName === "SELECT")
{
var sel = obj.childNodes[i];
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
// alert(sel.selectedIndex);
// alert(getstr);
}
if (obj.childNodes[i].type === "textarea")
{
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
}
//alert(getstr);
makeRequest(url, getstr);
}