responseText vs. responseXML

Awright, a couple issues with it - sorry I was going fast and I thought that you'd be able to debug it if there were troubles.

The 2 biggest troubles - I hope you added a source line to pull down the ajaxRequestor class so that it was available to the page - in my example I don't reference it anywhere. Roll Eyes

Second, it seems that the forum software adds text gremlins to the source, so if you just copy/paste and try to run it you may get immediate and really weird troubles. In BBE or TextWrangler, select Text/Zap Gremlins to get rid of the weirdness. In other editors you could probably say, "Show Invisibles" and you'll see what I mean.

Here is code that is just slightly tweaked for better effect. It 100% works. Also at the bottom is a reprint of the ajaxRequestor class just for good measure - and another little ditty, dumpArray() which I use for debugging that you can play with. It's pretty handy.

The main html page:

Code:

<html>
<head>
<script src="/class.ajaxRequestor.js"></script>
<style>
#resultBox {
height: 300px;
width: 500px;
margin: 0 auto;
margin-top: 20px;
border-color: black;
border-style: solid;
border-width: 1px 2px 2px 1px;
background-color: #a0a0a0;
}
#selectType {
margin-right: 20px;
}
</style>
</head>
<body>

<div style="text-align: center">
<select id="selectType">
<option value="0">Simple Update</option>
<option value="1">JSON Array</option>
<option value="2">Javascript Redirect</option>
<option value="3">Preformatted HTML</option>
</select>
<input id="testbutton" type="button" value="Test" onClick="test()">
</div>

<div id="resultBox" style=""> </div>

<script>
req = new ajaxRequestor();
req.url = '/handler.php';

resArr = new Array();

function test()
{
var target = document.getElementById('selectType');
var which = target.options[target.selectedIndex].value - 0;
req.postParam('request', which);
switch(which)
{
case 0:
// This option will hide the test button..
hideButton();
req.onSuccess = function(sender) { showButton(); document.getElementById('resultBox').innerHTML = 'Response received: ' + sender.lastResponse; }
break;

case 1:
// This one too.
hideButton();
req.onSuccess = handleJSON;
break;

case 2:
req.onSuccess = function(sender) { eval(sender.lastResponse); }
break;

case 3:
req.onSuccess = function(sender) { document.getElementById('resultBox').innerHTML = sender.lastResponse; }
break;
}
req.execute();
}
function hideButton()
{
document.getElementById('testbutton').style.display = 'none';
}
function showButton()
{
document.getElementById('testbutton').style.display = 'inline';
}
function handleJSON(sender)
{
showButton();
try
{
resArr = eval('(' + sender.lastResponse + ')');
document.getElementById('resultBox').innerHTML = dumpArray(resArr);
} catch(e) {
alert('Result from server was not valid JSON code. Response was: ' + sender.lastResponse);
}
}
</script>
</body>
</html>

Meanwhile at the server, handler.php:

Code:

<?php

$reqType=$_POST['request']-0;

switch($reqType)
{
case 0:
die('OK: ' . date('H:i:s', time()));

case 1:
$newArr['a']=1234;
$newArr['b']=2345;
$newArr['c']=3456;
$arrStr = json_encode($newArr);
echo $arrStr;
break;

case 2:
echo"top.location='http://www.google.com/';";
exit;

case 3:
echo<<<HTML
<center>
<h1>Hello World!</h1>
<h3>Four score and seven years ago, our fathers brought forth<br>
to this country - a new nation - conceived in liberty and dedicated<br>
to the proposition that all men are created equal.<br><br>

Or something like that.
</h3>
HTML;
break;
}

?>

And finally, at the server, the source for class.ajaxRequestor.js:

Code:

	Welcome, Guest. Please login or register.	February 11, 2012, 11:32:02 PM
		Login with username, password and session length