Strange javascript/ajax problem.

[tftd]

Hey everybody,

I made myself a ajax script over a tutorial in the net.
I've modified it a bit to suite my needs but I can't get one thing right. I need the ajax script to be able to return the "responseText" as a string.

This is my script to give you a better idea of the code:
jscript

function AjaxConnection()
{
  this.returnOutput="";
  this.setOptions=setOptions;
  this.getOptions=getOptions;
  this.connect=connect;
  this.options="";
  this.uri="";
  this.type = "POST";
  this.file = "";
}
function setOptions(opt)
{
  for(i=0;i<opt.length;i++)
  {
    if(i==0)
    {
      if(this.type == "GET")
      {
        this.options = "?"+opt[i];
      }
      else
      {
        this.options = opt[i];
      }
    }
    else
    {
      this.options += "&"+opt[i];
    }
  }
  //alert("POST: "+this.type+"\n OPTIONS: "+this.options);
}
function getOptions()
{
  return this.options;
}
function connect(return_func)
{
  with(this)
  {
    var x=init_object();
    var typex = this.type;
    x.open(typex, this.uri,true);
    x.onreadystatechange = onReady(return_func);
    //Uncoment the line below if Header definition is needed...
    //x.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    if(typex == "POST")
    {
      x.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
      //alert("TYPE: "+typex);
    }
    x.send(null);
    //alert("CONNECT OPTIONS: "+this.options);
  }
}
function onReady(return_func)
{
  var x=init_object();
  if(x.readyState == '1' ¦¦ x.readyState == '2' ¦¦ x.readyState == '3')
  {
    ajax_loading();
  }
  else
  {
    ajax_hide_loading();
    //Return function
    //eval(return_func + '(x.responseText)');
    if(x.responseText == "error")
    {
      return;
    }
    else
    {
      if(return_func.indexOf("alert") != -1)
      {
        alert(x.responseText);
      }
      else if(return_func.indexOf("var") != -1)
      {
        this.returnOutput= x.responseText;
      }
      else if(document.getElementById(return_func))
      {
        document.getElementById(return_func).innerHTML = x.responseText;
      }
    }
  }
}
function init_object()
{
  var x;
  try
  {
    x=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
    try
    {
      x=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (oc)
    {
      x=null;
    }
  }
  if(!x && typeof XMLHttpRequest != "undefined")
      x = new XMLHttpRequest();
  if (x)
      return x;
}
function ajax_loading()
{
  document.getElementById('loading').style.display = 'block';
}
function ajax_hide_loading()
{
  document.getElementById('loading').style.display = 'none';
}

This is an example how it's used:

function addSkin()
{
  var skinName    = document.getElementById("skinName").value;
  var setAsDefault  = document.getElementById("default").value; 
  if(skinName != null)
  {
    connection = new AjaxConnection();
    opts = new Array("act=ajax","addSkin="+skinName,"isDefault="+setAsDefault);
    connection.type = "GET";
    connection.setOptions(opts);
    connection.uri = 'skins.php';
    connection.uri += connection.options;
    connection.connect("var");
    var output = connection.returnOutput;
    if(output == "error")
    {
      alert("There was an error!\n Probably there is a skin with that name !");
    }
    else if(output != "error")
    {
      var skinDetails = document.getElementById("skinDetails");
      var skinContent = document.getElementById("skinContent");
      skinDetails.style.display = "none";
      skinContent.style.display = "block";
      skinContent.innerHTML = output;
    }
  }
  else
  {
    return alert("You haven't entered a name for the skin...");
  }
}

The idea of this is when you enter connection.connect("var"), the script to return a the responseText. But I couldn't make it that way.. so I figured it could be easier to define a new var (this.returnOutput) at AjaxConnection() that I'd populate with the responseText and after that use it in the other script.

I'm not quite sure where is the problem but "this.returnOutput" doesn't get any text...

I'd appreciate it if somebody explains why it's not working that way and probably how it's better to be done ?

Thanks in advance,
tftd

[Fotiman]

x.onreadystatechange = onReady(return_func); 

In this example, you are executing your onReady function immediately and assigning the return value to your onreadystatechange handler, which I think is not what you're intending to do (especially since onReady doesn't seem to return a function pointer). But more importantly, it's important to note that AJAX stands for Asynchonous JavaScript and XML. In your example, you are trying to treat the AJAX request as a syncrhonous operation. That is, you're expecting that calling:
connection.connect("var");
will result in connection having the returned value stored in:
connection.returnOutput;
However, because this is an Asynchronous request, you can't be sure that the request has completed. I'm going to copy an analogy from DrDoc in another recent thread:

To explain it differently. Imagine a floor manager in a factory. He has a task list that looks as follows:
Push button A
Push button B
Ask Joe to push a button
Push button C

There is no guarantee that Joe has pushed his button before button C is pushed. If pushing of button C is dependant on Joe pushing his button, then the process will fail.

That is what is happening to you.

I hope that makes it clear.

[tftd]

Thank you explaining this to me Fotiman !
I have read that thread after I post this one... The answer to every question related with AJAX is prototype.js - [prototypejs.org...]
With this really advanced javascript you can do whatever you want that's related with AJAX...

Hope that helps somebody that would need to accomplish what I had.. :)

Best wishes,
tftd

[Fotiman]

Prototype is not my favorite framework. It does a lot of mucking up in the global namespace. I prefer the Yahoo Library [developer.yahoo.com]'s Connection Manager if you're considering different Frameworks.