Question

function ajax_request(destination_full_url) {

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("response: \n" + xmlhttp.responseText);
            return xmlhttp.responseText;

        }
    }

    xmlhttp.open("GET", destination_full_url, true);
    xmlhttp.send();
}



    function third_party_function(obj) {
       var response
       response = ajax_request("info.php?keyword=obj.value");
       alert(response);         
    }


<textarea onkeypress="third_party_function(this);"></textarea>

First comes off message box “underfined” one second after comes off message box with ajax request.

Question is why it runs alert(response); before finishing the previous step and how i make it wait untill ajax_request() function finished before going to next line?

Answer 1

because ajax is asynchronous and runs in background by default, you can make it synchronous by changing from

xmlhttp.open(“GET”, destination_full_url, true);

to

xmlhttp.open(“GET”, destination_full_url, false);

=== update ===

function ajax_request(destination_full_url, callback){
.....
xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("response: \n" + xmlhttp.responseText);
           callback(xmlhttp.responseText);

        }
    }
...
}

....


function third_party_function(obj) {
       ajax_request("info.php?keyword=obj.value", function(response){alert(response) });

    }