[CS] AJAX
1. AJAX๋?
- Asynchronous Javascript And XML
- ๋น๋๊ธฐ์ ์ผ๋ก JS๋ฅผ ์ฌ์ฉํด์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์, ๋์ ์ผ๋ก DOM์ ๊ฐฑ์ ๋ฐ ์กฐ์ํ๋ ์น ๊ฐ๋ฐ ๊ธฐ๋ฒ
2. ์ด๋ป๊ฒ ๋์ํ๋๊ฐ?

์ฌ์ฉ์๊ฐ AJAX๊ฐ ์ ์ฉ๋ UI์ ์ํธ์์ฉํ๋ฉด, ์๋ฒ์ AJAX ์์ฒญ์ ๋ณด๋ด๊ฒ ๋๋ค. ์๋ฒ๋ DB์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ JS ํ์ผ์ ์ ์๋์ด ์๋ ๋๋ก HTML/CSS์ ๋ฐ์ดํฐ๋ฅผ ์ตํฉํ์ฌ ๋ง๋ DOM ๊ฐ์ฒด๋ฅผ UI์ ์ ๋ฐ์ดํธ ์ํจ๋ค. ๋น๋๊ธฐ๋ก ์ด๋ฃจ์ด์ง๋ฉฐ, ๊ธฐ์กด์ ํ์ด์ง๋ฅผ ์ ๋ถ ๋ก๋ฉํ๋ ๋ฐฉ์์ด ์๋ ์ผ๋ถ๋ง ์ ๋ฐ์ดํธ ํ๋ ๋ฐฉ์์ด๋ค.
3. ์ด๋ป๊ฒ ์ฌ์ฉํ๋๊ฐ?
3-1. XMLHttpRequest
์ผ๋ฐ์ ์ผ๋ก XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์คํด์ค๋ฅผ ๋ง๋ค์ด ์ธ์คํด์ค์ open(), send() ๋ฑ์ ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ค.
var ourRequest = new XMLHttpRequest();
ourRequest.open(
"GET",
"https://learnwebcode.github.io/json-example/animals-1.json"
);
ourRequest.onload = () => {
var ourData = JSON.parse(ourRequest.responseText);
console.log(ourData[0]);
};
ourRequest.send();
open() ์ผ๋ก ์์ฒญํ ๋ฉ์๋์ URL์ ์ค์ ํ ๋ค, ๋ชจ๋ ๋ก๋๋์์ ๊ฒฝ์ฐ์ ์ฝ๋ฐฑํจ์๋ฅผ ์ด๊ธฐํํ๋ค.
3-2. Fetch API
์๋ก ๋์จ fetch ๋ฅผ ์ฌ์ฉํด์ ์์ฒญ์ ํ ์๋ ์๋๋ฐ, IE๋ฅผ ์ง์ํ์ง ์๋๋ค๋ ์ ์ ์ ์ธํ๊ณ ๋ XMLHttpRequest ๋ณด๋ค ํจ์ฌ ์ง๊ด์ ์ด๋ค. ES6(ES2015) ์์ ํ์ค์ด ๋์๊ณ , Promise๋ฅผ ๋ฆฌํดํ๋ค.
fetch("https://learnwebcode.github.io/json-example/animals-1.json")
.then(res => res.json())
.then(resJson => console.log(resJson));
์๋ต๊ฐ์ฒด๋ json(), blob() ๊ณผ ๊ฐ์ ๋ด์ฅ ๋ฉ์๋๋ก body๋ฅผ ์ถ์ถํด๋ด๊ณ ์ด๋ ๋ค์ Promise๋ฅผ ๋ฆฌํดํ๋ค.
4. ์ฅ๋จ์
๐ ์ฅ์
- ํ์ด์ง๋ฅผ ์ ํํ์ง ์๊ณ ๋น ๋ฅด๊ฒ ํ๋ฉด ์ผ๋ถ๋ถ์ ์ ๋ฐ์ดํธ ํ ์ ์๋ค.
- ์์ ํ๋ ๋ฐ์ดํฐ ์์ ์ค์ผ ์ ์๊ณ , ํด๋ผ์ด์ธํธ์๊ฒ ์ฒ๋ฆฌ๋ฅผ ๋งก๊ธธ ์ ์๋ค.
- ์๋ฒ ์ฒ๋ฆฌ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋น๋๊ธฐ ์์ฒญ์ด ๊ฐ๋ฅํ๋ค.
๐ ๋จ์
- ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ค.
- ํ์ด์ง ์ ํ์์ด ์๋ฒ์ ํต์ ์ ํ๊ธฐ ๋๋ฌธ์, ๋ณด์์์ ๋ฌธ์ ๊ฐ ์์ ์ ์๋ค.
- ๋ฌด๋ถ๋ณํ๊ฒ ์ฌ์ฉํ๋ฉด ์ญ์ผ๋ก ์๋ฒ์ ๋ถํ๊ฐ ๋์ด๋ ์ ์๋ค.
- ๋์ผ ์ถ์ฒ ์ ์ฑ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค.
์ฐธ๊ณ
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/ajax.md