The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

Question

The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

I am in search of a solution that will allow an AJAX API call to finish before the containing function does without relying on jQuery as a dependency for just one REST call...

After going through multiple solutions, all of which involve using jQuery, I came across this question How do I return the response from an asynchronous call?. However, I am determined to find a way to achieve this without adding jQuery as a dependency.

Currently, when a failing zip code value is inputted and the user clicks Submit, an alert pops up displaying other failed business rules but not the error related to "Mismatch in State and Zip."). Upon console logging, it seems that the REST call is successfully made and a response is received, but the alert(error) gets triggered before the async REST call completes and appends the value of error.

JS

function checkForm(form){
  var state = form.state;
  var zip = form.zip;
  var error = '';
  var flag = 0;

  var ckZip = checkZip(state, zip);
  if (ckZip.flag == 1){
    flag = 1;
  }
  error += ckZip.error;

  // show error and disable form submit if flag == 1
  if (flag == 1){
    alert(error);
    return false;
  }
}

function checkZip(state, zip){
  var state = form.state;
  var zip = form.zip;
  var error = '';
  var flag = 0;

  // check if value entered
  if (zip == ''){
    error += "Please provide a zip/postal code.\r\n";
    flag = 1;
  }

  // business rule: cannot enter - in a ZIP
  if (zip.search(/\x2d/) != -1){
    error += "Please remove dash from zip or postal code.\r\n";
    flag = 1;
  }

  // check if state and zip match
  // IMPORTANT: Fill in your client key
  var clientKey = "this-is-a-valid-key";
  var zipcode = zip.substring(0, 5);
  var url = "https://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians";
  // Make AJAX request
  var request = new XMLHttpRequest();
  request.open('GET', url, true);

  request.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 400) {alert("Got it");
        // Success!
        var data = JSON.parse(this.responseText);alert(data.state);
        if (data.state != state){
          error += "Mismatch in State and Zip.\r\n";
      flag = 1;
        }
      } else {
        // Error :(
        var response = JSON.parse(this.responseText);
        error += "error: " + response.error_msg;
      }
    }
  };

  request.send();
  request = null;

  return {flag: flag, error: error};
}

HTML

<form>
  <select id="state" name="state">
      <option value="" selected=""></option>
      <option value="AA">APO AA</option>                
      <option value="AE">APO AE</option>                
      <option value="AP">APO AP</option>                
      <option value="AL">Alabama</option>               
      <option value="AK">Alaska</option>                
      <option value="AZ">Arizona</option>               
      <option value="AR">Arkansas</option>                
      <option value="CA">California</option>                
      <option value="CO">Colorado</option>                
      <option value="CT">Connecticut</option> 
      <!-- ... -->              
  </select>

  <input type="text" id="zip" name="zip" value="">   
  <input type="Submit" id="Submit" name="Submit" value="Continue" onclick="return checkForm(this.form)">
</form>

javascript ajax

Answer 1

Answer №1

To actually retrieve information from the ajax call within your function, you may consider making the ajax call synchronous. However, I advise against this approach as it can freeze the UI of the browser tab, leading to a negative user experience. In addition, it is not necessary.

Instead, opt for an asynchronous call and learn how to handle the inability of the function to return information directly as a return value. You can refer to this question and its answers for guidance on how to achieve this. It's simpler than one might think. :-)

If you want to make your checkZip function work asynchronously, follow these steps:

Firstly, move the ajax call from the submit button to the form itself:

<form onsubmit="return checkZip(this)">

Next, ensure that checkZip always prevents form submission by returning false, and then submit the form once the ajax call is completed:

function checkZip(form) {

    // ...

    request.onreadystatechange = function() {
        // ...
        if (/* it's okay to submit the form*/) {
            form.submit(); // Does NOT call the handler again
        } else {
            // show error to user
        }
    };

    // Prevent initial form submission
    return false;
}

Keep in mind that since the form was not actually submitted when the "Submit" button was pressed, it will not include the Submit field with the value

