AJAX (2)

disdos0928·2022년 5월 21일
0

JS

목록 보기
12/12
post-thumbnail

AJAX를 이요한 서버 비동기 통신.

수업중에 진행 중인 Community project의 index중
Content 1 영역에 정보를 비동기로 통신하는 코드를 작성했다.

회원의 이메일을 입력받아 정보를 출력하는 DIV박스

1. jsp 페이지 상에서 수행

<h3>회원 정보 조회(AJAX)</h3>

<p>이메일을 입력받아 일치하는 회원 정보 출력</p>
이메일 : <input type="text" name="email" id="in1">
<button id="select1">조회</button>

<div id="result1" style="height:150px;"></div>
<hr>
  • display : inline-block으로 세팅되있기 떄문에 입력 상자 바로 옆에 조회 버튼이 있다.

js에서 jquery-ajax를 이용해 WebServlet과 비동기 통신 수행.

document.getElementById("select1").addEventListener("click",function(){
  const input = document.getElementById("in1");
  const div =document.getElementById("result1");

  //ajax 코드 작성
  $.ajax({
    url:"member/selectOne", 
    //ajax 필수 입력 속성 (url) .서블릿으로 요청받을 주소
    data:{"memberEmail":input.value},
    //서블릿으로 전달할 데이터가 있을때 작성
    // JS객체형태로 전달 {KEY:VALUE}
    type:"POST",
    //body부에 data가 포함되서 전달되는 방식 이건 뭐...당연히 할지
    

    //json data 타입 지정
    dataType:"JSON", //dataType : 응답 데이터 형식을 지정
	//이거 답변 받을 떄 JSON이라고 인지 시켜주는거라
    //JSON.parse를 사용하지 않아도 괜찮다. 개꿀
    
    
    success:function(member){ 
      // 수행 성공 했을 경우에 실행되는 함수
      console.log(member);  
      //테스트할려고 작성한 log
      //js 객체 형태 모양인 문자열
      // dataType: "JSON" 추가 후 -> JS객체


      //JSON.parse(문자열) : 문자열->JS 객체로 변환
      //console.log(JSON.parse(member));  
      /* console.log(JSON.parse(member).memberNickName);   */


      div.innerHTML=""; 
      //검색이 수행될 때 div박스를 일단 깔끔하게 지우고 시작한다.

      if(member != null){ //회원정보가 있을 경우

        // 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.memberTell;

        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{ //회원 정보가 존재하지 않을때 

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

        h4.innerText="일치하는 회원이 없다";

        h4.style.color= "red";

        div.append(h4);
        //div에 append(덧붙히기.)

      }
    },
    error:function(request,status,error){
/*위에서 전달받은 매개값들은 Servlet에서 전달받은 매개가 아니다 
톰캣에서 생성시킨 request 객체가 아니라 
브라우저 자체에서 반환 받는다는 것 같다.
나중에 http프로토콜에 관해서 더 공부할 때 찾아봐야겟다.
   */
      
      console.log("ajax 에러 발생");
      console.log("상태코드 : "+request.status); 
      //에러 번호 404,405,500
      /*console.log(request.responseText);/
      /에러 메세지
      console.log(error); //에러 객체 출력 */
    }
  })


})

비동기동신으로 요청받은 Servlet 파일

//webServlet 어노테이션 선언 (요청받은 주소 (상대주소))
@WebServlet("/member/selectOne")
public class SelectOneServlet extends HttpServlet{

//나는 예외처리를 Exception으로 그냥 깡으로던졌는데 자동완성이 알아서 Servlet으로 처리된것 같다.
//ajax통신에서 요청방식을 Post방식으로 요청한다

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  
  //ajax에서 전달한 DATA 저장할때 파라미터은 JS객체 방식 선언할떄 KEY 이름으로 하면 된다.
	String memberEmail = req.getParameter("memberEmail");
  
  	try {
    //JDBC 수행을 위해 사용될 메서드 호출 객체와 
    //JDBC 수행후 값을 전달 코드 
      MemberService service = new MemberService();
      Member member = service.selectOne(memberEmail); 

	/*Google이 제공하는 JS 객체 변환 지원 메서드 기능이 아주 미쳤다	
    GSON라이브러리를 추가해 사용해야 한다
    JSON은 JS객체형 기술 방식이지만 GSON은 JSON객체 변환 라이브러리다.
    거의 모든 문야의 자료형을 변환해준댄다.
    컬렉션해주는게 개꿀인듯.
    */
    
      // 작성 방식.
      // new Gson().toJson(객채,응답스트립);
      //-> 매개변수 위치에 작성된 객체를 JSON 형태로 변환후 스트림을 통해서 출력한다.
      new Gson().toJson(member,resp.getWriter());
 
   }catch(Exception e) {
          e.printStackTrace();
   	 }
   }
}

