How can I make ajax as a synchronize?

Question

I am using asp.net as a front tool and I used ajax to retrieve data from database but when I want to check the user is valid or not(in Login).Sometimes due to some problem data couldn't load before that web service called so how can I solve it?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor, Aug 29 '19 at 18:44

score 2 · Answer 1 · answered Aug 29 '19 at 17:52

I'm not sure if I'm understanding correctly, but do you mean using ajax synchronously?

function getRemote() {
    return $.ajax({
        type: "GET",
        url: remote_url,
        async: false,
        success: function (result) {
            if (result.valid)
                "something here"
            else
                "something here"
        }
    });
}

score 2 · Accepted Answer · answered Aug 29 '19 at 18:40

In simple words, the AJAX make a request to the server (asynchronous), the server picks up the request and process it. Think of the time the server is processing the request, as a cook, cooking food in the kitchen, meanwhile the customer (the front-end, you) is waiting for the server to respond.

Once the server (backend - C#, Web Api, etc) is done talking to the database to confirm if the user is in the database. The server might return true or false (or the actual user).

Meanwhile, the front end (you, your ajax call) will be waiting for the answer). Once it receives the answer in the success function, it will do what needs to be done.

In other words, everything in regards to checking if user is present or not needs to be done from the success function. (Note: this function does not get called until the server is done processing your request).

Ajax by default is asynchronous, but it is possible to make it synchronous (meaning, if the server doesn't respond, it should not run the other codes after the ajax block of code) , which I would not recommend, but the website is not going to perform well (based on my experience)

If the server runs into an error, the error function will be called. The logic to display error will be shown here.

var badurl = 'http://www.examplewebsite.com/api/checkIfUserExits'; //your backend. 

var goodurl = 'https://reqres.in/api/users?page=2'; //can only make queries so many times. After a while it would stop working, it is a paid service. 

var jsonData = {
              username: "queen",
              email: "exmaple@jerry.com"
            };
            
//feel free to test with bad url

var yellowVar = "apple";

$.ajax({
        url: goodurl,  //change goodurl to badurl to see success and error. 
        type: 'POST',
        dataType: 'Content-Type: application/json; charset=utf-8',
        data: jsonData,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            //the data variable will contain what the server is saying
            //in this case, the server was able to successfully run the function
            //return the data that you need.
            
            //on the server side, you would receive the information in the 
            //jsonData variable and process it. check with your database and see 
            // if it exists. 
            
            document.getElementById("successDiv").innerHTML  = data;
        },
        error: function (data) {
        //this function will be called if there is a network error, or the 
        //internet suddenly went away
        //in this case, the data variable will contain info about the error message
            document.getElementById("errorDiv").innerText = "An error has occurred"; //something like that. 
            
             document.getElementById("successDiv").innerHTML  = "";
            
            //other validation logic will continue here. 
        }
    });
    
 alert (yellowVar); //note, depending on the speed of your server response to your ajax (this code (alert) might run before the success function runs or the error function runs). This part use to trip me up. Meanwhile, I am still learning. In other words, you could pretend as if your ajax function isn't there at all, because async means that it will not stop other code from running. 
 
 //if you use async: false option in your ajax, the alert function will not run until the ajax has received response back from your server (the url or your backend)

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
<div id="errorDiv"></div>

<p>Welcome to the website. yay! </p>

<p>We are now making a call to our api immediately on website load. </p>

<p id="successDiv">Loading...</p>


</body>

</html>

How can I make ajax as a synchronize?

2 Answers2