[JSP] AJAX

📌 AJAX

Asynchronous Javascript And XML

• 하나의 전체 페이지 내부에서
  [필요한 데이터] 만 일부 페이지(영역) 에서 응답받는 방식
  ( 이것은 비동기방식 이라고 한다 )

• 일부 페이지(영역) 만 백그라운드 로 서버와 통신하여
  그 결과를 일부분에만 표시하는 방식

• 서버와 데이터를 주고 받을 때 XML 를 사용한다고 해서
  AJA'X' 라고 불린다.
  ( ❗ XML 의외에도 HTML, TXT , JSON 파일이 가능한데
  최근에는 JSON 파일 주로 사용해 데이터를 주고 받는다 )

❗ AJAX 장점

1. 웹 페이저 전체를 새로고침 하지 않아도 웹 페이지 일부분을 갱신할 수있다.

2. 웹 페이지가 로드 된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.

3. 다양한 UI 구현이 가능하다

❗ AJAX 단점

1. 페이지 이동이 없기에 히스토리 관리가 불가능하다.

2. 반복적인 데이터 요청이 있으면 느려지거나 작동이 멈춘다.

📌 동기 vs 비동기 방식

❗ 동기적 프로그래밍

• 프로그래밍 로직이 '한 방향' 으로 되어있으며
  다음 업무를 진행하기 위해서는 이전 업무 수행이 반드시 필요하다

• 일부 영역이라도 데이터 변화를 하기 위해서는
  전체 페이지를 새로고침하여 전체를 서버에 재요청 해야한다.

❗ 비동기적 프로그래밍

• 한 방향에 업무가 여러 갈래로 되어있으며
  이전 업무 수행이 없어도 특정 업무만 따로 수행시킬 수 있다.

• 일부 영역에 데이터 갱신을 하더라도 나머지 전체 영역은 멈추는 것이 아닌
  프로그램이 계속 돌아간다

📌 AJAX 예제

GET 방식으로 AJAX 요청보내기

	function send_GET(){
     let xhr = new XMLHttpRequest();
     xhr.open("GET", "requset_ajax.jsp?userid=apple&userpw=1234", true );
     xhr.send();
     xhr.onreadystatechange = function(){
     	if( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
        	document.getElementById("result").innerHTML = xhr.responseText;
   		 }
    }    

let xhr = new XMLHttpRequest();

new XMLHttpRequest();
웹 브라우저가 서버와 데이터를 교환할 때 ( AJAX 를 사용할 때 ) 사용하는 객체

	xhr.open("GET", "requset_ajax.jsp?userid=apple&userpw=1234", true );	

open( 전달방식 , "URL 주소 or 파일 주소 " , 동기여부 true = 비동기 , false = 동기 ) ;

• ❗ 2번째 파라미터 에서 .JSON* 파일을 통해 데이터를 교환한다 _

xhr.send();

작성한 AJAX 요청을 서버로 전달하는 메소드

     xhr.onreadystatechange = function(){
     	if( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
        	document.getElementById("result").innerHTML = xhr.responseText;
   		 }

xhr.onreadystatechange
서버로부터 응답하기 위한 메소드
xhr.readyStatus 와 xhr.status 가 정상일 때에만
<id="result"> 태그에 xhr.응답값을 반환하겠다는 의미이며
XMLHttpRequest 객체의 readyState프로퍼티 값이 변할 때마다
자동으로 호출되는 함수를 설정한다.

• status
  -> 서버의 문서상태를 나타낸다.(HTTP 상태코드)
  1. 1XX : 조건부 응답
  2. 2XX : 성공
  3. 3XX : 라다이렉션 완료
  4. 4XX : 요청 오류
  5. 5XX : 서버 오류

• readyState
  -> XMLHttpRequest 객체의 현재 상태를 나타낸다
  1. UNSENT(숫자 0) : XMLHttpRequest 객체가 생성됨
  2. OPENED(숫자 1) : open() 메서드가 성공적으로 실행됨
  3. HEADERS_RECEIVED(숫자 2) : 모든 요청에 대한 응답이 도착
  4. LOADING(숫자 3) : 요청안 데이터를 처리 중
  5. DONE(숫자 4) : 요청한 데이터의 처리가 완료되어 응답할
  준비가 완료됨.