โจAJAX (Asynchronous Javascript And XML)
AJAX๋, JavaScript์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ค ํ๋์ด๋ฉฐ ๋น๋๊ธฐ์ ์๋ฐ์คํฌ๋ฆฝํธ์ xml ์ ์ฝ์์ด๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ ๊ฐ์ง๊ณ ์๋ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์ฉํด์ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น์ง ์๊ณ ๋
ํ์ด์ง์ ์ผ๋ถ๋ง์ ์ํ ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๋ ๊ธฐ๋ฒ ์ด๋ฉฐ JavaScript๋ฅผ ์ฌ์ฉํ ๋น๋๊ธฐ ํต์ ,
ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ์ XML ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๊ธฐ์ ์ด๋ค.
์ฆ, ์ฝ๊ฒ ๋งํ์๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด์ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ ๊ฒ์ด๋ค.
์ข ๋ฅ๋ GET, POST, PUT, DELETE ๊ฐ ์๋ค.
โจAJAX๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋?
๋จ์ํ๊ฒ WEBํ๋ฉด์์ ๋ฌด์ธ๊ฐ ๋ถ๋ฅด๊ฑฐ๋ ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๊ณ ์ถ์ ๊ฒฝ์ฐ, ํ์ด์ง ์ ์ฒด๋ฅผ ์๋ก๊ณ ์นจํ์ง ์๊ธฐ ์ํด ์ฌ์ฉํ๋ค๊ณ ๋ณผ ์ ์๋ค
๊ธฐ๋ณธ์ ์ผ๋ก HTTP ํ๋กํ ์ฝ์ ํด๋ผ์ด์ธํธ์ชฝ์์ Request๋ฅผ ๋ณด๋ด๊ณ ์๋ฒ์ชฝ์์ Response๋ฅผ ๋ฐ์ผ๋ฉด ์ด์ด์ก๋ ์ฐ๊ฒฐ์ด ๋๊ธฐ๊ฒ ๋์ด์๋ค.
๊ทธ๋์ ํ๋ฉด์ ๋ด์ฉ์ ๊ฐฑ์ ํ๊ธฐ ์ํด์๋ ๋ค์ request๋ฅผ ํ๊ณ response๋ฅผ ํ๋ฉฐ ํ์ด์ง ์ ์ฒด๋ฅผ ๊ฐฑ์ ํ๊ฒ ๋๋ค.
ํ์ง๋ง ์ด๋ ๊ฒ ํ ๊ฒฝ์ฐ, ์์ฒญ๋ ์์๋ญ๋น์ ์๊ฐ๋ญ๋น๋ฅผ ์ด๋ํ๊ณ ๋ง ๊ฒ์ด๋ค.
AJAX๋ HTML ํ์ด์ง ์ ์ฒด๊ฐ ์๋ ์ผ๋ถ๋ถ๋ง ๊ฐฑ์ ํ ์ ์๋๋ก XMLHttpRequest๊ฐ์ฒด๋ฅผ ํตํด ์๋ฒ์ requestํ๋ค.
์ด ๊ฒฝ์ฐ, JSON์ด๋ XMLํํ๋ก ํ์ํ ๋ฐ์ดํฐ๋ง ๋ฐ์ ๊ฐฑ์ ํ๊ธฐ ๋๋ฌธ์ ๊ทธ๋งํผ์ ์์๊ณผ ์๊ฐ์ ์๋ ์ ์๋ค.
โจAJAX์ ์ฅ๋จ์
1. AJAX์ ์ฅ์
- ์นํ์ด์ง์ ์๋ํฅ์
- ์๋ฒ์ ์ฒ๋ฆฌ๊ฐ ์๋ฃ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค.
- ์๋ฒ์์ Data๋ง ์ ์กํ๋ฉด ๋๋ฏ๋ก ์ ์ฒด์ ์ธ ์ฝ๋ฉ์ ์์ด ์ค์ด๋ ๋ค.
- ๊ธฐ์กด ์น์์๋ ๋ถ๊ฐ๋ฅํ๋ ๋ค์ํ UI๋ฅผ ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค. ( Flickr์ ๊ฒฝ์ฐ, ์ฌ์ง์ ์ ๋ชฉ์ด๋ ํ๊ทธ๋ฅผ ํ์ด์ง์ ๋ฆฌ๋ก๋ ์์ด ์์ ํ ์ ์๋ค.)
2. AJAX์ ๋จ์
- ํ์คํ ๋ฆฌ ๊ด๋ฆฌ๊ฐ ๋์ง ์๋๋ค.
- ํ์ด์ง ์ด๋์๋ ํต์ ์ผ๋ก ์ธํ ๋ณด์์์ ๋ฌธ์ ๊ฐ ์๋ค.
- ์ฐ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ฉด ์๋ฒ ๋ถํ๊ฐ ์ฆ๊ฐํ ์ ์๋ค.
- XMLHttpRequest๋ฅผ ํตํด ํต์ ํ๋ ๊ฒฝ์ฐ, ์ฌ์ฉ์์๊ฒ ์๋ฌด๋ฐ ์งํ ์ ๋ณด๊ฐ ์ฃผ์ด์ง์ง ์๋๋ค. (์์ฒญ์ด ์๋ฃ๋์ง ์์๋๋ฐ ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ๋ ๋๊ฑฐ๋ ์ค์๋ํ ์ฐ๋ ค๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค.)
- AJAX๋ฅผ ์ธ ์ ์๋ ๋ธ๋ผ์ฐ์ ์ ๋ํ ๋ฌธ์ ์ด์๊ฐ ์๋ค.
- HTTP ํด๋ผ์ด์ธํธ์ ๊ธฐ๋ฅ์ด ํ์ ๋์ด ์๋ค.
- ์ง์ํ๋ Charset์ด ํ์ ๋์ด ์๋ค.
- Script๋ก ์์ฑ๋๋ฏ๋ก ๋๋ฒ๊น ์ด ์ฉ์ดํ์ง ์๋ค.
- ๋์ผ-์ถ์ฒ ์ ์ฑ ์ผ๋ก ์ธํ์ฌ ๋ค๋ฅธ ๋๋ฉ์ธ๊ณผ๋ ํต์ ์ด ๋ถ๊ฐ๋ฅํ๋ค. (Cross-Domain๋ฌธ์ )
โจAJAX์ ์งํ๊ณผ์
- XMLHttpRequest Object๋ฅผ ๋ง๋ ๋ค.
- request๋ฅผ ๋ณด๋ผ ์ค๋น๋ฅผ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ํค๋ ๊ณผ์
- ์ด๊ฒ์ ์ํด์ ํ์ํ method๋ฅผ ๊ฐ์ถ object๊ฐ ํ์ํจ
- callback ํจ์๋ฅผ ๋ง๋ ๋ค.
- ์๋ฒ์์ response๊ฐ ์์ ๋ ์คํ์ํค๋ ํจ์
- HTML ํ์ด์ง๋ฅผ ์ ๋ฐ์ดํธ ํจ
- Open a request
- ์๋ฒ์์ response๊ฐ ์์ ๋ ์คํ์ํค๋ ํจ์
- HTML ํ์ด์ง๋ฅผ ์ ๋ฐ์ดํธ ํจ
- send the request
'IT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
DAO, DTO, VO, CRUD ๋ ๋ฌด์์ธ๊ฐ? (0) | 2022.03.28 |
---|---|
์ ์ ์น๊ฐ๋ฐ์ ๊ธฐ์ ์ง๋ฌธ/๋ต ๋ชจ์ (0) | 2022.03.24 |
๋๊ธฐ ๋ฐฉ์๊ณผ ๋น๋๊ธฐ ๋ฐฉ์์ ์ฐจ์ด์ (0) | 2022.03.22 |
SSL ์ธ์ฆ์๋ ๋ฌด์์ธ๊ฐ์? (0) | 2022.03.19 |
arm ์ด๋ ๋ฌด์์ธ๊ฐ? - M1 ์ ํ์๋ฐฐ๊ฒฝ (0) | 2022.03.17 |