Spring/Spring icia 49일차

IntelliJ AJAX 코드리뷰 , AJAX란 ?

swkn 2023. 5. 2. 17:12

1. AJAX ( Asynchronous JavaScript and XML ) 이란?

AJAX를 사용하려면 일단 라이브러리에 JQuery를 추가해야 한다.

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

본인은 3.6.1 버전을 사용하였다.

 

웹페이지에서 비동기적으로 서버와 데이터를 주고받는 기술이다.

기본적으로 JavaScript와 XML을 이용하여 데이터를 전송하며 최근에는 JSON , HTML 등 다양한 형식의 데이털르 지원하고 있다.

AJAX를 사용하면 전체 페이지를 다시 로딩하지 않고도 서버로부터 데이터를 가져와서 웹페이지의 일부분만 갱신하거나 ,

사용자 입력을 받아서 동적으로 서버와 상호작용할 수 있다.

이러한 기능은 사용자 경험을 향상하고 서버의 부하를 줄이는 등의 장점을 가지고 있다.

 

2. AJAX의 사용법

  1. XMLHttpRequest 객체를 생성해서 서버와 데이터를 주고받을 준비를 한다.
  2. XMLHttpRequest 객체를 사용해서 서버와 데이터를 주고받는다.
    이때 전송할 데이터는 URL 매개변수나 POST 데이터등의 형태로 전송할 수 있다.
  3. 서버로부터 받은 데이터는 XMLHttpRequest 객체의 응답으로 처리되므로 이 데이터를 이용해서 화면을 갱신하거나 다른 작업을 수행할 수 있다.

 

3. AJAX의 사용 예제 코드

 

1. ajax_01

더보기 
<a href="/ajax-view01">ajax01</a>

Index 페이지에 ajax-view01 메서드를 호출하는 링크를 만든다.

a태그 링크
    @GetMapping("/ajax-view01")
    public String ajax_view01() {
        return "ajax_01";
    }

a 태그의 기본 속성은 Get 방식 method이기 때문에 @GetMapping을 사용

