Ajax/ JSON/ GSON

Ajax

1) Ajax란

• Asynchronous JavaScript and XML의 약자
• JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식
• 데이터 형식은 XML 뿐만 아닌 TEXT, HTML, JSON, CSV 등 다양한 형식 사용 가능

<참고> main.js

console.log("main.js loaded.");



//회원 정보 조회 비동기 통신(AJAX)
document.getElementById("select1").addEventListener("click", function(){

    const input = document.getElementById("in1");
    const div = document.getElementById("result1");

    //AJAX 코드 작성(JQuery 방식) -> JQuery 라이브러리가 추가 되어있는지 확인!
    $.ajax({

        url : "member/selectOne",
        data: {"memberEmail": input.value },
        type: "POST", 
        dataType:"JSON", // dataType: 응답데이터 형식 지정
                        // -> JSON으로 지정 시 자동으로 JS객체로 변환
        success: function(member){
			console.log(member);
			
			
				if(member != null){ // 회원 정보 존재 O

                // 2) ul 요소 생성
                const ul = document.createElement("ul");

                // 3) li 요소 생성 * 5 + 내용 추가
                const li1 = document.createElement("li");
                li1.innerText = "이메일 : " + member.memberEmail;

                const li2 = document.createElement("li");
                li2.innerText = "닉네임 : " + member.memberNickname;

                const li3 = document.createElement("li");
                li3.innerText = "전화번호 : " + member.memberTel;

                const li4 = document.createElement("li");
                li4.innerText = "주소 : " + member.memberAddress;

                const li5 = document.createElement("li");
                li5.innerText = "가입일 : " + member.enrollDate;

                // 4) ul에 li를 순서대로 추가
                ul.append(li1, li2, li3, li4, li5);

                // 5) div에 ul 추가
                div.append(ul);

            } else { // 회원 정보 존재 X

                // 1) h4 요소 생성
                const h4 = document.createElement("h4");

                // 2) 내용 추가
                h4.innerText = "일치하는 회원이 없습니다";

                // 3) 색 추가
                h4.style.color = "red";

                // 4) div에 추가
                div.append(h4);
            }

            
        },
        error: function(request, status, error){
			console.log("ajax 에러발생");
			console.log("상태코드: " + request.status); // 404 505
 
        }

    })
});

JSON

1) JSON란?

• JavaScript Object Notation(자바스크림트 객체 표현법)

• 간단한 포맷

  • 괄호 {} 내에 key: value 쌍으로 구성 --> {"key" : value}
  • key --> 반드시 문자열 사용(쌍 따옴표(" ") 표기 필수)
  • value --> String, Number, Boolean, Array, Object, null 데이터 저장 가능 (단, char 데이터는 저장 불가)

• 객체{} 또는 열[] 데이터를 효율적으로 표시 가능

GSON

1) GSON란?

• Google JSON의 약어

• Google에서 만든 오픈 라이브러리로 JSON파일을 쉽게 읽고, 만들 수 있는 메소드 제공

• toJSON(Object, Appendable)

  • 매개변수 Object를 JSON으로 변환하여 Appendable에 연결된 출력스트림으로 출력하는 메소드
  • 기존 JSON방식으로 변환하기 번거로웠던 List, Map 객체를 별도의 방법이 아닌 toJson()메소드 하나로 쉽게 JSON으로 변환 가능
  • List, Map 뿐만 아닌 모든 Object 변환 가능.