📌 1. Ajax
- Ajax : Asynchronous javascript And XML
- 비동기적 통신으로, 빠르게 동작하는 웹페이지를 만들기 위한 개발 기법이다.
- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
- 이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트파일 등이 있다.
- 비동기적 통신으로, 빠르게 동작하는 웹페이지를 만들기 위한 개발 기법이다.
📍 1-1. 장단점
- 장점
- 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지 일부분만 갱신할 수 있다.
- 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.
- 다양한 UI 동적 페이지 구현이 가능해진다.
- 단점
- 페이지의 이동이 없기 때문에 히스토리의 관리가 되지 않는다.
- 반복적인 데이터 요청이 있으면 느려지거나 작동하지 않게 된다.
📍 1-2. 구성 요소
- HTML, CSS : 웹 페이지의 표현을 위한 요소
- JSON, XML : 데이터의 교환을 위한 요소
- XMLHttpRequest 객체 : 웹 서버와의 비동기식 통신을 위한 브라우저 내장 객체
📍 1-3. 서버에 요청(Request)
-
XMLHttpRequest 객체 : 가장 핵심적인 구성요소. 웹 브라우저가 서버와 데이터를 교환할 때 사용한다.
-
open() : 서버로 보낼 ajax요청의 형식을 설정한다.
open(전달방식, url주소, 동기여부) -
send() : 작성된 ajax요청을 서버로 전달한다.
📍 1-4. 서버로부터 응답(Response)
- readyState 프로퍼티 :
XMLHttpRequest객체의 현재 상태를 나타낸다.- UNSENT(숫자 0)
: XMLHttpRequest 객체가 생성 - OPENED(숫자 1)
: open() 메소드가 성공적으로 실행됨 - HEADERS_RECEIVED(숫자 2)
: 모든 요청에 대한 응답이 도착함 - LOADING(숫자 3)
:요청한 데이터를 처리 중임 - DONE(숫자 4)
: 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
- UNSENT(숫자 0)
- status 프로퍼티 : 서버의 문서 상태를 나타낸다. (
HTTP상태코드) - onreadystatechange :
XMLHttpRequest객체의readyState프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.
➕ 예제
- ajax_text.jsp
<body> <h3>Ajax 요청 보내기 테스트</h3> <input type = "submit" value = "Get방식으로 보내기" onclick="send1()"> <input type = "submit" value = "Post방식으로 보내기" onclick="send2()"> <p id="result"></p> <script> // get 방식으로 보내기 메소드 function send1(){ // XMLHttpRequest 객체 생성 let xhr = new XMLHttpRequest(); // url에 데이터를 담음 xhr.open("GET","request_ajax.jsp?" +"userid=apple&userpw=1234",true); xhr.send(); xhr.onreadystatechange = function(){ // 통신 성공 시 responseText를 페이지에 출력 if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ document.getElementById("result").innerHTML =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"); // send에 데이터 담음 xhr.send("userid=admin&userpw=abcdefg"); xhr.onreadystatechange = function(){ // 통신 성공 시 responseText를 페이지에 출력 if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ document.getElementById("result").innerHTML =xhr.responseText; } } } </script> </body>
- request_ajax.jsp
<% String userid = request.getParameter("userid"); String userpw = request.getParameter("userpw"); out.print("아이디 : " + userid + ", 비밀번호 : " + userpw); %>
➕ Ajax에서 JSON 사용
JSON.parse(xhr.responseText);: 응답으로 JSON형 데이터를 받아올 때 데이터를 알맞게 잘라 주는 메소드- 사용 예시
<script> let xhr = new XMLHttpRequest(); // GET요청을 json 파일로 보냄 xhr.open("GET","data.json",true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ // 통신 성공 시 responseText를 JSON 형태로 parse let obj = JSON.parse(xhr.responseText); // JSON 내 name-value 를 사용 가능 alert(obj.result); alert(obj.count); } } </script>
