EN
JavaScript - return ajax response from asynchronous call
11 points
In this article, we would like to show you how to return an ajax response from an asynchronous call in JavaScript.
For making a request with AJAX it is necessary to make an async operation - the sync AJAX request technic is not recommended in the main thread for many web browsers and is marked as deprecated. Async operation requires callback methods or async/await keywords usage. The callback method is executed in the event loop, which means the response is not available during sequential logic execution that contains AJAX request - we need to wait until request logic will be finished and return to the JavaScript program response.
Each below AJAX example (from 2nd to 4th) has been executed with the below Java Spring backend logic.
EchoController.java file:
xxxxxxxxxx1
package com.dirask.examples;2
3
import org.springframework.stereotype.Controller;4
import org.springframework.web.bind.annotation.*;5
6
7
public class EchoController8
{9
(value = "/examples/echo", method = RequestMethod.GET)10
11
public String makeGetEcho(("text") String text)12
{13
return text;14
}15
}16
index.html file:
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
</head>6
<body>7
<pre id="response"></pre>8
<script>9
10
var handle = document.getElementById('response');11
12
function makeRequest(callback) {13
$.ajax({14
type: 'GET',15
url: '/examples/echo',16
data: {17
text: 'This is data...'18
},19
success: function (data) {20
callback(true, data);21
},22
error: function (jqXHR) {23
callback(false, jqXHR.status);24
}25
});26
}27
28
makeRequest(function(result, data) {29
handle.innerText += 'Result: ' + result + '\nData:\n' + data;30
});31
32
</script>33
</body>34
</html>Note:
ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
</head>6
<body>7
<pre id="response"></pre>8
<script>9
10
var handle = document.getElementById('response');11
12
function makeRequest() {13
var promise = new Promise(function(resolve, reject) {14
$.ajax({15
type: 'GET',16
url: '/examples/echo',17
data: {18
text: 'This is data...'19
},20
success: function (data) {21
resolve(data);22
},23
error: function (jqXHR) {24
reject(jqXHR.status);25
}26
});27
});28
29
return promise;30
}31
32
var promise = makeRequest();33
34
promise.then(function(data) {35
handle.innerText += 'Result: true\nData:\n' + data;36
});37
38
promise.catch(function(status) {39
handle.innerText += 'Error: ' + status;40
});41
42
</script>43
</body>44
</html>Note:
ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
</head>6
<body>7
<pre id="response"></pre>8
<script>9
10
var handle = document.getElementById('response');11
12
function makeRequest() {13
var promise = new Promise(function(resolve, reject) {14
$.ajax({15
type: 'GET',16
url: '/examples/echo',17
data: {18
text: 'This is data...'19
},20
success: function (data) {21
resolve(data);22
},23
error: function (jqXHR) {24
reject(jqXHR.status);25
}26
});27
});28
29
return promise;30
}31
32
(async function() {33
try {34
var data = await makeRequest();35
36
handle.innerText += 'Result: true\nData:\n' + data;37
} catch(status) {38
handle.innerText += 'Error: ' + status;39
}40
})();41
42
</script>43
</body>44
</html>Notes:
awaitoperations can be executed only inasyncmethods - this way makes an impression the operation looks like assigning returned value in sync programming.ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html>3
<body>4
<pre id="response"></pre>5
<script>6
7
var handle = document.getElementById('response');8
9
function makeRequest(callback) {10
var xhr = new XMLHttpRequest();11
12
xhr.onreadystatechange = function () {13
if (xhr.readyState == XMLHttpRequest.DONE) {14
if (xhr.status == 200) {15
callback(true, xhr.responseText);16
} else {17
callback(false, xhr.status);18
}19
}20
};21
22
var text = encodeURIComponent('This is data...');23
24
xhr.open('GET', '/examples/echo?text=' + text, true);25
xhr.send(null);26
}27
28
makeRequest(function(result, data) {29
handle.innerText += 'Result: ' + result + '\nData:\n' + data;30
});31
32
</script>33
</body>34
</html>Note:
ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html>3
<body>4
<pre id="response"></pre>5
<script>6
7
var handle = document.getElementById('response');8
9
function makeRequest() {10
var promise = new Promise(function(resolve, reject) {11
var xhr = new XMLHttpRequest();12
13
xhr.onreadystatechange = function () {14
if (xhr.readyState == XMLHttpRequest.DONE) {15
if (xhr.status == 200) {16
resolve(xhr.responseText);17
} else {18
reject(xhr.status);19
}20
}21
};22
23
var text = encodeURIComponent('This is data...');24
25
xhr.open('GET', '/examples/echo?text=' + text, true);26
xhr.send(null);27
});28
29
return promise;30
}31
32
var promise = makeRequest();33
34
promise.then(function(data) {35
handle.innerText += 'Result: true\nData:\n' + data;36
});37
38
promise.catch(function(status) {39
handle.innerText += 'Error: ' + status;40
});41
42
</script>43
</body>44
</html>Note:
ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html>3
<body>4
<pre id="response"></pre>5
<script>6
7
var handle = document.getElementById('response');8
9
function makeRequest() {10
var promise = new Promise(function(resolve, reject) {11
var xhr = new XMLHttpRequest();12
13
xhr.onreadystatechange = function () {14
if (xhr.readyState == XMLHttpRequest.DONE) {15
if (xhr.status == 200) {16
resolve(xhr.responseText);17
} else {18
reject(xhr.status);19
}20
}21
};22
23
var text = encodeURIComponent('This is data...');24
25
xhr.open('GET', '/examples/echo?text=' + text, true);26
xhr.send(null);27
});28
29
return promise;30
}31
32
(async function() {33
try {34
var data = await makeRequest();35
36
handle.innerText += 'Result: true\nData:\n' + data;37
} catch(status) {38
handle.innerText += 'Error: ' + status;39
}40
})();41
42
</script>43
</body>44
</html>Notes:
awaitoperations can be executed only inasyncmethods - this way makes an impression the operation looks like assigning returned value in sync programming.ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html>3
<body>4
<pre id="response"></pre>5
<script>6
7
var handle = document.getElementById('response');8
9
var text = encodeURIComponent('This is data...');10
var promise = fetch('/examples/echo?text=' + text);11
12
promise.then(function(data) {13
var text = data.text();14
15
text.then(function(response) {16
handle.innerText += 'Result: true\nData:\n' + response;17
});18
});19
20
promise.catch(function(error) {21
handle.innerText += 'Error: ' + error.message;22
});23
24
</script>25
</body>26
</html>Note:
ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
index.html file:
xxxxxxxxxx1
2
<html>3
<body>4
<pre id="response"></pre>5
<script>6
7
var handle = document.getElementById('response');8
9
(async function() {10
try {11
var text = encodeURIComponent('This is data...');12
var promise = await fetch('/examples/echo?text=' + text);13
var response = await promise.text();14
15
handle.innerText += 'Result: true\nData:\n' + response;16
} catch(error) {17
handle.innerText += 'Error: ' + error.message;18
}19
})();20
21
</script>22
</body>23
</html>Notes:
awaitoperations can be executed only inasyncmethods - this way makes an impression the operation looks like assigning returned value in sync programming.ajax.htmlandbackend.phpfiles should be placed on php server both.
Result:
