AJAX
AJAX는 Asynchronous JavaScript And XML의 약자로 자바스크립트를 이용하여 서버와 브라우저간 비동기적으로 데이터 교환을 할 수 있는 통신 방식의 개념이다.
AJAX를 사용하면 웹 페이지 일부만을 갱신하고자 할때 전체 페이지를 렌더링 할 필요없이 갱신이 필요한 부분만 로드하여 갱신하여 빠르고 다양하게 동작하는 동적 웹 페이지의 구현이 가능하다.
반면 서버에서 클라이언트로 먼저 요청할 수 없고, 페이지의 이동이 없기 때문에 히스토리가 남지 않고 반복적인 데이터를 요청하게 되면 느려지거나 작동하지 않을 수 있다.
AJAX를 구현하기 위한 절차 익히기
1. XMLHttpRequest 객체
XMLHttpRequest 객체는 Ajax의 가장 핵심적인 구성요소로 웹 브라우저가 서버와 데이터를 교환할 때, 백그라운드에서 지속적이고 비동기적인 서버 통신을 할 수 있는 기능을 제공한다. 페이지의 일부만을 업데이트 할 수 있도록 한다.
const xhr = new XMLHttpRequest();
2. 서버에 request 전달
open()
서버에 보낼 AJAX 요청의 형식을 설정한다.
open(전달 방식, URL주소, 동기여부);- 전달방식 : get, post 방식 중 하나를 선택
- URL주소 : 요청을 처리할 서버의 파일 주소
- 동기여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택(기본 : true, 비동기)
send()
서버 요청시 전송데이터를 보낸다.
- GET 방식의 경우 URL에 붙여 보내므로 null 값으로 처리
- POST 방식은 데이터를 key-value로 저장하여 전달
3. 서버로 받은 response 처리
Call Back 함수
XMLHttpRequest는 요청과 관련된 상태값을 저장하며 그 값이 변경시 마다 event를 발생시킨다.
xhr.onreadystatechange = function(){
...
}onreadystatechange : 요청에 대한 상태가 변화할 때 마다 발생하는 event를 처리한다.
readyState
request로 보낸 데이터 처리 상태를 나타내는 것으로 상태값 반환을 통해 서버로 부터 응답 여부를 확인 할 수 있다.
이때 XMLHttpRequest.DONE(‘4’)과 같다면 서버로 부터 정상적으로 응답처리할 준비가 되었음을 의미한다.
아래 표는 readyState의 상태값의 설명이다.
| 구분 | 설명 |
| 0(uninitialized) | request가 초기화되지 않음 |
| 1 (loading) | 서버와의 연결이 성사됨 |
| 2 (loaded) | 서버가 request를 받음 |
| 3 (interactive) | request(요청)을 처리하는 중 |
| 4 (complete) | request에 대한 처리가 끝났으며 응답할 준비가 완료됨 |
status
XMLHttpRequest 객체가 접속한 서버페이지의 상태를 출력하며, 정상적인 호출은 200, 페이지가 없음은 404를 출력한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
<h2>Ajax</h2>
<button onclick="sendRequest()">요청 보내기</button>
<p id="text"></p>
<script>
function sendRequest(){
const xhr = new XMLHttpRequest();
xhr.open('GET', 'Ajax_ok.jsp?userid=son&userpw=777', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById('text').innerHTML = xhr.responseText;
}
}
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String userid = request.getParameter("userid"); // son
String userpw = request.getParameter("userpw"); // 777
out.println(userid); // son
out.println(userpw); // 777
%>
