[TIL] 2020.07.28_TIL-200728
To-Do
- [복습] AJAX 복습
- [과제] API 실습 과제
AJAX 코드 실습
HelloServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/*
* 해당 Servlet과 매핑될 url 패턴을 지정한다. web.xml에
* Annotation을 통해 web.xml 파일에 별도로 설정하지 않더라도 해당 Servlet을 실행할 수 있다.
*/
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("servlet 호출");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<h1>HelloServlet</h1>");
out.close();
}
}
exam01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#msgView {
border: 1px solid red;
height: 200px;
width: 500px;
}
</style>
<script>
function requestMsg(){
/*
* 1. XMLHttpRequest 객체 생성
* : JavaScript를 이용하여 서버로 보내는 HTTP request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요하다
* XMLHttpRequqest가 바로 그러한 Object의 예이다.
*/
let httpRequest = null;
if(window.XMLHttpRequest){
httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject){
httpRequest = new ActiveXObject("Miscrosoft.XMLHTTP");
}
/*
* 2. 콜백함수 설정
* : 서버에 요청을 하기에 앞서, 서버로 보낸 요청에 대한 응답을 받았을 때 어떤 동작을 실행할 것인지 정해야 한다.
* httpRequest의 inreadystatechange property에 특정 함수를 할당하면 요청에 대한 상태가 변화할 때
* 특정 함수가 호출된다.
*/
httpRequest.onreadystatechange = function() {
//서버 응답에 따른 로직을 작성
console.log('서버 응답에 따른 로직을 작성');
/*
* 4. 서버에서 응답완료
* readyState == 4는 request에 대한 처리가 끝났으며 응답할 준비가 완료된 상태
* status == 200은 ajax 요청이 정상적으로 처리되었는지 아닌지 검사하는 응답코드가 200인지 검사
*/
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
// 5. 서버 응답결과를 화면에 출력
let msgView = document.getElementById("msgView");
msgView.innerHTML = httpRequest.responseText;
}
}
}
/*
* 3. 서버에 비동기 통신 요청
* Annotation을 통해 설정한 url 주소로 매핑시켜준다.
*/
httpRequest.open('get', '/Study-WEB/HelloServlet', true); //초기화(초기화만 하고 아무것도 날아가지 않는 상태 -> send 메소드로 요청 전달)
httpRequest.send(null);
}
</script>
</head>
<body>
<h2>서버에서 받은 메세지</h2>
<div id="msgView"></div>
<input type="button" value="서버에 자료 요청" onclick="requestMsg()">
</body>
</html>
hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>Hello Ajax</h1>
댓글남기기