[AJAX] AJAX란? / 예제

AJAX

: 비동기식 통신 기능을 이용하여 DHTML 기능을 구현한 프로그램

AJAX는 "Asynchronous JavaScript and XML"의 약어로, 비동기적으로 서버와 데이터를 교환하기 위한 웹 개발 기술이다.

기존의 웹 페이지는 페이지 전체를 새로고침해야만 서버와 통신하여 데이터를 가져오거나 업데이트할 수 있었지만 AJAX를 사용하면 페이지의 일부분만을 업데이트하고 필요한 데이터를 비동기적으로 서버로부터 가져올 수 있다.

기존의 웹페이지 vs AJAX

기존의 웹 페이지

클라이언트가 브라우저를 이용해(url 전달) WAS 에게 요청→ WAS가 해당 프로그램 실행해서 결과를 브라우저에게 돌려줌 → 결과를 브라우저가 해석해 출력 : 페이지가 계속 변경

AJAX

이벤트가 발생하면 브라우저가 아닌, AJAX 엔진을 통해 WAS 에게 비동기식으로(요청에 따른 실행과 응답을 기다리지 않음) 프로그램을 요청 → WAS는 해당 프로그램을 실행해 결과를 XML 문서로 만들어 AJAX에게 전달 → AJAX 엔진이 이를 받아 페이지의 일분만 변형(DHTML)해 결과 출력 : 페이지의 일부분만 업데이트

AJAX의 장점은 하나의 페이지를 통해 사용자에게 조금 더 풍부한 인터페이스, 환경을 제공할 수 있다는 것과, 비동기식으로 요청과 응답을 받을 수 있기 때문에 프로그램 실행에 대한 기다림이 발생되지 않으며 페이지를 고치지 않고도 일부분만 원하는 결과를 가져다줄 수 있다는 것이다.

DHTML 예시) 페이지에서 검색된 태그를 Element 객체로 반환받아 Click 이벤트가 발생될 경우 호출될 이벤트 처리 함수 등록

페이지에서 검색된 태그를 Element 객체로 반환받아 태그의 내용을 변경 처리하는 것을 DHTML 이라고 한다. → 현재 요청 웹프로그램의 실행 결과를 이용하여 페이지의 태그 변경

하지만 아래 예시의 경우 다른 웹프로그램의 실행 결과를 가져와 이용할 수 없다. 이 때 사용하는 것이 AJAX이다.

document.getElementById("btn1").onclick=function() {
	document.getElementById("display").innerHTML="안녕하세요. 에이젝스!!!";
}

예제)

[hello_one.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#display {
	width: 50%;
	padding: 5px;
	margin: 10px;
	font-size: 30px;
	border: 1px solid red;
}
</style>
</head>
<body>
	<h1>AJAX Programming</h1>
	<hr>
	<div id="display">Hello, AJAX!!!</div>
	<div>
		<button type="button" id="btn1">번역하기</button>
		<button type="button" id="btn2">배경색 변경</button>
	</div>

XMLHttpRequest 객체를 저장하기 위한 전역변수 선언

→ XMLHttpRequest 객체 : 비동기식으로 웹프로그램을 요청하여 응답받아 처리하기 위한 객체

var xhr=null;

페이지에서 검색된 태그를 Element 객체로 반환받아 Click 이벤트가 발생될 경우 호출될 이벤트 처리 함수 등록

document.getElementById("btn1").onclick=function() {
	//코드 작성
   	//코드 작성
   	// ...
}

AJAX(Asynchronous JavaScript and XML) 기능을 이용하여 페이지의 태그를 변경

→ XMLHttpRequest 객체를 사용하여 비동기식으로 웹프로그램을 요청하여 실행결과를 HTML 또는 XML로 응답받아 페이지의 태그 변경 처리한다.

1. XMLHttpRequest 객체(AJAX Engine)를 생성하여 전역변수에 저장한다. - 준비상태 : 0

xhr=new XMLHttpRequest();

2. XMLHttpRequest 객체의 준비상태(ReadyState)가 변경될 경우 호출될 이벤트 처리 함수를 등록한다.

XMLHttpRequest. onreadystatechange : XMLHttpRequest 객체의 준비상태가 변경되는 이벤트가 발생되는 이벤트 리스너 속성에 대한 프로퍼티

XMLHttpRequest.readyState : XMLHttpRequest 객체의 준비상태 정보를 저장한 프로퍼티

→ XMLHttpRequest 객체의 준비상태는 순차적으로 자동 변경된다.

0 (UNSENT): XMLHttpRequest 객체가 생성되었지만, open() 메서드가 호출되지 않은 상태 (XMLHttpRequest 객체 생성)
1 (OPENED): open() 메서드가 호출되었고, 서버와의 연결이 아직 이루어지지 않은 상태 (웹프로그램 요청 설정)
2 (HEADERS_RECEIVED): 서버와의 연결이 이루어지고, 서버로부터의 응답 헤더를 받은 상태 (웹프로그램 요청)
3 (LOADING): 서버로부터 응답 데이터를 받는 중인 상태이며, 일부 데이터를 받았을 수도 있다. (웹프로그램 실행)
4 (DONE): 서버로부터의 응답 데이터를 모두 받은 상태이며, 요청이 완료된 상태 (실행결과 응답)

XMLHttpRequest 객체는 서버와의 비동기 통신을 담당하는 객체이며, onreadystatechange 이벤트는 서버로부터의 응답이 도착할 때마다 상태를 감지하는 이벤트이다. changeHTML 함수는 응답의 상태가 변경될 때 호출되는 콜백 함수이다. (서버로부터의 응답이 도착하거나 서버와의 통신 상태가 변경되었을 때 해당 함수가 호출)

//XMLHttpRequest 객체의 onreadystatechange 이벤트 핸들러에 changeHTML 함수를 할당
// => XMLHttpRequest 객체의 상태 변화에 따라 changeHTML 함수가 호출되며, changeHTML 함수에서는 응답을 처리하고 필요한 작업을 수행
xhr.onreadystatechange=changeHTML;

3.XMLHttpRequest 객체로 open() 메소드 호출 - 준비상태가 [1]로 자동 변경된다.

XMLHttpRequest.open(method, url[, async]) : XMLHttpRequest 객체로 웹프로그램을 요청하기 위한 정보를 설정하는 메소드
→ method : 요청방식 전달 - GET(검색), POST(삽입), PUT(전체 변경), PATCH(부분 변경), DELETE(삭제)
→ url : 요청 웹프로그램의 URL 주소 전달 - 현재 서버의 존재하는 웹프로그램만 요청 가능
→ async : false(동기식 통신) 또는 true(비동기식 통신 - 기본) 중 하나를 전달

1) 비동기식 요청과 응답 - 요청에 의한 응답 기다림 미발생 (다른 작업 가능)

xhr.open("get", "hello_two.jsp", true);//비동기식 요청과 응답 - 요청에 의한 응답 기다림 미발생(다른 작업 가능)

2) 동기식 요청과 응답 - 요청에 의한 응답 기다림 발생 (다른 작업 불가능)

xhr.open("get", "hello_two.jsp", false);

4. XMLHttpRequest 객체로 send() 메소드 호출 - 준비상태가 [2]로 자동 변경된다.

XMLHttpRequest.send(data) : XMLHttpRequest 객체로 웹프로그램을 요청하기 위한 메소드
→  data : 웹프로그램 요청시 전달값을 [이름=값&이름=값&...] 형식으로 전달
→  리퀘스트 메세지 몸체부에 값을 저장하여 전달 - POST 방식으로 요청
→  전달값이 없거나 GET 방식으로 요청한 경우 data 매개변수에는 null 전달

xhr.send(null);

XMLHttpRequest 객체의 준비상태가 변경될 때마다 호출되는 이벤트 처리 함수 - 4번 호출된다.
→ 요청에 대한 응답 결과를 제공받아 처리하는 함수

function changeHTML() {
	//코드 작성
        //코드 작성
        // ...
}

5. 실행결과를 응답받아 페이지의 태그 조작 - DHTML

XMLHttpRequest.status : 웹프로그램 요청에 대한 응답의 상태코드(StatusCode)를 저장한 프로퍼티

XMLHttpRequest.responseText : 웹프로그램 요청에 대한 실행결과를 HTML 형식의 텍스트로 응답받은 경우 응답결과를 저장한 프로퍼티

