๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
IT

AJAX๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

by yunamom 2022. 3. 22.
๋ฐ˜์‘ํ˜•

โœจ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์˜ ์ง„ํ–‰๊ณผ์ •

  1. XMLHttpRequest Object๋ฅผ ๋งŒ๋“ ๋‹ค.
    • request๋ฅผ ๋ณด๋‚ผ ์ค€๋น„๋ฅผ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์‹œํ‚ค๋Š” ๊ณผ์ •
    • ์ด๊ฒƒ์„ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ method๋ฅผ ๊ฐ–์ถ˜ object๊ฐ€ ํ•„์š”ํ•จ
  2. callback ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ ๋‹ค.
    • ์„œ๋ฒ„์—์„œ response๊ฐ€ ์™”์„ ๋•Œ ์‹คํ–‰์‹œํ‚ค๋Š” ํ•จ์ˆ˜
    • HTML ํŽ˜์ด์ง€๋ฅผ ์—…๋ฐ์ดํŠธ ํ•จ
  3. Open a request
    • ์„œ๋ฒ„์—์„œ response๊ฐ€ ์™”์„ ๋•Œ ์‹คํ–‰์‹œํ‚ค๋Š” ํ•จ์ˆ˜
    • HTML ํŽ˜์ด์ง€๋ฅผ ์—…๋ฐ์ดํŠธ ํ•จ
  4. send the request

 

300x250

์ฝ”๋“œ