java

AJAX

dev_summer 2020. 11. 12. 11:39

 

1. AJAX๋ฌธ๋ฒ• ์‚ฌ์šฉ ์‹œ ์œ ์˜ํ•  ์ 

1) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธ์™€ JSON์˜ ์˜ค๋ธŒ์ ํŠธ๋Š” ๋‹ค๋ฅด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธ๋Š” ์ ์œผ๋กœ ์ฐพ์„์ˆ˜ ์žˆ๋‹ค.

 

 

<!DOCTYPE html>
<html>
  <body>
    <div id="demo">
      <h2>The XMLHttpRequest Object</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
      <a href="ajax_info.txt">ํŒŒ์ผ์ด๋™</a>
    </div>

    <script>
      var user = {
        name: "seoha",
        age: 20
      };
      console.log(user); // ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธ์˜ ๋ชจ์–‘

      console.log(JSON.stringify(user)); // ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ JSONํ˜•ํƒœ๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ์ถœ๋ ฅํ•˜๋Š” ํ•จ์ˆ˜
    </script>
  </body>
</html>

 

 

๊ฒฐ๊ณผ๊ฐ’

2)๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ผ๋•Œ์—๋Š” contentType์„ ์ •ํ™•ํ•˜๊ฒŒ ๋ณด๋‚ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

contentType:"application/json", // ์ œ์ด์Šจ ํ˜•ํƒœ๋กœ ๋ณด๋‚ด๊ฒ ๋‹จ,ใ„ด MIME ํƒ€์ž… data : JSON.stringify(user) // javaseript์™€ json์˜ ์˜ค๋ธŒ์ ํŠธ๋Š” ๋‹ค๋ฅด๊ธฐ๋•Œ๋ฌธ์— JSONํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ // ๋ณด๋‚ด์ค€๋‹ค๋Š”๊ฒƒ์„ ๊ผญ ๋ช…์‹œ ํ•˜์—ฌ์•ผ ํ•œ๋‹ค.

3)form, QueryString์€ getparmeter๋กœ ๋ฐ›๊ณ  ์ด์™ธ์˜ ๋ฐ์ดํ„ฐ๋Š” ๋ชจ๋‘ ๋ฒ„ํผ๋กœ ๋ฐ›๋Š”๋‹ค.

 

 

 

 

 

* ํ†ต์ผ์„ฑ์„ ์œ„ํ•ด ๋ณดํ†ต JSON์œผ๋กœ ์ฃผ๊ณ  ๋ฐ›๋Š”๋‹ค.

์‚ฌ์šฉํ• ๋•Œ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ๋•Œ๋ฌธ์— ์†ก์ˆ˜์‹ ์‹œ ๋ฐ์ดํ„ฐํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.

 

JSON.parse(์ œ์ด์Šจ๋ฐ์ดํ„ฐ); - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธํ˜•์‹์œผ๋กœ ๋ณ€๊ฒฝํ•ด์คŒ , ์ˆ˜์‹  ์‹œ ์‚ฌ์šฉํ•œ๋‹ค.

JSON.Stringify(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ค๋ธŒ์ ํŠธ); - ์ž์ œ์ด์Šจ๋ฐ์ดํ„ฐ ์˜ค๋ธŒ์ ์Šค ํ˜•์‹์œผ๋กœ ๋ณ€๊ฒฝํ•ด์คŒ , ์†ก์‹  ์‹œ ์‚ฌ์šฉํ•œ๋‹ค.

 

๋ฐ›์•„์„œ ์ž๋ฐ” ์˜ค๋ธŒ์ ํŠธ๋กœ ๋ณ€๊ฒฝ์„ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ง€์„ ,

์ง€์„ ๊ณผ ๊ฐ™์€ ์—ญํ• ์„ ํ•˜๋Š” ์ž๋ฐ” ํ•จ์ˆ˜

- toJson() == JSON.Stringify ; fromJson() = JSON.parse;

 

 

dto : ๋ฐ์ดํ„ฐ ํŠธ๋žœ์Šคํฌ ์˜ค๋ธŒ์ ํŠธ, ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ธฐ์œ„ํ•œ ๋ชจ๋ธ๋ง

dao :

model : ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ํ†ต์‹ ํ•˜๊ธฐ ์œ„ํ•œ ๋ชจ๋ธ