Help needed with AJAX

[clivebu]

Hi,

This is the first time I have attempted to use AJAX, so please bear with me...
I have been stuck with this problem since last week Friday and am at a loss so pleaaseee, any help will be "muchly " appreciated

Here's my problem in a nutshell


What I am attempting to do is, on my customer details page, call an ASP page which checks my DB to see whether customerUserName already exists on the DB, if it doesn't I return a value of 1 (i.e. response.write 1 in my called ASP page) else I return a 0...

I am trying to evaluate the xmlhttp.responseText from the calling function(SaveCust) by moving the xmlhttp.responseText to a textbox on the page (returnVal) in the called function (stateChanged).

When evaluating the (returnVal) textbox in the calling function, it always contains null, UNLESS I alert it twice (then it DOES get the value)?????? I have also alerted the xmlhttp.responseText in the called function and the value returned is correct?The textbox (returnVal) DOES have the value in it when displayed on the screen???

I assumed this was a timing issue, and needed a "Do Events" so I tried putting in a onSetTimeout, this didn't work...

Is there anyway, I can check the responseText from the calling function?????

I am testing this on Vista Home Basic, Premium and Business platforms using IE8... (have not attempted this yet with firefox, chrome or safari)


I have the following script in my page

var lo;
function SaveCust()
{
//this SQL is actually inside the dodb.asp page BUT for better clarity on what I am attempting, I ahve included it here
    var strSQL = "SELECT * From  CUSTOMER WHERE CustUserName = '" + trim(window.document.getElementById("CustUserName").value) +"'";

    url="dodb.asp?sql="+strSQL+"&type=1";

    xmlhttp.onreadystatechange=stateChanged;

    xmlhttp.open("GET",url,true);

    xmlhttp.send(null);

    lo = window.document.getElementById("returnVal").value;

    alert("-"+lo+"-");

    alert("-"+lo+"-");

    if(lo==1)// cust doesn't exist

    {
//sql Statement here, is INSERT INTO CUSTOMERS etc....
        url="dodb.asp?type=2";

        xmlhttp.onreadystatechange=stateChanged;

        xmlhttp.open("GET",url,true);

        xmlhttp.send(null);

        //if unsuccesful display error message, exit function

        lo=window.document.getElementById("returnVal").value;

        alert("-"+lo+"-");

        if(lo!=0)
        {
             alert("error" + lo);
              return;
         }

      }

      else

      {

        user_err(21);

        alert(error);

        return;

       }

}

 

function stateChanged()

{

if(xmlhttp.readyState==4)

  {

    window.document.getElementById("returnVal").value=xmlhttp.responseText;

  }

}

[Dimitar]

erm. return is event driven as the request is asynchronous by default.

what this means for your code is:

xmlhttp.onreadystatechange=stateChanged; -> this will set a thread / code block to run after the xhr request fires an event and goes to the stateChanged function. think of it as creating a new fork. the problem is, your old one cannot continue execution and rely on the result of the ajax to use as data.

the stateChanged function will--in good time--evaluate response and set the value of the layer. this depends on latency though. if server is slow, or user is far, it can take a full second or more for the event to fire.

whereas... you try to read the response some ms after setting the event:

lo = window.document.getElementById("returnVal").value; <-- runs too early before the event has fired.

which is, why you are looping it until it comes up with something.

does that make sense? the correct way of writing this is to wrap all you want to happen in the stateChanged function.

the other way is to use synchronous request (google how to do it) but this has a drawback as it freezes browser totally until the expected events fire...

you may also get scoping errors this way as your statechanged function is defined outside of the function where you instigate the ajax object.
(incidentally, the way you do that is not cross browser either)

consider doing..

PHP Code:

xmlhttp.onreadystatechange = function() {
    alert(this.responseText);
    /// do whatever with the responseText from here.
};