Is there a way to make $ajax pause until data is received, then store it in a variable?

Question

Is there a way to make $ajax pause until data is received, then store it in a variable?

I am having trouble with disabling asynchronous ajax. Here is the code snippet that I have:

  function GetDataFromUninorte() {
        link="http://www.uninorte.edu.co/documents/71051/11558879/ExampleData.csv/0e3c22b1-0ec4-490d-86a2-d4bc4f512030";
        var result=
        $.ajax({
              url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
              type: 'GET',
              async: false,
              dataType: 'json',
                success: function(response) {
                  console.log("Inside: " + response);
                }
            }).responseText;
       console.log("Outside: "+result);
       return result;
      }

However, I am encountering the following issue:

"Outside" always runs first

It seems that "Outside" always runs first and the result is undefined, making it impossible to process data.

I have attempted
When ... Then
Setting Async = false
Passing data as parameters in the I / O functions
and other methods, but nothing has worked
:/

... Thank you in advance
(I apologize for any mistakes in my English)

[Solved]

Perhaps not optimal, but within the "success:" statement, I call a function that receives the AJAX response and triggers the rest of the process. This way, I do not need to store the response in a variable and the asynchrony does not affect me.

javascript ajax asynchronous

Answer 1

Answer №1

To utilize callbacks, you can find more information here

function ObtainDataFromUninorte(successCallback, errorCallback) {
    link="http://www.uninorte.edu.co/documents/...";
    $.ajax({
        url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
        type: 'GET',
        async: false,
        dataType: 'json',
        success: successCallback,
        error: errorCallback
    });
}

function mySuccessCallback(successResponse) {
    console.log('callback:success', successResponse);
}
function myErrorCallback(successResponse) {
    console.log('callback:success', successResponse);
}

ObtainDataFromUninorte(mySuccessCallback, myErrorCallback);

Alternatively, you can opt for using promises (limited support in IE browsers)

function ObtainDataFromUninorte() {
    return new Promise(function(resolve, reject) {
        link="http://www.uninorte.edu.co/documents/...";
        $.ajax({
            url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
            type: 'GET',
            async: false,
            dataType: 'json',
            success: resolve,
            error: reject
        });
    });

}

ObtainDataFromUninorte()
    .then(function(successResponse){
        console.log('promise:success', successResponse);
    }, function(errorResponse){
        console.log('promise:error', errorResponse);
    });

Answer 2

To utilize callbacks, you can find more information here

function ObtainDataFromUninorte(successCallback, errorCallback) {
    link="http://www.uninorte.edu.co/documents/...";
    $.ajax({
        url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
        type: 'GET',
        async: false,
        dataType: 'json',
        success: successCallback,
        error: errorCallback
    });
}

function mySuccessCallback(successResponse) {
    console.log('callback:success', successResponse);
}
function myErrorCallback(successResponse) {
    console.log('callback:success', successResponse);
}

ObtainDataFromUninorte(mySuccessCallback, myErrorCallback);

Alternatively, you can opt for using promises (limited support in IE browsers)

function ObtainDataFromUninorte() {
    return new Promise(function(resolve, reject) {
        link="http://www.uninorte.edu.co/documents/...";
        $.ajax({
            url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
            type: 'GET',
            async: false,
            dataType: 'json',
            success: resolve,
            error: reject
        });
    });

}

ObtainDataFromUninorte()
    .then(function(successResponse){
        console.log('promise:success', successResponse);
    }, function(errorResponse){
        console.log('promise:error', errorResponse);
    });

Answer 3

Answer №2

Because AJAX operates asynchronously, it is important to include a callback function that will be executed once the response from the AJAX request is received. This allows you to access the responseText property from the xhr object.

Another approach to handling this issue is utilizing jQuery's Deferred and promise features as demonstrated below:

function FetchDataFromUninorte() {
        var defObject = $.Deferred();  // create a deferred object.
        url="http://www.uninorte.edu.co/documents/71051/11558879/ExampleData.csv/0e3c22b1-0ec4-490d-86a2-d4bc4f512030";

            $.ajax({
                  url: 'http://whateverorigin.org/get?url=' + url +"&callback=?" ,
                  type: 'GET',
                  async: false,
                  dataType: 'json',
                    success: function(response) {
                      console.log("Inside: " + response);
                      defObject.resolve(response);    //resolve promise and pass the response.
                    }
                });
        return defObject.promise();    // immediately return the promise object.
          }

