Return xmlhttp.responseText From AJAX Function

Question

I've been racking my brain for a couple hours now and doing a lot of searching and I cannot seem to find an answer. I want to know if it is possible to return the xmlhttp.responseText value from an AJAX function to the function that originally called the AJAX function.

xmlhttp.onreadystatechange = function () {
              if (xmlhttp.readyState == 4) {
                  if (xmlhttp.status == 200) {
                      //document.getElementById("err").style.color="red";
                      my_response = xmlhttp.responseText;
                      alert(my_response);
                      return my_response;

                  }
              }
          }

I want to return the my_response variable to the original caller. No matter what I try I have been unsuccessful. I even tried assigning it to the global window variable using window.my_response = xmlhttp.responseText but it ends up being undefined.

Every example I've seen of using AJAX pretty much does something inside of the if (xmlhttp.status == 200) part to update the web page. I really do not want to do that.

Can I return the value? Thanks for your help.

By the way, the ajax function works fine because the alert works properly.

xmlhttp.onreadystatechange = function () {
                          if (xmlhttp.readyState == 4) {
                              //document.getElementById("err").style.color="red";
                              console.log(row);
                              row.child( format(row.data())).show();
                              tr.addClass('shown');
                          }
                      }

The code of format function is above this.

You can't do that because of the async nature of ajax requests.... — Arun P Johny, Oct 31 '15 at 04:58
Instead you should use a callback function to process the response — Arun P Johny, Oct 31 '15 at 04:59
You cannot return it because the response is asynchronous (meaning it happens some time in the future) after the containing function has already completed. You must consume the result in the callback itself or call some other function from the callback and pass the data to it. See the question this was marked a dup of for lots of options on how to handle this. It is something to learn for people new to asynchronous programming in Javascript. — jfriend00, Oct 31 '15 at 05:04

i am me · Answer 1 · 2015-10-31T05:23:02.353

I use this ajax interchange with a little jQuery for links:

function swapContent(href, url_data, target) {
    $.ajax({
        type: 'GET',
        cache: false,
        url: href+'?' + url_data,  //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data
        success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request
            //load more data to "target" value div
            target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below
        }
    })
}

You can change the innerHTML to something else, and it should work unless you're getting an "existence hell" bug.

It also supports other functionality when you wrap stuff around it as it's the inter-changer for the page.

Return xmlhttp.responseText From AJAX Function

1 Answers1