24.10.17(AJAX)

AJAX(Asynchronous JavaScript and XML)

• 웹 페이지에서 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술
• 페이지를 새로 고치지 않고도 동적으로 콘텐츠 업데이트 가능

AJAX 코드 설명

• AJAX 요청을 보내고 응답을 처리하는 코드

$.ajax({
	type : "post", // 전송방식
	url : "<%=request.getContextPath()%>/member/memberIdCheck.aws",
	dataType : "json", // json타입 : 문서에서 {"키값1" : "value값1", "키값2" : "value값2", ...}
	data : {"memberId" : memberId},
	success : function(result) { // 결과가 넘어와서 성공했을 때 받는 영역
		/ alert("전송성공 테스트 !");
		/* alert("길이는 : " + result.length); */
		alert("cnt값은 : " + result.cnt);
		if (result.cnt == 0) {
			alert("사용할 수 있는 아이디입니다.");
			$("#btn2").val("Y");
		} else {
			alert("사용할 수 없는 아이디입니다.");
			$("#memberId").val(""); // 입력한 아이디 지우기
		}
	},
	error : function() { // 결과가 실패했을 때 받는 영역
		alert("전송실패 테스트ㅜ");
	}
});

상세 설명

• $.ajax({ ... })
  • jQuery의 AJAX 메서드로 서버에 요청을 보낼 때 사용
  • 이 안에 여러 옵션 정의
• type : "post"
  • 요청 방식 정의
  • 데이터를 서버에 전송할 때는 일반적으로 POST 방식 사용
• url : "<%=request.getContextPath()%>/member/memberIdCheck.aws"
  • 요청을 보낼 URL 지정
  • <%=request.getContextPath()%>
    • JSP에서 사용되는 표현
    • 현재 웹 어플리케이션의 콘텍스터 경로를 동적으로 가져옴
    • 다른 환경에서도 유연하게 URL사용 가능
  • member/memberIdCheck.aws
    • 아이디 중복 체크를 처리하는 서버 측의 URL
• dataType : "json"
  • 서버로부터 응답받을 데이터의 형식 지정
  • JSON 형식으로 응답받도록 설정
• data : {"memberId" : memberId}
  • 서버에 전송할 데이터 정의
  • 사용자가 입력한 아이디를 memberId라는 키로 서버에 전송
• success: function(result) { ... }
  • AJAX 요청이 성공적으로 완료되었을 때 실행되는 콜백 함수
  • 서버로부터 받은 응답을 result 매개변수로 받음
  • alert("cnt값은: " + result.cnt);
    • 받은 cnt값을 알림으로 표시
  • if (result.cnt == 0) {...}
    • cnt가 0이면 "사용할 수 있는 아이디"라는 메시지 표시
    • 버튼의 값을 "Y"로 변경
  • else {...}
    • cnt가 0이 아닐 경우 사용 불가 메시지를 표시
    • 입력 필드 지움
• error: function(xhr, status, error) { ... }
  • 요청이 실패했을 때 실행되는 콜백 함수
  • 에러 정보를 출력하여 문제를 확인할 수 있도록 함