Ajax(Asynchronous JavaScript and XML)

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋ฒ„์—๊ฒŒ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ , ์„œ๋ฒ„๊ฐ€ ์‘๋‹ตํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์„œ ์›นํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์ด๋‹ค.

    • XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค.

    XMLHttpRequest(XHR) ๊ฐ์ฒด๋Š” ์„œ๋ฒ„์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ „์ฒด ํŽ˜์ด์ง€์˜ ์ƒˆ๋กœ๊ณ ์นจ์—†์ด๋„ URL๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์›น ํŽ˜์ด์ง€๊ฐ€ ์‚ฌ์šฉ์ž๊ฐ€ ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š์œผ๋ฉด์„œ ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋ฅผ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค. XMLHttpRequest ๋Š” AJAX ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

    1. ๋ณ€๊ฒฝํ•  ๋ถ€๋ถ„์„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ „์†ก๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ํ†ต์‹ ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.

    2. ๋ณ€๊ฒฝํ•  ํ•„์š” ์—†๋Š” ๋ถ€๋ถ„์€ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜์ง€ ์•Š์•„ ํ™”๋ฉด ๊นœ๋นก์ž„ ํ˜„์ƒ์ด ์—†๋‹ค.

    3. ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ํ†ต์‹ ์ด ์ด๋ฃจ์–ด์ ธ ์„œ๋ฒ„์—๊ฒŒ ์š”์ฒญ์„ ๋ณด๋‚ธ ์ดํ›„ ๋ธ”๋กœ๊น…์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.

XMLHttpRequest

  • ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” Web API์ธ XMLHttpRequest ๊ฐ์ฒด๋Š” HTTP ์š”์ฒญ ์ „๊ณต๊ณผ ์‘๋‹ต ์ˆ˜์‹ ์„ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ๋ฉ”์„œ๋“œ์™€ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

    // XMLHttpRequest ๊ฐ์ฒด ์ƒ์„ฑ
    cosnt xhr = new XMLHttpRequest();

Last updated