Help - Search - Members - Calendar
Full Version: Ajax
Sal's RuneScape Forum > Everything... Not RuneScape > Tech Talk > Programming & Web Development
gabtdw
Aug 8 2009, 06:55 PM
Hi,

Nothing JavaScript related never seems to work for me.. sad.gif so naturally the first time I try to do something properly (with AJAX) it simply doesn't work. I see nothing wrong with any of the code, it follows the structure of the examples in every tutorial I've read, anyway...

'class_rshiscores.php' prints hiscore data for the username fed to it via the GET POST method (although that doesn't matter: it prints some text) - it works perfectly when used in isolation. This code is supposed to insert the output of the PHP into a div element:

*Updated code below*
Spoiler: Click to Toggle the Spoiler.

CODE
function getHiscoreData() {
  
  //Disables two input fields
  document.getElementById("usernameInput").disabled = true;
  document.getElementById("usernameConfirmButton").disabled = true;
  
  var serverCall;
  
      try {
          var serverCall = new XMLHttpRequest();
      }
      catch(err1) {
          var ieXmlHttpVersions = new Array();
          
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
          ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";
      
          var i;
          for (i=0; i < ieXmlHttpVersions.length; i++) {
              try {
                  var serverCall = new ActiveXObject(ieXmlHttpVersions[i]);
                  break;
              }
              catch (err2) {
                  alert("An XMLHttpRequest object could not be created. Your browser does not support AJAX.");
              }
          }
      }
  
  function printData() {
      if(serverCall.readyState == 4) {
      document.getElementById("levelsContainer").innerHTML = serverCall.responseText;
      }
  }
  
  serverCall.onreadystatechange = printData();
  serverCall.open("GET","class_rshiscores.php?username=" + document.getElementById("usernameInput").value,"true");
  severCall.send("null");
  }



[Close]


I've checked and both the JavaScript and XHTML of the file in which this script lives are valid with perfect syntax etc. The script has no problems with disabling the input fields, it's something to do with some part of the AJAX code. I can't figure out what's wrong with it...

It's nothing to do with name/id conflicts in any of the elements. The element with an id of "levelsContainer" is a div.

Please, someone tell me why I'm an idiot wacko.gif
Yippee
Aug 8 2009, 07:45 PM
OK, just trying to figure out this script in a hurry, without looking up the statements I don't really know how they work, this thing sticks out to me:

serverCall.onreadystatechange = printData();

printData() doesn't return a value, which would give serverCall.onreadystatechange either a null or 0 value...not completely sure which, but which is irrelevant.

And, although I haven't ever used serverCall before, common sense telle me that serverCall.responseText would come after .open and .send, yet it's inside printData, which is called first.


Yeah, I'm just stabbing in the dark with common sense, slap me if I'm just being an idiot myself. If I get more time tonight, I'll look closer into each line and how it's supposed to be used and whatever, but I don't think I'll have time until Monday. Sorry.
gabtdw
Aug 9 2009, 07:51 AM
QUOTE (Yippee @ Aug 9 2009, 01:45 AM) *
OK, just trying to figure out this script in a hurry, without looking up the statements I don't really know how they work, this thing sticks out to me:

serverCall.onreadystatechange = printData();

printData() doesn't return a value, which would give serverCall.onreadystatechange either a null or 0 value...not completely sure which, but which is irrelevant.

And, although I haven't ever used serverCall before, common sense telle me that serverCall.responseText would come after .open and .send, yet it's inside printData, which is called first.


Yeah, I'm just stabbing in the dark with common sense, slap me if I'm just being an idiot myself. If I get more time tonight, I'll look closer into each line and how it's supposed to be used and whatever, but I don't think I'll have time until Monday. Sorry.


serverCall is just what I've named 'XMLHttpRequest'.

I had another look at that section, and it hadn't occurred to me that there isn't an 'else' statement. I added an else statement (to change the innerHTML of "levelsContainer" to "error") and that showed that the HTTP request is failing. I entered some else if statements and determined that the 'readystate' of the XMLHttpRequest object was "0" (uninitialized). I made 'printData()' an inline function, which somehow changed the 'readystate' to "1" (loading). I also changed the request to use the POST method.

Updated code here:

CODE
function getHiscoreData() {

//Disables two input fields
document.getElementById("usernameInput").disabled = true;
document.getElementById("usernameConfirmButton").disabled = true;

var serverCall;

     try {
         var serverCall = new XMLHttpRequest();
     }
     catch(err1) {
         var ieXmlHttpVersions = new Array();
        
         ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
         ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
         ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
         ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
         ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";
    
         var i;
         for (i=0; i < ieXmlHttpVersions.length; i++) {
             try {
                 var serverCall = new ActiveXObject(ieXmlHttpVersions[i]);
                 break;
             }
             catch (err2) {
                 alert("An XMLHttpRequest object could not be created. Your browser does not support AJAX.");
             }
         }
     }

serverCall.onreadystatechange = function printData() {
     if(serverCall.readyState == 4) {
     document.getElementById("levelsContainer").innerHTML = serverCall.responseText;
     }
     else if(serverCall.readyState == 3) {
     document.getElementById("levelsContainer").innerHTML = "readystate = 3 (interactive)";
     }
     else if(serverCall.readyState == 2) {
     document.getElementById("levelsContainer").innerHTML = "readystate = 2 (loaded)";
     }
     else if(serverCall.readyState == 1) {
     document.getElementById("levelsContainer").innerHTML = "readystate = 1 (loading)";
     }
     else if(serverCall.readyState === 0) {
     document.getElementById("levelsContainer").innerHTML = "readystate = 0 (uninitialized)";
     }
     else {
     document.getElementById("levelsContainer").innerHTML = "error: no readystate";
     }
}
serverCall.open("POST","class_rshiscores.php","true");
serverCall.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
severCall.send("username=" + document.getElementById("usernameInput").value);

}


At least we now know where the problem is: somewhere in the last few lines.
Mikey
Aug 9 2009, 12:19 PM
So you're trying to use raw JavaScript to make an AJAX request? Why not make use of a library like jQuery to make this much easier?
gabtdw
Aug 9 2009, 12:33 PM
QUOTE (Mikey @ Aug 9 2009, 06:19 PM) *
So you're trying to use raw JavaScript to make an AJAX request? Why not make use of a library like jQuery to make this much easier?


I am, so that I can learn about AJAX. I may, in the end, decide to use a library, but I won't understand it any better unless I know exactly what the library's doing.
iEthan
Aug 17 2009, 04:11 PM
^ Good answer.

Shouldn't you use [] instead of () on line 13? And shouldn't you have a semi-colon on line 52, after the }?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.