[JSP] 22. JSP/Servlet MVC2 - jQuery기반의 Ajax POST 전송 및 MVC패턴 Action 식별자
jQuery를 활용하는 방법에 대해서 소개하려고 한다.
그림 일기 수준으로 매우 편안한 마음으로 입문할 수 있는 학습 기반을 제공해주려고 한다.
심도적인 부분은 전문서적 등도 찾아보기도 하고, 검색도 많이 해보시면 좋을 듯 싶다. (변화가 워낙 빠른 분야인 만큼)
1. 결과
동적인 부분인 관계로 영상으로 올려주도록 하겠다.
영상 1. 출력 결과
jQuery가 어떤 결과물을 만들어 내는 도구인지 이해가 되었으면 하는 바램이다.
원래는 jQuery가 먼저 나온 것이 아니고, Javascript가 먼저이다.
그리고 2006년도에 약 Ajax라는 규격이 나왔는데, Javascript 파일 형태로 ajax 파일을 배포하여 동적인 처리에 대해서 접근하게 되었다.
그리고 조금 시간이 지나서 jQuery라는 게 나왔는데, 분명한 건 이건 표준은 아니다.
다만, 편하게 사용하도록 도와주는 오픈소스 진형의 library이다.
2. 프로젝트 생성하기
이러한 저차원 수준으로 작성한 이유는 프로그래밍에 겁먹지 말라는 것이다.
그림 1. 프로젝트 생성하기
File -> New -> Maven Project를 클릭한다.
그림 2. 프로젝트 생성하기
org.apache.maven.archetypes | maven-archetype-webapp를 선택한다.
Next를 클릭한다.
검색 키워드로 검색할 때, "webapp"로 하면, 조금 찾는데 시간이 절약될 수 있다.
다만, HDD 사용자는 조금 버벅될 가능성이 있다. (검색 기능이 매우 느림.)
그림 3. 프로젝트 생성하기
GroupId, Artifact Id를 적당히 입력한 후 Finish를 누른다.
3. Pom.xml - 설정하기
http://mvnrepository.com에 들어가서 "servlet"을 검색해서 최신 버전으로 해준다.
Maven Project를 아끼고 있는 이유는 정말 사용하기가 편리하다.
셋팅하는데, /src/main/webapp/WEB-INF/lib인가 폴더에 넣고, 프로젝트 속성에 들어가서 BuildPath 클릭하고 Add External Library 등록하고
확인 몇 번하고 복잡했는데, Maven을 알게 되면서 많이 좋아진 것 같다.
그림 4. pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.webedu</groupId>
<artifactId>exampleAjax</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>exampleAjax Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<finalName>exampleAjax</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
파일명: pom.xml
[첨부(Attachments)]
pom.zip
4. Project Factes와 Build Path - 자바 버전 바꿔주기
자바 버전을 변경해줘야 한다. Maven Project 초기 셋팅이 현재 1.6으로 잡혀서 생성되기 때문이다.
그림 5. 프로젝트의 오른쪽 메뉴 모습
프로젝트를 선택한 후, 마우스 오른쪽 버튼을 클릭한다.
Properties를 클릭한다.
그림 6. Build-Path
JRE System Library [JavaSE-14]로 바꿔준다.
Edit 버튼을 누르면 바꿀 수 있다.
그림 7. Project Factes
Java의 버전을 14로 바꿔준다.
5. jQuery 사이트 - 접속하기
인터넷 웹 브라우저를 켠다.
그림 8. 윈도우 10 - 엣지 클릭하기
웹 브라우저 아이콘을 못 찾는 경우에는 그림처럼 생긴 거 클릭하면 된다.
(그 옆에도 비슷하게 생긴 e자 아이콘을 클릭해도 무방하다.)
그림 11. jQuery 웹 사이트 접속하기
https://jquery.com/download
링크를 웹 주소창에 입력해서 접속한다.
또는 클릭해도 무방하다.
표기해놓은 것 5개 중 하나만 잘 다운로드 받으면 된다.
그림 12. jQuery 다운받기
문서 클릭\workspace-spring-tool-suite-4-4.7.2.RELEASE\{프로젝트명}\src\main\webapp\js에 저장해준다.
js폴더가 없으니깐 하나 만들어준다.
js폴더 안에 저장해준다.
영상 2. jQuery 다운로드 받는 모습
6. jQuery - ajaxPost - API 접속하기
https://api.jquery.com/jquery.post/
사이트에 접속해준다.
그림 13. jQuery 예제
이렇게 생긴 HTML태그를 복사하여 Eclipse에 옮겨갈 것이다.
참고로 이 코드가 완벽한 코드는 절대 아니다. (태스트 해 봤음.)
그림 14. index.jsp 파일에 복사 붙여넣기 해주기
그림 14와는 다르게 태스트를 완료한 코드는 아래에 있으니 참고하면 되겠다.
WEB-INF내에 views폴더 생성해준다.
그리고 index.jsp 파일을 views 폴더 안으로 이동해준다.
영상 3. views 폴더 생성 방법 및 파일 이동 시키기
그림 15. 이동을 완료한 모습 - views 폴더 내용
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<form action="board/insert.do" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<div id="result"></div>
<script type="text/javascript">
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
alert( "Data Loaded: " + data );
var content = data ;
$( "#result" ).html( content );
});
});
</script>
<!-- the result of the search will be rendered inside this div -->
</body>
</html>
파일명: index.jsp
[첨부(Attachments)]
index.zip
7. Servlet 작성하기
MVC2 패턴을 만들거니깐 서블렛을 잘 따라 해야 한다.
그림 16. Java Resources 폴더 - 마우스 오른쪽 버튼 메뉴 모습
Java Resources 폴더를 선택한 후, 마우스 오른쪽 버튼으로 클릭한다.
New-> Servlet을 클릭한다.
그림 17. Servlet 생성 작업창 - 모습 (Create Servlet)
Java Package명을 입력한다. (예: com.example.web.controller)
Class Name명을 입력한다. (예: FrontController)
Finish를 누른다.
8. web.xml 파일 - 수정작업하기
경로 위치: /src/main/webapp/WEB-INF/web.xml
문자열하고, FrontController의 *.do로 변경 작업을 해주면 된다.
그림 18. web.xml - 수정작업하기
<?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>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>FrontController</servlet-name>
<servlet-class>com.example.web.controller.FrontController</servlet-class>
<init-param>
<param-name>charset</param-name>
<param-value>UTF-8</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>FrontController</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>
파일명: web.xml
[첨부(Attachments)]
web.zip
9. Class 만들기 - HttpUtil
HttpUtil 클래스를 만들어주려고 한다.
그림 19. Java Resources의 오른쪽 버튼 메뉴 모습
Java Resources를 마우스 오른쪽 버튼으로 클릭한다.
New->Class를 클릭한다.
그림 20. 클래스 생성 마법사 모습
Package명은 com.example.web.util
Name은 HttpUtil로 한다.
Finish를 누른다.
그림 21. 코드를 입력한 모습 - HttpUtil.java
package com.example.web.util;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HttpUtil extends HttpServlet {
private static final long serialVersionUID = 1L;
private static String charset = null;
public static void forward(HttpServletRequest req, HttpServletResponse res,
String path) throws ServletException, IOException {
try {
RequestDispatcher dispatcher = req.getRequestDispatcher(path);
dispatcher.forward(req, res);
}catch(Exception e) {
e.printStackTrace();
}
}
}
파일명: HttpUtil.java
[첨부(Attachments)]
HttpUtil.zip
10. Controller - Interface 만들기
Controller 인터페이스를 하나 만들 것이다.
그림 22. Controller.java
package com.example.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public interface Controller {
public void execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException;
}
파일명: Controller.java
[첨부(Attachments)]
Controller.zip
11. InsertController.java - Class
앞서 만든 Interface(Controller)로 InsertController.java를 작성할 것이다.
그림 23. InsertController.java
Package 명은 com.example.web.board라고 입력한다.
Name명은 InsertController라고 입력한다.
Interfaces의 Add버튼을 누른다.
그림 24. Implemented Interfaces.......
Controller를 입력한 후 작성한 Controller 인터페이스를 선탁한다.
OK를 누른다.
Finish를 누른다.
package com.example.web.controller.board;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.example.web.controller.Controller;
import com.example.web.util.HttpUtil;
public class InsertController implements Controller {
@Override
public void execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
HttpUtil.forward(req, res, "/WEB-INF/views/board/insert.jsp");
}
}
파일명: InsertController.java
[첨부(Attachments)]
InsertController.zip
13. FrontController - 코드 작성하기 (수정)
코드를 자세히 보면, flag가 추가되었다.
doAction에서 POST, GET 등을 인식할 수 있게 되었다.
package com.example.web.controller;
import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.example.web.controller.board.InsertController;
import com.example.web.util.HttpUtil;
public class FrontController extends HttpServlet {
private static final long serialVersionUID = 1L;
private String charset = null;
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
doAction(req, res, "GET");
}
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
doAction(req, res, "POST");
}
protected void doAction(HttpServletRequest req,
HttpServletResponse res,
String flag)
throws ServletException, IOException {
ServletConfig sc = this.getServletConfig();
charset = sc.getInitParameter("charset");
req.setAttribute("charset", charset);
req.setCharacterEncoding(charset);
res.setContentType("text/html; charset=" + charset);
String uri = req.getRequestURI();
String conPath = req.getContextPath();
String command = uri.substring(conPath.length());
Controller subController = null;
// POST 전송방식만
if(command.equals("/board/insert.do") &&
flag.contentEquals("POST")){
System.out.println("insert");
System.out.println("----------------");
subController = new InsertController();
subController.execute(req, res);
}else if (command.equals("/index.do")){
HttpUtil.forward(req, res, "/WEB-INF/views/index.jsp");
}
}
}
파일명: FrontController.java
[첨부(Attachments)]
FrontController.zip
14. View - webapp/WEB-INF/views/board/insert.jsp
POST처리 후에 출력할 페이지를 작성하도록 하겠다.
PrintWriter out으로 해도 무방하지만, MVC패턴을 적용했으니 뷰 파일에서 작성하겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String text = (String)request.getParameter("s");
%>
<%= text %>
파일명: insert.jsp
[첨부(Attachments)]
insert.zip
* 맺음글(Conclusion)
jQuery를 통해서 ajax 전송에 대해서 간단한 형태로 살펴보았다.
