How to return value from Ajax Function - Use synchronous request

Posted on January 29, 2008
Filed Under ajax, coding technique, tips and technique

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.

Popularity: 19% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.And, You can also follow me on twitter at http://twitter.com/roshanbh.

» How to solve the problem of retrieving same value by Ajax - Browser Cache Problem
» A ajax tutorial for beginners
» Prevent form post request from another domain in PHP
» Date format validation in PHP

Comments

3 Responses to “How to return value from Ajax Function - Use synchronous request”

PHP Coding School » Blog Archive » php tips [2008-01-29 19:50:34] on January 29th, 2008 8:04 pm

[...] How to return value from Ajax Function - Use synchronous request By Roshan 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. … Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np [...]
manish on June 11th, 2008 10:44 am

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

please check..again…
Roshan on June 11th, 2008 11:37 am

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