ajax.responseText returns undefined

Question

I am using stack exchange api to get question from stackoverflow

function importQuestion(){//IMPORTS QUESTION
    $("import_status").innerHTML = "Validating Url ...";
    var url = $("stackoverflow_url").value;//User typed URL 
    var id = get_question_id_from_url(url);//Returns Question id from url
    var ajax_response = get_stackoverflow_question(id);//Returns json data form ajax api
    $("import_status").innerHTML = "Contacting stackoveflow.com ...";
    process_question_json(ajax_response);
    $("import_status").innerHTML = "Question is in place :D";
}

This function request server file which contact stack exchange api

function get_stackoverflow_question(id){
    debugger;
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){
            response = ajax.responseText;
            return response;
        }
    }
    ajax.open("GET","/ajax_call_files/import_question.php?id=33449986",true);
    ajax.send();
}

import_question.php file code is working fine i have manully checked it. It returns json data of question

get_stackoverflow_question(id); its returning undefined

If i add console.log(ajax.resonseText); it prints data in console after process_question_json(ajax_response); is called and this function throw error because ajax_response is undefined

I have resolved this issue with async:false but this is deprecated. Are there any alternative to this

I do not won't to use any third party libs

And What is the reason that ajax takes time to get response. I haven't encountered such problems before

Answer 1

AJAX is asynchronous. So you must use callbacks.

function get_stackoverflow_question(id){
    debugger;
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){

            callback(ajax.responseText);
        }
    }
    ajax.open("GET","/ajax_call_files/import_question.php?id=33449986",true);
    ajax.send();
}


get_stackoverflow_question(function(response) {
    // do your work here
    alert(response);
});