Ajax error
Posted: Tue Dec 15, 2009 3:53 pm
I have the following HTML:
In "onload.js" I have:
And in "classes.php" I have:
What I want to happen is this:
To change to:
...but unfortunately it hasn't.
As usual, I'd be really grateful if anyone could point out where I've gone wrong. Thanks in advance for any help/tips/pointers
Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="onload.js"></script>
<h1>H1: Header</h1>
<h2>H2: Subheader</h2>
<h3>H3: Menu options</h3>
<h4>H4: Page section ID's</h4>
<div id="content">
<p>You need a JavaScript and XMLHttpRequest enabled browser to use Invaluate.com</p>
</div>
<h5>H5: Footer</h5>
</body>
</html>Code: Select all
function ajax(var classType, var parameterArray) {
var XMLHttpRequest = new XMLHttpRequest();
var parameterString = "class="+classType;
// Concatenate all the keys and their values in a $_GET[]-style string
for (i in parameterArray) {
parameterString .= "&"+i+"="+encodeURIComponent(document.getElementById(i).value);
}
// Send the requests off
XMLHttpRequest.open("POST", "classes.php", true);
XMLHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttpRequest.send(parameterString);
// Output the response to <div id="content"></div>
XMLHttpRequest.onreadystatechange = function() {
if (XMLHttpRequest.readyState == 4) {
if (XMLHttpRequest.status == 200 || window.location.href.indexOf("http")==-1) {
document.getElementById("content").innerHTML = XMLHttpRequest.responseText;
}
else {
document.getElementById("content").innerHTML = "<p>There has been an error!</p>";
}
}
}
}
window.onload = new ajax("welcomescreen", ["test1","test2","test3"]);Code: Select all
$ajaxgateway = new ajax($_POST["class"]);
echo $ajaxgateway->build();
class ajax {
private $_class;
private $_outcome;
public function __construct($class) {
$this->_class = $class;
}
public function build() {
switch($this->_class) {
case "welcomescreen":
$this->_outcome = "<p>Login box here. Test params ".$_POST["test1"].$_POST["test2"].$_POST["test3"]."</p>";
break;
default:
$this->_outcome = "<p>Couldn't find the object requested</p>";
}
return($this->_outcome);
}
public function __destruct() {
return(NULL);
}
}- 1) When the page is loaded a new ajax object is created:2)Then the following is passed the value "welcomescreen"
Code: Select all
new ajax("welcomescreen", ["test1","test2","test3"])3)Then the following code creates "class=welcomescreen&test1=&test2=&test3="Code: Select all
var parameterString = "class="+classType;4)It is then sent to classes.php:Code: Select all
for (i in parameterArray) { parameterString .= "&"+i+"="+encodeURIComponent(document.getElementById(i).value); }5)In classes PHP, the only function is:Code: Select all
XMLHttpRequest.open("POST", "classes.php", true); XMLHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); XMLHttpRequest.send(parameterString);6) From the output JavaScript string sent as "class=welcomescreen&test1=&test2=&test3=", $ajaxgateway recognises "welcomescreen" through a switch statement and executes some code:Code: Select all
ajaxgateway = new ajax($_POST["class"]); echo $ajaxgateway->build();Code: Select all
$this->_outcome = "<p>Login box here. Test params ".$_POST["test1"].$_POST["test2"].$_POST["test3"]."</p>"; break;
Code: Select all
<div id="content">
<p>You need a JavaScript and XMLHttpRequest enabled browser to use Invaluate.com</p>
</div>Code: Select all
<p>Login box here. Test params </p>As usual, I'd be really grateful if anyone could point out where I've gone wrong. Thanks in advance for any help/tips/pointers