📕 AJAX(Asynchronous Javascript And XML)

• 비동기식 자바스크립트 & XML

• 웹페이지의 갱신 없이 요청에 대한 응답과 함께 화면 상의 요소를 다룰 수 있는 자바스크립트 라이브러리 기술

• 데이터베이스 등의 작업 요청 시 요청된 응답이 돌아올 때까지 기다리지 않고 다른 작업을 수행하면서 요청에 대한 응답이 돌아오면 해당 응답 처리

• 주로, 아이디 및 패스워드 검증 등의 실시간 정보 조회 작업에 활용

< 기본 문법 >

$.ajax(); 또는 $.ajax({});

⭐ Ex

<script src="../js/jquery-3.6.3.js"></script>
<script type="text/javascript">
  $(function() {
	$("#btnLogin").on("click", function() {
	  $.ajax({
		type: "post",
		url: "test1_result.jsp",
		data: {
		  id: $("#id").val(),
          // id 선택자의 value 속성값을 id 파라미터로 저장
		  passwd: $("#passwd").val()
          // passwd 선택자의 value 속성값을 passwd 파라미터로 저장
		},
		dataType: "text",
		success: function(response) {
		  $("#resultArea").html(response);
          // id 선택자 resultArea 영역에 응답 데이터 출력하기
		},
		error: function(xhr, textStatus, errorThrown) {
		  $("#resultArea").html("xhr = " + xhr + "<br>textStatus = " + textStatus + "<br>errorThrown = " + errorThrown);
		}
 	  });
	});
  });
</script>

• type : AJAX로 요청 시 HTTP 요청 방식 지정

  -> GET or POST

  
  

• url : AJAX로 요청할 요청 주소(URL)

• data : 전송할 데이터(파라미터) 지정

  -> 일반 파라미터일 경우 중괄호로 묶음

  -> 폼 데이터를 가져와서 파라미터로 전송하는 경우 파라미터명: 데이터 형식으로 지정

• dataType : 응답 데이터에 대한 타입 지정

  -> 일반 데이터는 text이며 HTML 코드도 포함 가능

  -> 자바스크립트 포함되면 html 사용

• success: function(response){} : 요청에 대한 처리 성공 시 처리할 함수 정의

  -> 익명 함수 파라미터로 응답 데이터가 전달됨(처리 페이지의 응답 결과)
  
  
  

• error : 요청에 대한 처리 실패 시 실행되는 이벤트