Ajax error

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
st89
Forum Newbie
Posts: 17
Joined: Sat Nov 28, 2009 5:42 pm

Ajax error

Post by st89 »

I have the following HTML:

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>
In "onload.js" I have:

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"]);
And in "classes.php" I have:

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);
  }
}
What I want to happen is this:
  • 1) When the page is loaded a new ajax object is created:

    Code: Select all

    new ajax("welcomescreen", ["test1","test2","test3"])
    2)Then the following is passed the value "welcomescreen"

    Code: Select all

    var parameterString = "class="+classType;
    3)Then the following code creates "class=welcomescreen&test1=&test2=&test3="

    Code: Select all

    for (i in parameterArray) { 
        parameterString .= "&"+i+"="+encodeURIComponent(document.getElementById(i).value);
      }
    4)It is then sent to classes.php:

    Code: Select all

    XMLHttpRequest.open("POST", "classes.php", true);
      XMLHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      XMLHttpRequest.send(parameterString);
    5)In classes PHP, the only function is:

    Code: Select all

    ajaxgateway = new ajax($_POST["class"]);
    echo $ajaxgateway->build();
    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

    $this->_outcome = "<p>Login box here. Test params ".$_POST["test1"].$_POST["test2"].$_POST["test3"]."</p>";
            break;
I appreciate in my $ajaxgateway instance, the $_POSTs will not return anything (as they weren't passed any values). However, I would have expected the following html:

Code: Select all

<div id="content">
      <p>You need a JavaScript and XMLHttpRequest enabled browser to use Invaluate.com</p>
    </div>
To change to:

Code: Select all

<p>Login box here. Test params   </p>
...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 :D
User avatar
Popcorn
Forum Commoner
Posts: 55
Joined: Fri Feb 21, 2003 5:19 am

Re: Ajax error

Post by Popcorn »

that's too much code, at least for me.
isolate the problem more.
Post Reply