...

์ ์ด์ฟผ๋ฆฌ AJAX ์์ฒญ
์ด๋ฒ ํฌ์คํ ์๋ ajax์ ๊ธฐ๋ณธ๊ฐ๋ ๊ฐ๋จ ์ ๋ฆฌ์ ์ ์ด์ฟผ๋ฆฌ ajax ๋ฉ์๋๋ฅผ ์ดํด๋ด ๋๋ค.
AJAX ๋?
AJAX๋ asynchronous Javascript and XML์ ๋๋ค. ์์ฆ์ XML๋ณด๋ค HTML์ด๋ JSON์ ๋ ๋ง์ด ์ฐ์ง๋ง, ๊ฐ๋ฐ ๋น์ xml์ด ์ฃผ๋ฅ๋ผ์ ์ด๋ฆ์ด ๊ทธ๋ ๊ฒ ๋ ๊ฒ์ ๋๋ค.
๊ธฐ์กด์ ์น์์๋ ํ ๋ฒ ํ์ด์ง๋ฅผ ๋ก๋ฉํ๋ฉด ๋ค๋ฅธ ํ์ด์ง๋ฅผ ๋ก๋ฉํ๊ธฐ ์ํด์ ๋งํฌ๋ฅผ ํ๊ณ ๋์ด๊ฐ์ผ ํ์ต๋๋ค. ๊ทธ๋ ๊ฒ ๋๋ฉด ํํ ๋งํ๋ ํ์ด์ง ๊น๋นก์์ด ๋ฐ์ํฉ๋๋ค. ๊ตฌ๊ธ ๊ฒ์์ ํด๋ณด๋ฉด, ํ์ด์ง๋ฅผ ์ ํํ์ง ์๊ณ ๋ ์์ ๊ฒ์์ด์ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋๋ค. Gmail๋ ๋ง์ฐฌ๊ฐ์ง์ฃ . ๋ฐ๋ก AJAX ๊ธฐ์ ์ ์ฌ์ฉํ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด์ฒ๋ผ ๋น๋๊ธฐ์ ์ผ๋ก ์๋ฒ์ ์์ฒญ์ ํ์ฌ ํ์ด์ง ์ ํ ์์ด๋ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. ๋ํ์ ์ผ๋ก ajax๋ฅผ ์ด์ฉํด์ ๋ธ๋ผ์ฐ์ ์ ์์ฒญ์ ๋ณด๋ด๋ ๋ฐฉ์์ด ๋๊ฐ์ง ์๋๋ฐ, get๊ณผ post ๋ฐฉ์์ด ์์ต๋๋ค.
ํน์ง | GET ๋ฐฉ์ | POST ๋ฐฉ์ |
์บ์ํ(cached) | ์บ์๋ ์ ์์. | ์บ์๋์ง ์์. |
๋ธ๋ผ์ฐ์ ํ์คํ ๋ฆฌ | ํ์คํ ๋ฆฌ์ ์ฟผ๋ฆฌ ๋ฌธ์์ด์ด ๊ธฐ๋ก๋จ. | ํ์คํ ๋ฆฌ์ ๊ธฐ๋ก๋์ง ์์. |
๋ฐ์ดํฐ ๊ธธ์ด | ๋ฐ์ดํฐ์ ๊ธธ์ด๊ฐ URL ์ฃผ์์ ๊ธธ์ด ์ด๋ด๋ก ์ ํ๋จ. (์ต์คํ๋ก๋ฌ์์ URL ์ฃผ์๊ฐ ๊ฐ์ง ์ ์๋ ์ต๋ ๊ธธ์ด๋ 2,083์์ด๋ฉฐ, ์ด ์ค์์ ์์ ๊ฒฝ๋ก ๊ธธ์ด๋ 2,048์๊น์ง๋ง ํ์ฉ๋จ) |
์ ํ ์์. |
๋ฐ์ดํฐ ํ์ | ์ค์ง ASCII ๋ฌธ์ ํ์ ์ ๋ฐ์ดํฐ๋ง ์ ์กํ ์ ์์. | ์ ํ ์์. |
๋ณด์์ฑ | ๋ฐ์ดํฐ๊ฐ URL ์ฃผ์์ ํฌํจ๋์ด ์ ์ก๋๋ฏ๋ก, ์๋ฌด๋ ๋ณผ ์ ์์ด ๋ณด์์ ๋งค์ฐ ์ทจ์ฝํจ. | ๋ธ๋ผ์ฐ์ ํ์คํ ๋ฆฌ์๋ ๊ธฐ๋ก๋์ง ์๊ณ , ๋ฐ์ดํฐ๊ฐ ๋ฐ๋ก ์ ์ก๋๋ฏ๋ก, GET ๋ฐฉ์๋ณด๋ค ๋ณด์์ฑ์ด ๋์. |
์ ์ด์ฟผ๋ฆฌ ajax ๋ฉ์๋
์์ฆ ๋๋ถ๋ถ์ ajax ์์ฒญ์ ๋ณด๋ผ๋ fetch() ๋ axios ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง๋ง, ๋ช๋ช ์ ํต์ด ์๋ ๊ธฐ์ ์์ ๋ ๊ฑฐ์ ํ๋ก์ ํธ ๋๋ฌธ์ jQuery AJAX๋ฅผ ์ฌ์ฉํ๊ณค ํฉ๋๋ค.
๋ฉ์๋ | ์ค๋ช |
$.ajax() | ๋น๋๊ธฐ์ Ajax๋ฅผ ์ด์ฉํ์ฌ HTTP ์์ฒญ์ ์ ์กํจ. |
$.get() | ์ ๋ฌ๋ฐ์ ์ฃผ์๋ก GET ๋ฐฉ์์ HTTP ์์ฒญ์ ์ ์กํจ. |
$.post() | ์ ๋ฌ๋ฐ์ ์ฃผ์๋ก POST ๋ฐฉ์์ HTTP ์์ฒญ์ ์ ์กํจ. |
$.getScript() | ์น ํ์ด์ง์ ์คํฌ๋ฆฝํธ๋ฅผ ์ถ๊ฐํจ. |
$.getJSON() | ์ ๋ฌ๋ฐ์ ์ฃผ์๋ก GET ๋ฐฉ์์ HTTP ์์ฒญ์ ์ ์กํ์ฌ, ์๋ต์ผ๋ก JSON ํ์ผ์ ์ ์ก๋ฐ์. |
.load() | ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ ํ, ์ฝ์ด ๋ค์ธ HTML ์ฝ๋๋ฅผ ์ ํํ ์์์ ๋ฐฐ์นํจ. |
๊ทธ๋ฆฌ๊ณ POST์ GET ํ์ ์ธ์๋ PUT๊ณผ DELETE๋ ์๋ ๋งํผ, PUT๊ณผ DELETE๋ฅผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ณ ๋ คํด๋ณด์์ผ ํฉ๋๋ค.
$.get()
์ ์ด์ฟผ๋ฆฌ์์๋ Ajax๋ฅผ ์ด์ฉํ์ฌ GET ๋ฐฉ์์ HTTP ์์ฒญ์ ๊ตฌํํ $.get() ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
URL ์ฃผ์๋ ํด๋ผ์ด์ธํธ๊ฐ HTTP ์์ฒญ์ ๋ณด๋ผ ์๋ฒ์ ์ฃผ์์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ HTTP ์์ฒญ์ด ์ฑ๊ณตํ์ ๋ ์ฝ๋ฐฑ ํจ์๊ฐ ์คํ๋๊ฒ ๋ฉ๋๋ค.
$.get(URL์ฃผ์, ์ฝ๋ฐฑํจ์]);
// GET ๋ฐฉ์์ผ๋ก ์๋ฒ์ HTTP Request๋ฅผ ๋ณด๋.
$.get("/examples/media/request_ajax.php",
// ์๋ฒ๊ฐ ํ์ํ ์ ๋ณด๋ฅผ ๊ฐ์ด ๋ณด๋.
{
species: "๊ณ ์์ด",
name: "๋๋น",
age: 3,
},
// ์๋ต์ด ์ค๋ฉด ํธ์ถ๋๋ ์ฝ๋ฐฑ ํจ์
function(data, status) {
$("#text").html(data + "<br>" + status); // ์ ์ก๋ฐ์ ๋ฐ์ดํฐ์ ์ ์ก ์ฑ๊ณต ์ฌ๋ถ๋ฅผ ๋ณด์ฌ์ค.
}
);
$.post()
์ ์ด์ฟผ๋ฆฌ์์๋ Ajax๋ฅผ ์ด์ฉํ์ฌ POST ๋ฐฉ์์ HTTP ์์ฒญ์ ๊ตฌํํ $.post() ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
$.post(URL์ฃผ์, ๋ฐ์ดํฐ, ์ฝ๋ฐฑํจ์);
// POST ๋ฐฉ์์ผ๋ก ์๋ฒ์ HTTP Request๋ฅผ ๋ณด๋.
$.post("/examples/media/request_ajax.php",
{
name: "ํ๊ธธ๋",
grade: "A"
}, // ์๋ฒ๊ฐ ํ์ํ ์ ๋ณด๋ฅผ ๊ฐ์ด ๋ณด๋.
function(data, status) {
$("#text").html(data + "<br>" + status); // ์ ์ก๋ฐ์ ๋ฐ์ดํฐ์ ์ ์ก ์ฑ๊ณต ์ฌ๋ถ๋ฅผ ๋ณด์ฌ์ค.
}
);
$.ajax()
$.ajax() ๋ฉ์๋๋ ์์์ ๋ฐฐ์ด ์ ์ด์ฟผ๋ฆฌ get, post ๋ฉ์๋๋ฅผ ํ๋๋ก ํฉ์น ํ๋ฐฉ ๋ฉ์๋๋ผ๊ณ ๋ณด๋ฉด ๋ฉ๋๋ค. ์ด ๋ฉ์๋ ํ๋๋ก ๋ค์ํ ์์ฒญ์ ์๋ฒ์ ๋ณด๋ผ ์ ์์ต๋๋ค. (type ์์ฑ์ด๋ method ์์ฑ์ผ๋ก http ๋ฉ์๋๋ฅผ ์ง์ ํ์ฌ ๋ณด๋ผ ์ ์์ต๋๋ค)
$.ajax(URL์ฃผ์, ์ต์
)
$.ajax({
url: "/examples/media/request_ajax.php", // ํด๋ผ์ด์ธํธ๊ฐ HTTP ์์ฒญ์ ๋ณด๋ผ ์๋ฒ์ URL ์ฃผ์
data: { name: "ํ๊ธธ๋" }, // HTTP ์์ฒญ๊ณผ ํจ๊ป ์๋ฒ๋ก ๋ณด๋ผ ๋ฐ์ดํฐ
method: "GET", // HTTP ์์ฒญ ๋ฐฉ์(GET, POST)
dataType: "json" // ์๋ฒ์์ ๋ณด๋ด์ค ๋ฐ์ดํฐ์ ํ์
})
// HTTP ์์ฒญ์ด ์ฑ๊ณตํ๋ฉด ์์ฒญํ ๋ฐ์ดํฐ๊ฐ done() ๋ฉ์๋๋ก ์ ๋ฌ๋จ.
.done(function(json) {
})
// HTTP ์์ฒญ์ด ์คํจํ๋ฉด ์ค๋ฅ์ ์ํ์ ๊ดํ ์ ๋ณด๊ฐ fail() ๋ฉ์๋๋ก ์ ๋ฌ๋จ.
.fail(function(xhr, status, errorThrown) {
})
// HTTP ์์ฒญ์ด ์ฑ๊ณตํ๊ฑฐ๋ ์คํจํ๋ ๊ฒ์ ์๊ด์์ด ์ธ์ ๋ always() ๋ฉ์๋๊ฐ ์คํ๋จ.
.always(function(xhr, status) {
});
$.ajax({
url: 'http://example.com/api/users/1',
method: 'DELETE', // delete ์์ฒญ
success: function(response) {
console.log('User deleted successfully!');
},
error: function(error) {
console.error('Error deleting user:', error);
}
});
.load()
load() ๋ฉ์๋๋ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ ํ, ์ฝ์ด ๋ค์ธ HTML ์ฝ๋๋ฅผ ์ ํํ ์์์ ํ์ํ๋ ์ผ์ข
์ ํ๋ฐฉ ๋จ์ถ ๋ฉ์๋๋ผ ๋ณด๋ฉด ๋๋ค.
// demo_test.txt ๋ด์ฉ์ ์๋ต๋ฐ์ ๋ค์ id๊ฐ list์ธ ์์์ ํ์ํจ
$("#list").load("/demo_test.txt");
์ ์ด์ฟผ๋ฆฌ ajax ๋ค์ํ ๋ฌธ๋ฒ
์ ์ด์ฟผ๋ฆฌ ajax ๋ฉ์๋๋ฅผ ์ด์ฉํ ๋ ์ฑ๊ณต, ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ์ํ ๊ต์ฅํ ๋ค์ํ ๋ฌธ๋ฒ ๋ฐฉ์์ด ์กด์ฌํฉ๋๋ค. ์์ ์ด ํธํ ๊ฒ์ ๊ณจ๋ผ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
์ฝ๋ฐฑ ๋ฐฉ์
์ฌํํ๊ฒ ํ๋์ ์๋ต์ ๋ํ ์ฝ๋ฐฑ ํจ์๋ฅผ ์คํ์ ์ฝ๋ฐฑ ๋ด๋ถ์์ ์๋ฌ๋ ๋ค์ํ ์ฒ๋ฆฌ๋ฅผ ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
// ์ฝ๋ฐฑ ๋ฐฉ์
$.get('url', function(data) {
console.log(data);
});
ํ๋กํผํฐ ๋ฐฉ์
์ฝ๋ฐฑ ํจ์ ๋์ ํจ์๋ฅผ ํฌํจํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ์์ฒด๋ฅผ ์ธ์๋ก ์ค์๋ ์์ต๋๋ค.
$.get('url', {
success: function(data) {
console.log(data);
},
error: function() {
console.log('์์ฒญ์ด ์คํจํ์์ต๋๋ค.');
},
always: function() {
console.log('์์ฒญ์ด ์๋ฃ๋์์ต๋๋ค.'); // always ํ๋กํผํฐ๋ ์์ฒญ์ด ์ฑ๊ณตํ๋ ์คํจํ๋ ํญ์ ์ค
}
});
ํ๋ก๋ฏธ์ค ๋ฐฉ์
ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ํตํ ๋ฉ์๋ ์ฒด์ด๋ ๋ฌธ๋ฒ์ ๋๋ค.
$.get('url')
.done(function() {
console.log('์์ฒญ์ด ์ฑ๊ณตํ์์ต๋๋ค.');
})
.fail(function() {
console.log('์์ฒญ์ด ์คํจํ์์ต๋๋ค.');
})
.always(function() {
console.log('์์ฒญ์ด ์๋ฃ๋์์ต๋๋ค.');
});
ํค๋ ์ค์ ํ๊ธฐ
๋ง์ผ ์ถ๊ฐ์ ์ http ํค๋๋ฅผ ์ค์ ํ๊ณ ์์ฒญ์ ๋ณด๋ด์ผ ํ ๊ฒฝ์ฐ ์๋์ ๊ฐ์ด ์ฌ์ฉํฉ๋๋ค.
$.ajax({
type: "GET",
url: "/api/me",
beforeSend: function (xhr) { // ์๋ฒ์ ์์ฒญ ๋ณด๋ด๊ธฐ์ ํค๋ ์ค์
xhr.setRequestHeader("Content-type", "application/json");
xhr.setRequestHeader("ApiKey", "asdfasxdfasdfasdf");
}
});
# ์ฐธ๊ณ ์๋ฃ
http://tcpschool.com/jquery/jq_ajax_httpRequest
https://www.zerocho.com/category/jQuery/post/57b1a48f432b8e586ae4a973
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.