📚 Study/Javascript
AJAX :: AJAX 실습 (텍스트 변경, 화면 제어 확인)
bono-hye
2023. 12. 28. 00:25
💫 AjaxTest01
# AjaxTest01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
function loadXMLDocs()
{
// XMLHttpRequest 객체(→ AJAX 객체)를 담을 변수 선언
var xmlHttp;
// (클라이언트 측) 브라우저에 따른 분기
// (클라이언트 측에서) 자신의 브라우저가 XMLHttpRequest 를
// 지원하고 있는 상황이라면...
if (window.XMLHttpRequest)
{
// (이렇게...) 이와 같은 방법으로 객체를 생성하고
xmlHttp = new XMLHttpRequest();
}
else
{
// (저렇게...) 이와 같은 방법으로 객체를 생성하고
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// ※ 객체를 생성하는 방법의 차이만 있을 뿐
// 여기까지 수행하면 XMLHttpRequest 객체(→ AJAX 객체) 생성 완료~!!!
// 『xmlHttp』 : XMLHttpRequest 객체
// 서버로부터 응답이 오면 『readystatechange』 이벤트가 발생하게 된다.
// 『onreadystatechange』 : readystatechange 이벤트가 발생했을 때
// 동작할 수 있도록 이벤트 핸들러를 등록하는 과정.
// 즉, 이와 같은 이벤트가 발생하게 되면... 다음의 내용처럼 동작해라~!!! 라는 의미.
//xmlHttp.onreadystatechange = 기능,동작,행위;
xmlHttp.onreadystatechange = function()
{
// 응답이 올 때 마다
// readyState 가 그 상황에서의 XMLHttpRequest 상태를 저장하게 된다.
// 즉, readyState 는 XMLHttpRequest 객체의 property 이다.
// ==> readystatechange 이벤트는
// readyState 가 변경될 때 마다 발생하게 된다.
// ※ 『XMLHttpRequest』의 『readyState』는 0 에서 4 까지 순차적으로 변화한다.
// 0 → 요청이 초기화 되지 않음.
// 1 → 서버 연결이 이루어지지 않음.
// 2 → 요청이 수신됨.
// 3 → 요청을 처리중
// 4 → 요청의 처리가 종료되고, 응답이 준비됨.
// 요청의 처리가 종료되고, 응답이 준비된 상태라면...
if (xmlHttp.readyState == 4)
{
// ※ 『XMLHttpRequest』의 『status』는 『HTTP Status』 코드를 의미한다.
// 200 → 올바른 응답
// 40x → 클라이언트 측 에러
// 50x → 서버 측 에러
if (xmlHttp.status == 200)
{
// 이 구문을 통해 서버로부터 응답을 정상적으로 받았을 때
// 그 응답을 가져와서 DOM 을 업데이트 하겠다는 의미.
// 응답의 속성에는 크게 두 가지가 있는데
// 『responseText』는 텍스트 형식의 응답일 경우 사용하게 되고
// 『responseXML』은 응답이 XML 형식일 경우 사용하게 된다.
document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
}
}
};
// 『XMLHttpRequest』의 『open("페이지 요청 방식", "URL", async)』
// XMLHttpRequest 객체를 필요한 설정으로 초기화하는데 사용하는 메소드이다.
// GET 방식이 아닌 POST 방식으로 요청하기 위해서는
// 『xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlendcoded");
// xmlHttp.send(input1=value1&input2=value2);』
// 와 같은 구문으로 헤더를 추가해 주어야 한다.
xmlHttp.open("GET", "ajaxTarget.txt", true);
xmlHttp.send("");
}
</script>
</head>
<body>
<div id="myDiv">
<h1>AJAX 를 이용하여 이 텍스트를 바꾸어본다.</h1>
</div>
<button type="button" class="btn" onclick="loadXMLDocs()">Content 바꾸기</button>
</body>
</html>
# ajaxTarget.txt
(텍스트만 있는, 버튼 누르면 요청할 페이지 코드는 생략~~)
💫 AjaxTest02
# ajax.js
- AJAX 객체 생성 함수 정의
var ajax = null;
function createAjax()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject)
return new ActiveXObject("Msxml2.XMLHTTP");
else
return null;
}
# web.xml
<servlet>
<servlet-name>test02send</servlet-name>
<servlet-class>com.test.ajax.Test02Send</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test02send</servlet-name>
<url-pattern>/test02send.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>test02</servlet-name>
<servlet-class>com.test.ajax.Test02</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test02</servlet-name>
<url-pattern>/test02.do</url-pattern>
</servlet-mapping>
# Test02Send.java
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
String view = "WEB-INF/view/AjaxTest02.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
# AjaxTest02.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest02.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
.short
{
width: 50px;
text-align: right;
}
</style>
<script type="text/javascript" src="<%=cp%>/js/ajax.js"></script>
<script type="text/javascript">
function sum()
{
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
var url = "test02.do?n1="+n1+"&n2="+n2;
ajax = createAjax();
ajax.open("GET", url, true);
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4)
if(ajax.status == 200)
callBack();
};
ajax.send("");
}
function callBack()
{
// 서버에서 응답할 데이터가 텍스트일 경우(단일 데이터)
var data = ajax.responseText;
// 서버에서 응답한 데이터가 XML 일 경우(다량의 데이터)
//var data = ajax.responseXML;
document.getElementById("result").value = data;
}
</script>
</head>
<body>
<div>
<h1>AJAX 기본 실습</h1>
<hr>
</div>
<input type="text" id="num1" class="txt short" />
+
<input type="text" id="num2" class="txt short" />
<input type="button" value=" = " class="btn" onclick="sum()"/>
<input type="text" id="result" class="txt short"/>
<br><br>
<p>같은 페이지에 있는 기타 다른 요소들</p>
<input type="text" />
<br>
<input type="checkbox" name="check" value="check1"/> 체크1
<input type="checkbox" name="check" value="check2"/> 체크2
<br>
<input type="radio" name="rdo" value="rdo1"/> 라디오1
<input type="radio" name="rdo" value="rdo2"/> 라디오2
<br>
<select id="sel">
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>
</body>
</html>➰체크할 내용➰
1. ajax.open("GET", url, true)
- GET : 데이터 전송 및 페이지 요청 방식 (POST 사용도 가능, POST 사용 시 헤더 추가 필요)
- url : AJAX 요청 페이지 (데이터 수신 및 응답 페이지)
- true : 비동기. false 일 경우에는 동기. AJAX 처리 과정에서 동기는 사용하지 않음 즉, true를 써야 비동기 처리 가능
2. ajax.send("")
- 실제 서버에서 AJAX 요청. 즉, 이 부분이 진짜 연결 작업!!
- GET 방식 사용할 경우 인자값 "" / POST 방식 사용할 경우 인자값에 해당 데이터 넣기
# Test02.java
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
int n1 = Integer.parseInt(request.getParameter("n1"));
int n2 = Integer.parseInt(request.getParameter("n2"));
int result = n1 + n2;
request.setAttribute("result", result);
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/Test02_ok.jsp");
dispatcher.forward(request, response);
}
# Test02_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
${result}
페이지 최총 요청 파일인 test02send.do는 아무런 코드가 없으니 생략~
아래 다른 요소들로 페이지 전체가 새로 요청되는 것이 아니라는 것을 확인할 수 있음. 비동기 통신!!