실시간 비동기통신.

JSP에서 테이블 구성

<h3>회원 목록 조회</h3>
<p>일정 시간 마다 비동기로 회원목록(회원번호,이메일,닉네임) 조회 </p>

<table border="1">
  <thead>
  <tr>
  <th>회원 번호</th>
  <th>회원 이메일</th>
  <th>회원 닉네임</th>
  </tr>
  </thead>
  <tbody id="memberList">
  	//내용 append 될 공간
  </tbody>
</table>

js에서 특정 동작없이 수행되는 함수(interval)

//즉시 실행 함수  (함수(){})();
//속도 빠름 , 변수명 중복 해결등의 문제 개꿀
(function(){

    selectAll();
  	//실행시 바로 한번 호출
    setInterval(selectAll,10000); 
  	//수행후 10초후 첫 함수 호출 후 10초 지연
  	//10초 == 10000 . 1초가 1000

//setInterval()은 
//지연 - > 수행 -> 지연 - > 수행의 반복이다 
//지연 부터 시작한다는게 중요
  
})();

호출되는 ajax수행 함수.

function selectAll(){
    //Ajax 코드 작성
    
    $.ajax({
        url:"member/selectAll",
        dataType:"JSON", //응답 데이터 형식을 지정해 자동으로 JS 객체로 변환
        success:function(list){
            //list ==JS 객체 배열
            
            //#1 mberList 내용 전부 삭제
            const memberList = document.getElementById("memberList")
            memberList.innerHTML="";

            //#2 list를  for문으로 이용해 반복 접근
            for(let i of list){
                // i 는 회원 한명의 정보가 담긴 JS 객체
                //#3 tr 요소 생성
                const tr = document.createElement("tr");
                //#4 td생성
                const td1 = document.createElement("td");
                td1.innerText=i.memberNo;
                const td2 = document.createElement("td");
                td2.innerText=i.memberEmail;
                const td3 = document.createElement("td");
                td3.innerText=i.memberNickName;
                
                //#5 tr에 추가
                tr.append(td1,td2,td3);

                memberList.append(tr);
            }

        },
        erroe:function(){
            console.log("에러발생");
        }
    })
}

servlet 파일에서 요청 응답

@WebServlet("/member/selectAll")
public class SelectAll extends HttpServlet{
	
    //그냥 자기 알아서 servlet이랑 입출력 예외처리로 수정하는거같다.
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		try {
			MemberService service = new MemberService();
			
		//리스트<Member>객체로 생성후 JDBC 
		List<Member> memberList = service.selectAll(); 
		
        //GSON을 이용해 JS객체로 자동 변환해서 파일 전달.
        new Gson().toJson(memberList,resp.getWriter());
			
		}catch(Exception e) {
			e.printStackTrace();
		}
		
	}
}

AJAX는 JS에서 화면 그리는게 귀찮을거같다 .
AJAX 통신은 JS 객체 / GSON을 까먹지 말자.

0개의 댓글