elice/study

[CS] AJAX

๊ฑด๋ง๋”” 2022. 2. 28. 22:13

1. AJAX๋ž€?

  • Asynchronous Javascript And XML
  • ๋น„๋™๊ธฐ์ ์œผ๋กœ JS๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€์„œ, ๋™์ ์œผ๋กœ DOM์„ ๊ฐฑ์‹  ๋ฐ ์กฐ์ž‘ํ•˜๋Š” ์›น ๊ฐœ๋ฐœ ๊ธฐ๋ฒ•

 

2. ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€?

์ถœ์ฒ˜: https://github.com/baeharam/Must-Know-About-Frontend/blob/main/images/javascript/ajax.png

์‚ฌ์šฉ์ž๊ฐ€ 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

 

๋Œ“๊ธ€์ˆ˜0