이 메서드가 호출되면 "ajax_01"이라는 이름의 jsp파일을 views폴더에서 찾아 실행한다.

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax01()">함수호출</button>
</body>
<script>
  const ajax01 = () => {
    $.ajax({
      type: "get",
      url: "/ajax_01",
      success: function (res) {
        console.log("요청성공",res);
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

body에 버튼을 하나 만들어서 누르면 ajax01의 js를 호출

ajax의 전송방식은 get , url은 "ajax_01" , 성공한다면 매개변수 res를 가지고 콘솔창에 출력

실패한다면 콘솔창에 요청실패를 출력하는 js이다.

    @GetMapping(value = "/ajax_01", produces = "application/text; charset=utf-8") // 한글깨짐 방지
    public @ResponseBody String ajax_01() {
        System.out.println("AjaxControlloer.ajax_01");
        return "리턴입니다";
    }

한글이 깨지기 때문에 produces로 추가를 했다.

return 값이 "리턴입니다"이기 때문에 res 값은 "리턴입니다"가 된다.

콘솔창에 잘 출력된다

 

2. ajax_02

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax02()">함수호출</button>
</body>
<script>
  const ajax02 = () => {
    $.ajax({
      type: "post",
      url: "/ajax_02",
      success: function (res) {
        console.log("요청성공",res);
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

버튼을 누르면 ajax02 함수를 호출해서 1번 방법과 다르게 전송방식을 post로 바꾼 것이다.

    @PostMapping("/ajax_02")
    public @ResponseBody String ajax_02() {
        return "hello i am return";
    }

성공했을 때 "요청성공", res이고 res는 "hello i am return 이므로

콘솔창에선 성공 시 요청성공 hello i am return이 출력될 것이다.

잘 출력된다

3. ajax_03

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax03()">함수호출</button>
</body>
<script>
  const ajax03 = () => {
    const var1 = "hello monday";
    $.ajax({
      type: "get",
      url: "/ajax_03",
      data: {
        param1: var1,
        param2: "hi hi"
      },
      success: function (res) {
        console.log("요청성공",res);
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

이번엔 버튼을 누르면 ajax03 함수를 호출하고

변수 var1에 "hello monday"를 재지정하고

ajax를 이용해 전송방식은 get , ajax_03으로 param1 , param2 값을 동시에 보내본다.

 

    @GetMapping("/ajax_03")
    public @ResponseBody String ajax_03(@RequestParam("param1") String param1, @RequestParam("param2") String param2) {
        System.out.println("param1 = " + param1 + ", param2 = " + param2);
        return "good";
    }

@RequestParam 어노테이션을 이용해서 값을 두 개 받고 , 성공 시 good을 리턴한다.

"요청성공", res이고 res가 "good"이니 요청성공 good이 출력될 것이다.

잘 출력된다.

4. ajax_04

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax04()">함수호출</button>
</body>
<script>
  const ajax04 = () => {
    const var1 = "hello monday";
    $.ajax({
      type: "post",
      url: "/ajax_04",
      data: {
        param1: var1,
        param2: "hi hi",
        qqq: "abcdefg"
      },
      success: function (res) {
        console.log("요청성공",res);
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

버튼하나를 만들고 누르면 ajax04를 호출한다.

전송방식은 post에 var1 변수하나 지정, ajax_04를 호출하고 param1 , param2 , qqq 값을 한 번에 보낸다.

    @PostMapping("/ajax_04")
    public @ResponseBody String ajax_04(@RequestParam("param1") String param1, @RequestParam("param2") String param2, @RequestParam("qqq") String qqq) {
        System.out.println("param1 = " + param1 + ", param2 = " + param2 + ", qqq = " + qqq);
        return "good";
    }

@RequestParam 어노테이션을 이용해 값을 모두 전달받고 good을 리턴한다.

성공 시 "요청성공", res이고 res는 good이므로 요청성공 good이 출력될 것이다.

성공으로 잘 출력

5. ajax_05

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax05()">함수호출</button>
</body>
<script>
    const ajax05 = () => {
        const memberEmail = "aa@aa.com";
        const memberPassword = "1234";
        const memberName = "member1";
        $.ajax({
            type: "get",
            url: "/ajax_05",
            data: {
                "memberEmail": memberEmail,
                "memberPassword": memberPassword,
                "memberName": memberName
            },
            success: function (res) {
                console.log("요청성공",res);
                console.log("요청성공",res.memberEmail);
                console.log("요청성공",res.memberPassword);
                console.log("요청성공",res.memberName);
            },
            error: function () {
                console.log("요청실패");
            }
        });
    }
</script>
</html>

버튼하나를 만들고 누르면 ajax05 함수를 호출한다.

memberEmail , memberPassword , memberName 값을 각각 지정하고

data에 묶어서 한 번에 보낸다.

    @GetMapping("/ajax_05")
    public @ResponseBody MemberDTO ajax_05(@ModelAttribute MemberDTO memberDTO) {
        System.out.println("memberDTO = " + memberDTO);
        return memberDTO;
    }

@ModelAttribute 어노테이션을 이용해 memberDTO의 값을 모두 담고 ( memberDTO의 같은 칼럼 이름이 있어야 한다 )

그 memberDTO를 리턴한다.

성공 시 각 요소마다 res.member ~ 로 값을 뽑아낼 수 있다.

즉 , 리턴이 memberDTO로 됐으니 res = memberDTO 인 것이다.

모두 잘 출력되었다

6. ajax_06

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax06()">함수호출</button>
</body>
<script>
  const ajax06 = () => {
    $.ajax({
      type: "get",
      url: "/ajax_06",
      success: function (res) {
        console.log("요청성공",res);
        for(let i in res) {
          console.log(res[i]);
          console.log(res[i].memberEmail);
        }
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

전송방식이 get , ajax_06으로 리스트를 받아올 것이므로 for문으로 준비를 한다.

    @GetMapping("/ajax_06")
    public @ResponseBody List<MemberDTO> ajax_06() {
        List<MemberDTO> memberDTOList = memberService.memberlist();
        return memberDTOList;
    }

 

memberDTO로 리스트를 만들어서 그 리스트를 리턴한다.

리턴 후 for문이 돌아가면서 그 테이블의 칼럼인 memberEmail만 따로 뽑아서 출력한다.

리스트로 잘 출력되었다

 

7. ajax_07

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax07()">함수호출</button>
</body>
<script>
    const ajax07 = () => {
        const member = {
            "memberEmail": "aaa@aaa.com",
            "memberPassword": "1q2w3e",
            "memberName": "회원1"
        }
        $.ajax({
            type: "post",
            url: "/ajax_07",
            // js object를 JSON으로 변환
            data: JSON.stringify(member),
            // 서버에게 보내는 데이터의 타입을 지정
            contentType: "application/json",
            success: function (res) {
                console.log("요청성공",res)
            },
            error: function () {
                console.log("요청실패");
            }
        });
    }
</script>
</html>

ajax도 값을 하나만 보낼 수 있는데 이렇게 묶음으로 보낼 때에는 약간의 추가가 필요하다.

각각 칼럼값을 member로 묶고 그 값을 post , ajax_07로 보낸다.

member를 JSON.stringify(변수)를 이용해서 타입(applicaition/json)을 지정한다.

    @PostMapping("/ajax_07")
    public @ResponseBody MemberDTO ajax07(@RequestBody MemberDTO memberDTO) {
        System.out.println("MemberDTO = " + memberDTO);
        return memberDTO;
    }

보낸 값을 그대로 memberDTO에 담아서 그대로 리턴해본다.

잘 출력되었다

8. ajax_08

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax08()">함수호출</button>
<div id="result-area">

</div>
</body>
<script>
  const ajax08 = () => {
    const member = {
      "memberEmail": "aaa@aaa.com",
      "memberPassword": "abcdef1234!#$%",
      "memberName": "회원1"
    }
    $.ajax({
      type: "post",
      url: "/ajax_08",
      // js object를 JSON으로 변환
      data: JSON.stringify(member),
      // 서버에게 보내는 데이터의 타입을 지정
      contentType: "application/json",
      success: function (res) {
        console.log("요청성공",res)
        const resultArea = document.getElementById("result-area");
        let result = "<table>";
        for ( let i in res ) {
          result +="<tr>";
          result +="<td>"+ res[i].memberEmail+"</td>";
          result +="<td>"+ res[i].memberName+"</td>";
          result +="</tr>";
        }
        result += "</table>";
        resultArea.innerHTML= result;
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

7번과 같은 방법으로 값을 member로 묶고 , post 방식의 ajax_08로 전송한다

member의 타입을 application/json으로 지정하고 

    @PostMapping("/ajax_08")
    public @ResponseBody List<MemberDTO> ajax08(@RequestBody MemberDTO memberDTO) {
        List<MemberDTO> memberDTOList = memberService.memberlist();
        memberDTOList.add(memberDTO);
        return memberDTOList;
    }

전송할 값을 Database로 보내서 그 리스트에 추가 ( add ) 해준다.

( Database에서 리스트를 가져오고 그 리스트에 추가했기 때문에 Database에는 들어가지 않는다 )

추가 후 그 리스트를 리턴한다.

리턴 후에 DOM을 이용해서 연산자를 이용해 테이블을 만들고 값을 뽑아내서 테이블 표를 제작한다.

콘솔창
css를 적용하지 않아서 구분선은 없다

 a , b , c , d는 기본 데이터고 ajax를 통해 aaa@aaa.com 회원 1이 리스트에 삽입되고 출력되었다.

9. ajax_09

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax09()">함수호출</button>
</body>
<script>
  const ajax09 = () => {
    const memberEmail = "aa@aa.com";
    const memberPassword = "1234";
    const memberName = "member1";
    $.ajax({
      type: "post",
      url: "/ajax_09",
      data: {
        "memberEmail": memberEmail,
        "memberPassword": memberPassword,
        "memberName": memberName
      },
      success: function (res) {
        console.log("요청성공",res);
        console.log("요청성공",res.memberEmail);
        console.log("요청성공",res.memberPassword);
        console.log("요청성공",res.memberName);
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

버튼하나를 만들고 ajax09를 호출한다.

memberEmail , memberPassword , memberName 값을 각각 지정하고 그 값을 모두 post 방식 ajax_09로 전송한다.

    @PostMapping("/ajax_09")
    public ResponseEntity ajax09(@ModelAttribute MemberDTO memberDTO) {
        System.out.println("memberDTO = " + memberDTO);
        return new ResponseEntity<>(memberDTO, HttpStatus.NOT_FOUND);
    }

ResponseEntity로 오류페이지를 컨트롤할 수 있다.

return new ResponseEntity <>(건넬 변수, HttpStatus. 나올 오류명)으로 사용한다.

본문에서는 보낸 값을 memberDTO로 다시 전송하고 404 not found로 설정했다.

404가 뜨게 했으므로 404가 출력된다

10. ajax_10

더보기 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/resources/css/style.css">
</head>
<body>
<%-- ajax(Asynchronous Javascript and XML) --%>
<button onclick="ajax10()">함수호출</button>
<div id="result-area">

</div>
</body>
<script>
  const ajax10 = () => {
    const member = {
      "memberEmail": "aaa@aaa.com",
      "memberPassword": "abcdef1234!#$%",
      "memberName": "회원1"
    }
    $.ajax({
      type: "post",
      url: "/ajax_10",
      // js object를 JSON으로 변환
      data: JSON.stringify(member),
      // 서버에게 보내는 데이터의 타입을 지정
      contentType: "application/json",
      success: function (res) {
        console.log("요청성공",res);
        // member에 담긴 이름 접근
        console.log("name",res.member.memberName);
        for ( let i in res.member.memberList) {
          console.log(res.memberList[i]);
        }
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>
</html>

버튼하나를 만들고 ajax10을 호출한다.

member에 memberEmail , memberPassword , memberName 값을 각각 지정하고 하나로 묶는다.

member를 application/json으로 타입을 지정한다.

    @PostMapping("/ajax_10")
    public ResponseEntity ajax10(@RequestBody MemberDTO memberDTO) {
        System.out.println("memberDTO = " + memberDTO);
        List<MemberDTO> memberDTOList = memberService.memberlist();
        Map<String,Object> resultMap = new HashMap<>();
        resultMap.put("member",memberDTO);
        resultMap.put("memberList",memberDTOList);
        return new ResponseEntity<>(resultMap, HttpStatus.OK);
    }

보낸 값을 memberDTO로 저장하고 Database에 리스트를 불러와서 memberDTOList에 저장하고

Map HashMap으로

key 값 = member Value값 = memberDTO 객체를 저장,

key 값 = memberList Value값 = memberDTOList 리스트를 저장한다.

그리고 Map을 리턴, HttpStatus는 OK를 설정해서 문제가 없도록 만든다.

큰 원(resultMap) 안에 두 개의 원(member, memberList)이 있고 member의 안에는 각각 칼럼값이 있고 , 

memberList에는 각각 memberDTO의 객체가 있을 것이다.

그러므로 res(resultMap). member.memberName이라는 문법이 사용된 것이다.

member에 담긴 칼럼값 memberName 에 접근하였다

 

 

저작자표시