JSP day5
Ajax(Asynchronous JavaScript And XML)
Ajax(Asynchronous JavaScript And XML)
Ajax는 비동기 자바스크립트와 XML을 말한다. 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법으로 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지에 표시 할 수 있다. 서버와 데이터를 주고 받는 데이터의 형태로는 HTML, XML, JSON, 텍스트 등이 있다.
Ajax의 장점
웹 페이지가 로드 된 후 서버로 데이터를 요청 보내거나 받는 것이 가능하여 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신 할 수 있어 다양한 동적 페이지의 구현이 가능하다.
Ajax의 단점
서버에서 클라이언트로 먼저 요청할 수 없고, 페이지의 이동이 없기 때문에 히스토리가 남지 않는다. 반복적인 데이터를 요청하게 되면 느려지거나 작동하지 않을 수 있다.
XMLHttpRequest 객체
XMLHttpRequest 객체는 Ajax의 가장 핵심적인 구성요소로 웹 브라우저가 서버와 데이터를 교환할 때, 백그라운드에서 지속적인 서버 통신을 할 수 있는 기능을 제공한다.
const 객체명 = new XMLHttpRequest();
open()
서버에 보낼 Ajax요청의 형식을 설정한다.
open(전달 방식, URL주소, 동기여부);
// 전달방식 : get, post 방식 중 하나를 선택
// URL주소 : 요청을 처리할 서버의 파일 주소
// 동기여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택(기본 : true, 비동기)
send()
작성된 Ajax문을 서버로 전달한다.
readyState
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(); // XMLHttpRequest 객체 생성
// get 방식을 통해 URL에 데이터를 담음
xhr.open('GET', '1_Ajax_ok.jsp?userid=son&userpw=777', true);
xhr.send(); // 서버로 Ajax 전달
// XMLHttpRequest.DONE : 4(완료), xhr.status : 200
xhr.onreadystatechange = function(){
// 만약 readyState의 상태값이 4(정상처리완료)이고 status값이 200(정상 호출)일 경우
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
// #text에 응답 받은 text데이터를 삽입
document.getElementById('text').innerHTML = xhr.responseText;
}
}
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// url를 통해 받은 데이터를 파라미터에 담음
String userid = request.getParameter("userid"); // son
String userpw = request.getParameter("userpw"); // 777
out.println(userid); // son
out.println(userpw); // 777
%>
