EN
JavaScript - ajax request
1 points
In this article, we would like to show you how to make AJAX requests in JavaScript.
Browser site GET and POST methods example:
xxxxxxxxxx
1
2
<html lang="en">
3
<body>
4
<script>
5
6
var xhr = new XMLHttpRequest();
7
8
xhr.onreadystatechange = function () {
9
// if request done
10
if (xhr.readyState == XMLHttpRequest.DONE) {
11
// if 200 http status received
12
if (xhr.status == 200)
13
// server response as text
14
document.body.innerText = 'Response: ' + xhr.responseText;
15
16
else
17
// error status
18
document.body.innerText = 'Error: ' + xhr.status;
19
}
20
};
21
22
// initialize or re-initialize GET request
23
xhr.open('GET', '/echo', true);
24
// send request without any data
25
xhr.send(null);
26
27
/*
28
// POST method example:
29
30
var data = 'This is my data...';
31
32
// initialize or re-initialize GET request
33
xhr.open('POST', '/echo', true);
34
// send request with data
35
xhr.send(data);
36
*/
37
38
</script>
39
</body>
40
</html>
SpringMVC server site GET and POST methods example:
xxxxxxxxxx
1
package com.dirask.ckeditor4.remake.spring.boot.controller;
2
3
import org.springframework.stereotype.Controller;
4
import org.springframework.web.bind.annotation.*;
5
6
7
public class EchoController {
8
9
value = "/echo", method = RequestMethod.GET) (
10
11
public String makeGetEcho()
12
{
13
return "Echo...";
14
}
15
16
/*
17
// Alternative POST method example:
18
19
@RequestMapping(value = "/echo", method = RequestMethod.POST)
20
@ResponseBody
21
public String makePostEcho(@RequestBody String data)
22
{
23
return data;
24
}
25
*/
26
}
27
Note: run both logics on same server.
Result:
Browser site GET and POST methods example:
xxxxxxxxxx
1
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
<script>
8
9
$.ajax({
10
type: 'GET',
11
url: '/echo',
12
success: function (data) {
13
document.body.innerText = 'Response: ' + data;
14
},
15
error: function(jqXHR) {
16
document.body.innerText = 'Error: ' + jqXHR.status;
17
}
18
});
19
20
/*
21
// POST method example:
22
23
$.ajax({
24
type: 'POST',
25
url: '/echo',
26
data: 'This is my data...',
27
success: function (data) {
28
document.body.innerText = 'Response: ' + data;
29
},
30
error: function(jqXHR) {
31
document.body.innerText = 'Error: ' + jqXHR.status;
32
}
33
});
34
35
// or
36
37
$.get('/echo')
38
.done(function(data) {
39
document.body.innerText = 'Response: ' + data;
40
})
41
.fail(function(jqXHR) {
42
document.body.innerText = 'Error: ' + jqXHR.status;
43
});
44
45
// or
46
47
$.post('/echo', 'This is my data...')
48
.done(function(data) {
49
document.body.innerText = 'Response: ' + data;
50
})
51
.fail(function(jqXHR) {
52
document.body.innerText = 'Error: ' + jqXHR.status;
53
});
54
55
*/
56
57
</script>
58
</body>
59
</html>
SpringMVC server site GET and POST methods example:
xxxxxxxxxx
1
package com.dirask.ckeditor4.remake.spring.boot.controller;
2
3
import org.springframework.stereotype.Controller;
4
import org.springframework.web.bind.annotation.*;
5
6
7
public class EchoController {
8
9
value = "/echo", method = RequestMethod.GET) (
10
11
public String makeGetEcho()
12
{
13
return "Echo...";
14
}
15
16
/*
17
// Alternative POST method example:
18
19
@RequestMapping(value = "/echo", method = RequestMethod.POST)
20
@ResponseBody
21
public String makePostEcho(@RequestBody String data)
22
{
23
return data;
24
}
25
*/
26
}
Note: run both logics on same server.
Result:
Browser site GET and POST methods example:
xxxxxxxxxx
1
2
<html lang="en">
3
<body>
4
<script>
5
6
fetch('/echo')
7
.then(data => {
8
data.text()
9
.then(text => {
10
document.body.innerText = 'Response: ' + text;
11
});
12
})
13
.catch(error => {
14
console.log('Error:', error);
15
});
16
17
/*
18
// POST method example:
19
20
var config = {
21
method: 'POST',
22
body: 'This is my data...'
23
};
24
25
fetch('/echo', config)
26
.then(data => {
27
data.text()
28
.then(text => {
29
document.body.innerText = 'Response: ' + text;
30
});
31
})
32
.catch(error => {
33
console.log('Error:', error);
34
});
35
*/
36
</script>
37
</body>
38
</html>
SpringMVC server site GET and POST methods example:
xxxxxxxxxx
1
package com.dirask.ckeditor4.remake.spring.boot.controller;
2
3
import org.springframework.stereotype.Controller;
4
import org.springframework.web.bind.annotation.*;
5
6
7
public class EchoController {
8
9
value = "/echo", method = RequestMethod.GET) (
10
11
public String makeGetEcho()
12
{
13
return "Echo...";
14
}
15
16
/*
17
// Alternative POST method example:
18
19
@RequestMapping(value = "/echo", method = RequestMethod.POST)
20
@ResponseBody
21
public String makePostEcho(@RequestBody String data)
22
{
23
return data;
24
}
25
*/
26
}
Note: run both logics on same server.
Result:
Browser site GET and POST methods example:
xxxxxxxxxx
1
<!doctype html>
2
<html lang="en">
3
<body>
4
<script>
5
6
async function doRequest() {
7
/*
8
// Uncomment this source code for POST request method
9
10
var config = {
11
method: 'POST',
12
body: 'This is my data...'
13
};
14
*/
15
16
try {
17
const response = await fetch('/echo'/*, config*/);
18
const text = await response.text();
19
20
document.body.innerText = 'Response: ' + text;
21
} catch (error) {
22
console.log('Error:', error);
23
}
24
}
25
26
doRequest();
27
28
</script>
29
</body>
30
</html>
SpringMVC server site GET and POST methods example:
xxxxxxxxxx
1
package com.dirask.ckeditor4.remake.spring.boot.controller;
2
3
import org.springframework.stereotype.Controller;
4
import org.springframework.web.bind.annotation.*;
5
6
7
public class EchoController {
8
9
value = "/echo", method = RequestMethod.GET) (
10
11
public String makeGetEcho()
12
{
13
return "Echo...";
14
}
15
16
/*
17
// Alternative POST method example:
18
19
@RequestMapping(value = "/echo", method = RequestMethod.POST)
20
@ResponseBody
21
public String makePostEcho(@RequestBody String data)
22
{
23
return data;
24
}
25
*/
26
}
Note: run both logics on same server.
Result: