목차
1. Ajax란
2. 실습 환경
3. 웹 페이지 생성
4. Servlet 생성
5. web.xml 설정
6. 정리
7. 출력 화면
1. Ajax란 (출처 - 위키백과)
기존의 웹 애플리케이션은 폼을 채우고 이를 제출(submit)하면 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 결과물로써 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다. 이는 금전적 손실을 야기할 수 있으며 사용자와 대화하는 서비스를 만들기 어렵게도 한다.
반면에 Ajax는 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹 서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다.
장점
- 페이지 이동없이 고속으로 화면을 전환할 수 있다.
- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
단점
- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
- HTTP 클라이언트의 기능이 한정되어 있다.
- 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.
2. 실습 환경
- 이클립스
- jquery-3.4.1
- tomcat 7.0
프로젝트 생성 및 tomcat 서버 설정을 마쳤다는 가정 하에 ajax 통신을 하였다.
3. 웹 페이지 생성
먼저 사용자가 어떠한 입력을 수행할 수 있도록 html과 javascript를 사용하여 웹 페이지를 생성한다. 아래와 같이 ajax폴더에 파일들을 넣어줬다.
3.1) ajaxCommunication.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src = "ajax/jquery-3.4.1.js"></script>
<script type="text/javascript" src = "ajax/ajaxCommunication.js"></script>
</head>
<body>
<h2>Ajax Communication</h2>
이름 : <input type="text" id = "ajaxConName"/>
나이 : <input type="text" id = "ajaxConAge"/>
<br>
<input type="button" id = "ajaxConGetButton" value ="Get통신">
<input type="button" id = "ajaxConPostButton" value ="Post 통신">
<div id="myDiv"></div>
</body>
</html>
|
Get, Post 방식의 통신을 구현하기 위해 두 개의 버튼을 생성하였다.
3.2) ajaxCommunication.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
$(document).ready(function(){
$('#ajaxConGetButton').click(function(){
AjaxConGet();
})
$('#ajaxConPostButton').click(function(){
AjaxConPost();
})
})
function AjaxConGet(){
var url = "http://localhost:8080/test/ajaxCon";
$.ajax({
type:"GET",
url:url,
dataType:"html",
data:{
name : $('#ajaxConName').val(),
age : $('#ajaxConAge').val()
},
success : function(data){
alert('ajax GET 통신 성공');
var $div = $('<div></div>');
var text = document.createTextNode(data);
$div.append(data);
$div.appendTo($('#myDiv'))
},
error : function(request,status,error){
alert('code:'+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); //에러 상태에 대한 세부사항 출력
alert(e);
}
})
}
function AjaxConPost(){
var url = "http://localhost:8080/test/ajaxCon";
$.ajax({
type:"POST",
url:url,
dataType:"html",
data:{
name : $('#ajaxConName').val(),
age : $('#ajaxConAge').val()
},
success : function(data){
alert('ajax POST 통신 성공');
var $div = $('<div></div>');
var text = document.createTextNode(data);
$div.append(data);
$div.appendTo($('#myDiv'))
},
error : function(request,status,error){
alert('code:'+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); //에러 상태에 대한 세부사항 출력
alert(e);
}
})
}
|
1 ~ 10 : 페이지가 로드되면 위에서 생성했던 두 개의 버튼에 대해 click 이벤트를 부여한다.
12 : Get 방식으로 Ajax와 통신을 시도하는 함수이다.
13 : 통신을 하고자하는 url을 입력한다. ~~test/ajaxCon으로 설정했는데, ajaxCon은 web.xml에서 설정한 서블릿의 url이다.
15 ~ 21 : 통신 방식과 통신할 url, 수신할때의 데이터 타입, Servlet으로 보낼 데이터 정보를 넣어준다. dataType은 서블릿에서 객체 형식이나 두개 이상의 데이터를 송신할 경우 "json"을, 하나의 문장으로 송신할 경우 "html"을 넣어준다. 필자는 out.print()로 하나만 보내기 때문에 html로 해주었다.
22 ~ 27 : Servlet과의 모든 통신이 정상적으로 끝나면 메서드의 매개변수 안에 Servlet이 response 한 데이터가 있게 된다. 이를 출력하기 위해 div태그에 응답 정보가 들어있는 textNode를 상속시키고, 이를 초기 HTML 코드로 생성했던 div 태그에 상속시킨다.
30 ~ 32 : Servlet과의 통신 실패 시 에러 코드 및 내용에 대한 세부사항을 출력시킨다. 만일 에러 코드가 200이 나올 경우 dataType에 대한 수정이 필요하다.
38 ~ 57 : type을 GET에서 POST로만 변경한 코드이다.
4. Servlet 생성
패키지를 myServlet으로 설정하고 Servlet 이름은 Serv로 하였다. web.xml에서 url과 Servlet을 매핑할 것이기 때문에 WebServlet()을 주석처리하였다.
Serv.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
package myServlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
/**
* Servlet implementation class Serv
*/
//@WebServlet("/ajaxCon")
public class Serv extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Serv() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("application/x-json; charset=UTF-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("doget :"+name);
System.out.println("deget :"+age);
out.print("Get 통신 : 안녕 내 이름은 "+name+"이고 나이는 "+age+"란다"); //response
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("application/x-json; charset=UTF-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("doget :"+name);
System.out.println("deget :"+age);
out.println("Post통신 : 안녕 내 이름은 "+name+"이고 나이는 "+age+"란다"); //response
}
}
|
9 : ajax로 데이터를 전송하기 위한 메서드인 java.io.PrintWrite를 import 하였다.
28 : GET 방식으로 통신할 때의 함수이다.
30 : ajax로 보낼 데이터의 charset을 utf-8로 설정한다. 이 부분이 없을 시 한글이 깨져서 출력될 수 있다.
32 ~ 33 : ajax에서 보낸 name과 age를 읽어 들인다.
38 : 위와 같은 형태로 데이터를 가공하여 ajax에게 전송한다.
44 ~ 54 : POST 방식으로 통신할 때의 함수이다.
5. web.xml 설정
web.xml은 루트 경로로 진입 시 가장 먼저 읽어오는 파일을 설정하거나 WAS에게 줄 Servlet 정보를 설정하고 url을 매핑하는 역할을 한다.
web.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>test</display-name>
<welcome-file-list>
<welcome-file>ajax/ajaxCommunication.html</welcome-file> <!-- 루트경로 진입시 가장먼저 읽어오는 파일 -->
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<!-- 서블릿을 불러오기 위해 WAS에게 주는 정보 -->
<!-- 1. 배포할 Servlet 2. 해당 Servlet 매핑 URL -->
<servlet-name>ajaxCon</servlet-name>
<servlet-class>myServlet.Serv</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxCon</servlet-name>
<url-pattern>/ajaxCon</url-pattern>
</servlet-mapping>
</web-app>
|
5 : <welcome-file> 태그는 루트 경로 진입 시 가장 먼저 읽어오는 파일이다. 읽어올 수 없을 시 순차적으로 아래 입력된 파일을 읽어온다. root경로에서 서버를 돌릴 시 ajaxCommunication.html 파일이 가장 처음 로드되도록 하였다. 그 아래는 기본적으로 입력되어 있는 파일이다.
13 ~ 18 : WAS가 Servlet을 정상적으로 로드하기 위해 WAS에게 주는 Servlet과 url 정보이다. <servlet-name>은 <servlet-mapping>에서 동일한 name을 가진 정보와 매핑시키기 위한 이름이다. 현재 myServlet.Serv(클래스명.서블릿명) 파일을 '/ajaxCon' 이라는 url과 매핑시켰다. 이로써 '~~test/ajaxCon' url로 접속할 시 Serv 파일이 로드된다.
6. 정리
이렇게 설정하면 ajax 통신이 정상적으로 이루어진다. 과정을 정리하자면
1) 서버를 실행하면 web.xml에서 정의한 파일인 'ajax/ajaxCommunication.html'를 로드하고, WAS에게 서블릿 파일과 url 정보를 알려준다.
2) HTML 파일에서 버튼을 클릭하게 되면 입력한 url과 ajax 통신을 시도하게 된다. url이 web.xml에서 설정한 ~~test/ajaxCon로 설정되었기 때문에 '/ajaxCon'과 매핑된 Serv 서블릿과 통신을 시도하게 된다.
3) Servlet에서 데이터를 받은 후 가공하여 송신한다.
4) ajax는 웹 페이지에 가공된 데이터를 출력시킨다.
7. 출력 화면
'프론트엔드 > 기타' 카테고리의 다른 글
| [WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자) (0) | 2019.08.19 |
|---|---|
| [WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2 (0) | 2019.06.04 |
| [WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1 (2) | 2019.06.04 |
| [WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력 (0) | 2019.06.04 |