Continue</code. If needed, you can remove the <code>name

from the submit button and add a hidden field instead:

<input type="hidden" name="Submit" value="Continue">

While it is technically feasible to make the ajax call synchronous by setting the third argument of open to false, I strongly discourage doing so.

request.open('GET', url, false);
// ----------------------^^^^^

Once again, I highly recommend avoiding synchronous ajax calls.

Answer 2

To actually retrieve information from the ajax call within your function, you may consider making the ajax call synchronous. However, I advise against this approach as it can freeze the UI of the browser tab, leading to a negative user experience. In addition, it is not necessary.

Instead, opt for an asynchronous call and learn how to handle the inability of the function to return information directly as a return value. You can refer to this question and its answers for guidance on how to achieve this. It's simpler than one might think. :-)

If you want to make your checkZip function work asynchronously, follow these steps:

Firstly, move the ajax call from the submit button to the form itself:

<form onsubmit="return checkZip(this)">

Next, ensure that checkZip always prevents form submission by returning false, and then submit the form once the ajax call is completed:

function checkZip(form) {

    // ...

    request.onreadystatechange = function() {
        // ...
        if (/* it's okay to submit the form*/) {
            form.submit(); // Does NOT call the handler again
        } else {
            // show error to user
        }
    };

    // Prevent initial form submission
    return false;
}

Keep in mind that since the form was not actually submitted when the "Submit" button was pressed, it will not include the Submit field with the value

Continue</code. If needed, you can remove the <code>name

from the submit button and add a hidden field instead:

<input type="hidden" name="Submit" value="Continue">

While it is technically feasible to make the ajax call synchronous by setting the third argument of open to false, I strongly discourage doing so.

request.open('GET', url, false);
// ----------------------^^^^^

Once again, I highly recommend avoiding synchronous ajax calls.

Answer 3

Answer №2

To ensure synchronous behavior, you have the option to use the XMLHTTPRequest object in a synchronous mode:

var request = new XMLHttpRequest();
request.open('GET', url, false);

It is worth noting that this method is generally discouraged by many developers.

Alternatively, you could place your alert function inside a setTimeout with a short delay to give the request enough time to complete processing:

setTimeout(function() {
    // Display error message and prevent form submission if flag is equal to 1
    if (flag == 1) {
        alert(error);
        return false;
    }
}, 1000);

Answer 4

To ensure synchronous behavior, you have the option to use the XMLHTTPRequest object in a synchronous mode:

var request = new XMLHttpRequest();
request.open('GET', url, false);

It is worth noting that this method is generally discouraged by many developers.

Alternatively, you could place your alert function inside a setTimeout with a short delay to give the request enough time to complete processing:

setTimeout(function() {
    // Display error message and prevent form submission if flag is equal to 1
    if (flag == 1) {
        alert(error);
        return false;
    }
}, 1000);

The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

Answer №1

Answer №2

Similar questions

Issue with toggleClass not functioning properly after receiving data from an AJAX call

Which method is more appropriate for my request - GET or POST? Or should I consider

There seems to be a hitch in the functioning of the JavaScript codes

Issue with displaying response content within a div using Ajax

Ways to modify menu when button is clicked?

Currently, I am utilizing Angular 2 to extract the name of a restaurant from a drop-down menu as soon as I input at least two characters

A guide on triggering a function when a button is clicked in reactjs

Switching a conditional className to a styled component

Refreshing the page results in a 404 error when utilizing React Router

Manipulating JSON with ng-model in AngularJS

"Tips for retrieving properties from a JSON object that has been converted to a string

Utilizing a hidden file-input, IE10 is able to transmit a FormData object via ajax

Placing the video at the center of the background image

managing jquery delays with deferred objects

Testing Async operations in the browser with Mocha and Chai

The retrieval process is unable to receive a response from the server

Reload the precise URL using JavaScript or jQuery

Ways to display a collection of random images with a click of a button?

Obtain information from an ajax request

Enhance your website with interactive AJAX callback animations using jQuery