๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive ๋์์ 43์ฅ Ajax๋ฅผ ์ ๋ฆฌํ์์ต๋๋ค.
Ajax๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์๊ฒ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ์ฌ ์นํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ๊ฐฑ์ ํ๋ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ ๋งํ๋ค. Ajax๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ Web API์ธ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ค.
JSON์ ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ HTTP ํต์ ์ ์ํ ํ ์คํธ ๋ฐ์ดํฐ ํฌ๋งท์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ์ข ์๋์ง ์์ ์ธ์ด ๋ ๋ฆฝํ ๋ฐ์ดํฐ ํฌ๋งท์ผ๋ก, ๋๋ถ๋ถ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ฌ์ฉํ ์ ์๋ค.
JSON.stringify
๋ฉ์๋๋ ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค.
JSON.parse
๋ฉ์๋๋ JSON ํฌ๋งท์ ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ HTTP ์์ฒญ์ ์ ์กํ๋ ค๋ฉด XMLHttpRequest
๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ค. XMLHttpRequest
๊ฐ์ฒด๋ HTTP ์์ฒญ ์ ์ก๊ณผ HTTP ์๋ต ์์ ์ ์ํ ๋ค์ํ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค.
const xhr = new XMLHttpRequest()
// XMLHttpRequest ๊ฐ์ฒด ์์ฑ
const xhr = new XMLHttpRequest()
// HTTP ์์ฒญ ์ด๊ธฐํ
xhr.open('GET', '/users')
// HTTP ์์ฒญ ํค๋ ์ค์
// ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ์ ์กํ ๋ฐ์ดํฐ์ MIME ํ์
์ง์ : json
xhr.setRequestHeader('content-type', 'application/json')
// HTTP ์์ฒญ ์ ์ก
xhr.send()
Ref
- ์ด์ ๋ชจ ์ , โ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Diveโ, ์ํค๋ถ์ค