How to return value from Ajax Function – Use synchronous request

Advertisement

Have you ever tried to return values from the Ajax function ? Well it might be sometime the cases when you might have to return the value got from the server to another function rather than updating the component.

Let’s try to return the values from the traditional Ajax function.

 

 

function getVal(param)
{
  var strURL=”findValues.php?val=”+param;
  var req = getXMLHTTP();
  if (req)
  {
    req.onreadystatechange = function()
    {
      if (req.readyState == 4)
      {
        return req.responseText;
      }
    }

    req.open(”GET”, strURL, true);
    req.send(null);
  }
}

And now look at the following statement ,

alert(getVal(1));

What does the alert statement displays? Is it the value returned from the server?? Not at all, it alert “undefined”. Why so?? What happens here is you are trying to get the synchronous request but the request runs asynchronously.So to return the value, we need to make the request synchronous so that we can return the value from the Ajax function.

So what is the difference between synchronous request and asynchronous request of Ajax?? In the above example which is asynchronous request, the callback function is called in the background leaving the other activity of your program to flow no matter weather the result is obtained from the server or not. But in the case of synchronous request, JavaScript stop processing your program until a result has been obtained from the server.

Now let’s look at the synchronous way of request of the above function


function getVal(param)
{
  var strURL=”findValues.php?val=”+param;
  var req = getXMLHTTP();
  req.open(”GET”, strURL, false); //third parameter is set to false here
  req.send(null);
  return req.responseText;
}

If you look at the open method, the third parameter is false which means the the request should be synchronous, if set to true the request become asynchronous and the callback function and onreadystatechange property must be used.

Click here to learn more about synchronous request.

Note:You might face the problem of browser stuck, slow website link with the synchronous request of the Ajax so you have keep these things into account before making the synchronous request.

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

12 Comments on “How to return value from Ajax Function – Use synchronous request”

  • manish wrote on 11 June, 2008, 10:44

    nice tutorial thanks. this is only the concept , when i use not wotking….still return value “undefined”.

    please check..again…

  • Roshan wrote on 11 June, 2008, 11:37

    Which function did u use the second one right? Did you made your own getXMLHTTP(); function

  • Scott F wrote on 27 August, 2008, 7:42

    Manish is right. The value returned is still undefined.

  • Roshan wrote on 27 August, 2008, 8:24

    @Scott – which function did you try the first one or the second one ? try the second one….

  • Tony wrote on 28 October, 2008, 20:24

    This is not working my friend, it keeps returning undefined.

  • newbies wrote on 8 June, 2009, 10:14

    hey thanks a lot for your tips, this helped me in my headache ajax in developing php database library..

    more power!

  • drgiggles wrote on 4 April, 2010, 21:00

    great stuff thanks for this works like a charm.

  • Eran Hazout wrote on 3 August, 2010, 18:18

    it is great :)
    I have been trying to fix it for a long time …
    thank you

  • haha wrote on 10 August, 2010, 15:08

    with Prototype.js, below code works!

    function test(param) {
    var url = “haha”+param;
    new Ajax.Request(url,{
    asynchronous: false,
    onComplete: function(data) {
    result = data.responseText;
    }
    });
    return result;
    }

  • rbw152 wrote on 9 June, 2011, 12:14

    Brilliant! I’d been trying to work this one out all morning and you descrinbed precisely the problem I had.

    Thanks very much!

Trackbacks

  1. PHP Coding School » Blog Archive » php tips [2008-01-29 19:50:34]
  2. pligg.com

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.