🍀 AJAX(Async JavaScript and XML)

• 비동기 자바스크립트와 XML(요즘엔 JSON을 많이 사용)
• 해당 웹 페이지를 새로고침하지 않고 요청을 보내 응답 받은 내용을 현재 페이지에 반영할 수 있는 문법
• 웹페이지 전체를 다시 로딩하지 않고도 웹페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹페이지의 일부분에만 표시할 수 있다
• 주로 @RestController에 요청을 보내 데이터만 가져와서 활용하는 방식으로 사용한다
• 서버로부터 데이터를 응답받을 때 마다 이벤트가 발생하고 해당 이벤트를 처리하여 사용한다

---

🍀 XMLHttpRequest

• 자바스크립트의 비동기 통신 요청 객체(AJAX 요청 객체)
• 요청을 보내도 페이지가 새로고침되지 않는다
• 인스턴스를 생성한 후 해당 인스턴스에 여러 설정을 한 뒤 요청을 보낸다

• 웹 브라우저가 서버와 데이터를 교환할 때 사용한다(웹 브라우저가 백그라운드에서 서버와 계속 통신할 수 있는 이유)

---

🍀 서버에 요청(request)하기

🌼 open(method, url) 메소드

• 서버로 보낼 ajax 요청의 형식을 설정
• 첫 번째 파라미터에는 요청 방식을 설정(GET, POST 방식 중 하나 선택, 이외의 메서드(PUT, DELETE)는 xhttp로만 보낼 수 있다(form으로는 못보냄))
• 두 번째 파라미터에는 요청 URL을 설정한다

🌼 send() 메소드

• 작성된 ajax 요청을 서버로 전달한다
• 전달방식에 따라 인수를 가질수도, 안가질수도 있다(GET방식의 경우는 url로 파라미터를 넘겨주지만 POST인 경우에는 send()에 파라미터를 실어서 넘겨줘야 한다)

※ AJAX에서는 주로 GET방식 보다는 POST방식을 사용하여 요청을 전송한다

---

🍀 서버에 응답(response)하기

🌼 readyState

• XMLHttpRequest 객체의 현재 상태를 나타낸다
• 객체의 현재 상태에 따라 값이 변화한다

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

🌼 status

• 서버의 문서상태를 나타낸다(HTTP 상태코드)

   - 1xx : 조건부 응답
   - 2xx : 성공(서버에 문서가 존재함)
   - 3xx : 리다이렉션 완료
   - 4xx : 요청 오류 (404- 서버에 문서가 존재하지 않음)
   - 5xx : 서버 오류

🌼 onreadystatechange

• XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때 마다 호출되는 이벤트
• 서버에서 응답이 도착할 때까지 readyState프로퍼티 값의 변화에 따라 총 5번 호출된다
• 이 프로퍼티를 이용하면 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있다

• readyState 0 : XMLHttpRequest 객체가 생성되었을 때
• readyState 1 : open()이 성공했을 때 (send()하기 전)
• readyState 2 : 요청에 대한 응답이 도착했을 때
• readyState 3 : 응답에 대한 처리를 시작했을 때
• readyState 4 : 응답에 대한 처리가 모두 끝났을 때

🍀 서버로부터의 응답 데이터 확인하기

🌼 responseText

• 서버에 요청하여 응답받은 데이터를 문자열로 반환한다
• 서버로부터 텍스트파일을 응답받은 경우에는 responseText를 사용하여 받은 데이터를 문자열로 반환한 후 사용할 수 있다

🌼 responseXML

• 서버에 요청하여 응답받은 데이터를 XML DOM 객체로 반환한다
• 이방법은 잘 안쓴다 ,,, (귀찮음)

---

🍀 HttpHeader

• 클라이언트와 서버 사이의 통신시 서로에게 전달해야 할 여러 데이터를 포함한다
• AJAX를 사용하여 Http요청 헤더를 직접 설정하거나 Http응답 헤더의 내용을 직접 확인할 수도 있다
• 요청을 보내기 전에 setRequestHeader()메서드를 사용하여 Http요청 헤더를 작성할 수 있다

🌼 HttpRequestHeader(name, value)

• 요청을 보내기 전에 setRequestHeader()메서드를 사용하여 Http요청 헤더를 작성할 수 있다
• name은 Http요청 헤더에 포함하고자 하는 헤더의 이름이며, 값도 함께 전달한다

🌼 HttpResponseHeader

• 서버로 부터 전달받은 Http응답 헤더 내용을 메서드를 이용하여 확인할 수 있다
• getAllResponseHeaders() : Http응답 헤더의 모든 헤더를 문자열로 반환한다
• getResponseHeader() : Http응답 헤더 중 인수로 전달받은 이름과 일치하는 헤더의 값을 문자열로 반환한다

🌼 Content-Type

• 요청 또는 응답의 데이터가 어떤 형식인지 판단
• 자원의 형식(Media Type)을 명시하기 위해 헤더에 실려서 전송된다
• 기본값은 html문서의 MIME타입인 "text/html"이다

---

📚 참고자료

✅ Ajax_사용법