🧩Ajax(Asynchronous Javascript And XML) - 비동기적 통신
-
빠르게 동작하는 웹페이지를 만들기 위한 개발 기법이다.
-
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의
일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여
그 결과를 웹 페이지의 일부분에만 표시 할 수 있다. -
서버와 데이터를 주고 받을 수 있는데 대표적인 데이터는 JSON(주로사용),
XML, HTML, 텍스트 파일 등이 있다.
💊 비동기 방식이란?
- 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는
방식이며, ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이
아니라 그 프로그램은 계속 돌아간다는 의미를 내포한다.
💊 동기 VS 비동기방식
💊 장, 단점
- 장점
->웹 페이지를 전체를 다시 로딩하지 않고도 웹 페이지
일부분만 갱신할 수 있다.
-> 웹 페이지가 로드된 후에 서버로 데이터 요청을
보내거나 받을 수 있다.
-> 다양한 UI구현이 가능해진다. - 단점
-> 페이지 이동이 없기 때문에 히스토리 관리가 안된다.
-> 반복적인 데이터 요청이 있으면 느려지거나 작동하지
않게 된다.
💊 서버에 요청하기 - request
- XMLHttpRequest 객체
-> ajax의 가장 핵심적인 구성요소는 바로 XMLHttpRequest 객체이다.
이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용한다.
-> 웹 브라우저가 백그라운드에서 서버와 계속해서 통신할 수
있는 것은 바로 이 객체를 사용하기 때문이다.
let xhr = new XMLHttpRequest();
- open() 메서드
-> 서버로 보낼 ajax 요청의 형식을 설정한다.open(전달방식, url 주소, 동기여부); 전달방식 : GET, POST방식 중 하나 선택 URL 주소 : 요청을 처리할 서버의 파일 주소 전달 동기 여부 : 요청을 동기식으로 전달할지 비동기 식으로 전달할지 선택(비동기 : true(기본 값) , 동기 : false) - send()
-> 작성된 ajax요청을 서버로 전달
💊 서버로부터 응답(response)
-
readyState
-
status
-
onreadystatechange
-
status
-> 서버의 문서상태를 나타낸다.(HTTP 상태코드)
1. 1XX : 조건부 응답
2. 2XX : 성공
3. 3XX : 리다이렉션 완료
4. 4XX : 요청오류
5. 5XX : 서버 오류
-
readyState
-> XMLHTttpRequest 객체의 현재 상태를 나타낸다
1. UNSENT(숫자 0) : XMLHTttpRequest 객체가 생성됨
2. OPENED(숫자 1) : open() 메서드가 성공적으로 실행됨
3. HEADERS_RECEIVED(숫자 2) : 모든 요청에 대한 응답이 도착
4. LOADING(숫자 3) : 요청한 데이터를 처리 중
5. DONE(숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.
-
onreadystatechange
-> XMLHTttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다
자동으로 호출되는 함수를 설정한다.
🧩ajax_test.jsp
<body>
<h3>Ajax 요청 보내기 테스트</h3>
<input type="submit" value="GET 방식으로 요청보내기" onclick="send1();">
<input type="submit" value="POST 방식으로 요청보내기" onclick="send2();">
<p id="result"></p>
</body>
<script>
// GET방식으로 보내기
function send1(){
let xhr = new XMLHttpRequest();
xhr.open("GET", "request_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;
// alert(xhr.responseText);
}
}
}
// POST 방식으로 보내기
function send2(){
let xhr = new XMLHttpRequest();
xhr.open("POST", "request_ajax.jsp", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("userid=post&userpw=5678");
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById("result").innerHTML = xhr.responseText;
// alert(xhr.responseText);
}
}
}
</script>🧩request_ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
out.print("아이디 : " + userid + "<br> 비밀번호 : " + userpw);
%>
