[AJAX] 사용 방식

동기 방식 : 클라이언트(응답 대기) - 서버 (처리) (대부분의 처리 방식)

비동기 방식 : 응답 대기하는 시간이 없음 (실시간 검색어, 아이디 중복 검사, 댓글 등)
전체페이지가 아니라 일부분 업데이트

제이쿼리 방식 AJAX
$.ajax({url : "전송 하려는 url(필수)"});

ex)

💡경로를 많이 빠져나가야할 때 contextPath 사용해서 webapp으로 바로 도달하기

<script src="${ contextPath }/js/jquery"></script>

아이디 중복 검사

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int empNo= Integer.parseInt(request.getParameter("empNo"));
		
		int result = new EmployeeService().checkEmpNo(empNo);
		PrintWriter out = response.getWriter();
		out.println(result);
	}

 document.getElementById('id').addEventListener('focusout',function(){
          const value = this.value;
          if(value.trim()==''){
             
          }else{
             $.ajax({
                url : '${contextPath}/checkEmpNo.me' , 
                data: {empNo:value},
                success: (data) =>{
                	//console.log(data, typeof data);
                	
                }, 
                error : data => console.log(data); //인자가 없고 한 줄이라 괄호 지워줌
                }
             })
          }  
    });
      

전체 사원 조회

1. 테이블 내에서 div 뽑아오기

  const table = document.getElementById('empList');
      const stateButtons = table.querySelectorAll('div');
   
   }

2. 현재 바꾸고 싶은 것 : 관리자여부
   값 세개 필요 : update를 통해 변경 (사번, 관리자여부, 활동여부 y인지 n인지)

3. y/n이 관리자인지 활동여부 인지 확인

  const table = document.getElementById('empList');
      const stateButtons = table.querySelectorAll('div');
   		for(const button of stateButtons){
   			button.addEventListener('click', function(){
   				if(this.className == 'unselectState'){
   					const myTd = this.parentElement; //내가 선택한 div를 담고 있는 td
   					const myTr = myTd.parentElement; 
   					const myTrChildren = myTr.children; //그 행에 들어간 모든 td들을 갖고잇음 
   					const empNo = myTrChildren[0].innerText;
   					
   					let clickColumnIndex;
   					for(const index in myTrChildren){
   						if(myTd == myTrChildren[index]){ 
   							clickColumnIndex = index;	//인덱스를 변수에 집어넣음 
   						}
   					}
   					console.log(clickColumnIndex);
   				}
   				
   			})
   		}
   }