function changeHTML() {
		if(xhr.readyState==4) {
			if(xhr.status==200) {//웹프로그램 요청에 대한 정상적인 실행결과를 받은 경우
				document.getElementById("display").innerHTML=xhr.responseText;
			} else {//웹프로그램 요청에 대한 비정상적인 실행결과를 받은 경우 - 에러코드(4XX 또는 5XX)
				alert("에러코드 = "+xhr.status);
			}
		} else {
        		//대기 상태일때는 로딩화면 출력
			document.getElementById("display").innerHTML="<img src='images/loading.gif' width='50'>";
		}
	}

[전체 소스코드]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#display {
	width: 50%;
	padding: 5px;
	margin: 10px;
	font-size: 30px;
	border: 1px solid red;
}
</style>
</head>
<body>
	<h1>AJAX Programming</h1>
	<hr>
	<div id="display">Hello, AJAX!!!</div>
	<div>
		<button type="button" id="btn1">번역하기</button>
		<button type="button" id="btn2">배경색 변경</button>
	</div>
	
	<script type="text/javascript">
	//XMLHttpRequest 객체를 저장하기 위한 전역변수 선언
	var xhr=null;
	
	//페이지에서 검색된 태그를 Element 객체로 반환받아 Click 이벤트가 발생될 경우 호출될 이벤트 처리 함수 등록
	document.getElementById("btn1").onclick=function() {
		//AJAX(Asynchronous Javascript + XML) 기능을 이용하여 페이지의 태그 변경

		//1.XMLHttpRequest 객체(AJAX Engine)를 생성하여 전역변수에 저장 - 준비상태 : 0
		xhr=new XMLHttpRequest();
		
		//2.XMLHttpRequest 객체의 준비상태(ReadyState)가 변경될 경우 호출될 이벤트 처리 함수 등록
		xhr.onreadystatechange=changeHTML;
		
		//3.XMLHttpRequest 객체로 open() 메소드 호출 - 준비상태가 [1]로 자동 변경
		xhr.open("get", "hello_two.jsp", true);//비동기식 요청과 응답 - 요청에 의한 응답 기다림 미발생(다른 작업 가능)
		
		//4.XMLHttpRequest 객체로 send() 메소드 호출 - 준비상태가 [2]로 자동 변경
		xhr.send(null);//웹프로그램 요청 후 준비상태가 [3]과 [4]로 자동 변경
	}
	
	//XMLHttpRequest 객체의 준비상태가 변경될 때만다 호출되는 이벤트 처리 함수 - 4번 호출
	// => 요청에 대한 응답 결과를 제공받아 처리하는 함수
	function changeHTML() {
		//5.실행결과를 응답받아 페이지의 태그 조작 - DHTML
		if(xhr.readyState==4) {
			if(xhr.status==200) {//웹프로그램 요청에 대한 정상적인 실행결과를 받은 경우
				document.getElementById("display").innerHTML=xhr.responseText;
			} else {//웹프로그램 요청에 대한 비정상적인 실행결과를 받은 경우 - 에러코드(4XX 또는 5XX)
				alert("에러코드 = "+xhr.status);
			}
		} else {
			document.getElementById("display").innerHTML="<img src='images/loading.gif' width='50'>";
		}
	}
	
	document.getElementById("btn2").onclick=function() {
		document.getElementById("display").style="background: green;";
	}
	</script>
</body>
</html>

[hello_two.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	for(int i=1;i<=2000000;i++) {
		System.out.println(i+"번째 처리중...");
	}
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	안녕하세요. 에이젝스!!!
</body>
</html>

저작자표시 비영리 변경금지

'학원 > 복기' 카테고리의 다른 글

[AJAX] 브라우저 캐싱(Browser Caching) (0)	2023.07.04
[AJAX] GET/POST 방식 요청 (0)	2023.07.04
[JSP] DB 연동 예제 (0)	2023.06.26
[JSP] 자바빈(JavaBean) / useBean 태그 (0)	2023.06.26
[JSP] 표준 액션 태그(Standard Action Tag) - include 태그/forward 태그/param 태그 (0)	2023.06.25

개뿌

[AJAX] AJAX란? / 예제

AJAX

예제)

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[AJAX] AJAX란? / 예제

AJAX

예제)

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바