Then implement the following code snippet:

var result = FetchDataFromUninorte();

$.when(result).done(function(response){
    // access the responseText here...
   console.log(response.responseText);
});

It is advisable to avoid using synchronous AJAX requests by specifying async:false since this can lead to blocking other user interactions on the interface.

Answer 4

Because AJAX operates asynchronously, it is important to include a callback function that will be executed once the response from the AJAX request is received. This allows you to access the responseText property from the xhr object.

Another approach to handling this issue is utilizing jQuery's Deferred and promise features as demonstrated below:

function FetchDataFromUninorte() {
        var defObject = $.Deferred();  // create a deferred object.
        url="http://www.uninorte.edu.co/documents/71051/11558879/ExampleData.csv/0e3c22b1-0ec4-490d-86a2-d4bc4f512030";

            $.ajax({
                  url: 'http://whateverorigin.org/get?url=' + url +"&callback=?" ,
                  type: 'GET',
                  async: false,
                  dataType: 'json',
                    success: function(response) {
                      console.log("Inside: " + response);
                      defObject.resolve(response);    //resolve promise and pass the response.
                    }
                });
        return defObject.promise();    // immediately return the promise object.
          }

Then implement the following code snippet:

var result = FetchDataFromUninorte();

$.when(result).done(function(response){
    // access the responseText here...
   console.log(response.responseText);
});

It is advisable to avoid using synchronous AJAX requests by specifying async:false since this can lead to blocking other user interactions on the interface.

Answer 5

Answer №3

Here is a simple function to retrieve data from Uninorte:

function FetchDataFromUninorte() {
    link="http://www.uninorte.edu.co/documents/71051/11558879/ExampleData.csv/0e3c22b1-0ec4-490d-86a2-d4bc4f512030";
    var result=
    $.ajax({
          url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
          type: 'GET',
          **timeout: 2000,**
          async: false,
          dataType: 'json',
            success: function(response) {
              console.log("Inside: " + response);
            }
        }).responseText;
   console.log("Outside: "+result);
   return result;
}

Answer 6

Here is a simple function to retrieve data from Uninorte:

function FetchDataFromUninorte() {
    link="http://www.uninorte.edu.co/documents/71051/11558879/ExampleData.csv/0e3c22b1-0ec4-490d-86a2-d4bc4f512030";
    var result=
    $.ajax({
          url: 'http://whateverorigin.org/get?url=' + link +"&callback=?" ,
          type: 'GET',
          **timeout: 2000,**
          async: false,
          dataType: 'json',
            success: function(response) {
              console.log("Inside: " + response);
            }
        }).responseText;
   console.log("Outside: "+result);
   return result;
}

Is there a way to make $ajax pause until data is received, then store it in a variable?

Answer №1

Answer №2

Answer №3

Similar questions

The jQuery function is operational solely within the console environment

Incorporating fs.writeFile in HTML with node.js - How do I get started?

I'm having trouble finding the solution to setting a token in my request header

Encountering the "test exited without ending" error while using asynchronous forEach loops with tape

The function _plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not usable as a constructor

Should the request be sent to the parent or child component?

Building a multi-page application with ExtJs MVC

Finding common elements between two arrays through partial matching

Conceal form upon submission with jQuery

Guide to enhancing jQuery tooltip plugin with ajax support - integrating live functionality

Receiving an error message stating "The JSON value could not be converted to System.Int32" when attempting to post JSON data via AJAX to a Web API

Implementing changes in the last loop iteration to impact the final result in Vue

Incorporate time zone awareness to JavaScript date objects

Obtaining HTML elements from JSON using jQuery (i.e., the opposite of serializing with Ajax)

Unable to send message to iframe from a different origin

Guide for extracting the button click text using selenium and node js, illustrated in the image

When multiple instances are present, the functionality of dynamically generated jQuery functions ceases to operate effectively

Endless Loop Seamless Vertical JavaScript Experience

Lazyload feature in Ajax is not functioning as expected

var numerous occurrences of an angular service