🍁Ajax
Ajax는 비동기 방식으로 자바스크립트를 사용해서 서버와 데이터를 통신하는 기술을 의미하며, XML 형식으로 데이터를 주고받는다.
화면 깜박임 없이 데이터를 주고받을 수 있는 기술이다.
서버 통신 요구사항 구현
프로젝트 생성
- Dynamic Web Project: AjaxTest
- Contextr oot: ajax
- Generate web.xml deployment descriptor 체크
com.test.ajax 패키지 생성
1. com.test.ajax.controller 패키지
- DBUtil.java
- Ex01.java
- Ex01Data.java
2. com.test.ajax.repository 패키지
- AjaxDAO.java
3. com.test.ajax.model 패키지
WEB-INF 폴더
1. WEB-INF > views 폴더
- ex01.jsp
2. WEB-INF > lib > ojdbc6.jar, jstl-1.2.jar, lombok.jar, json
Template 생성
try {
${line_selection}${cursor}
} catch (${Exception} ${exception_variable_name}) {
System.out.println("${primary_type_name}.${enclosing_method}()");
e.printStackTrace();
}
기존 Java try-catch문 템플릿을 수정하여 새로운 템플릿을 만들었다.
Ex01.java
package com.test.ajax.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex01.do")
public class Ex01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//ex01.do?count=0
String count = req.getParameter("count");
req.setAttribute("count", count);
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex01.jsp");
dispatcher.forward(req, resp);
}
}count값을 받은 다음에 눈에 보이는 jsp에서 써야 하기 때문에 request에 담아서 넣는다.
ex01.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>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
<style>
</style>
</head>
<body>
<div>
<input type="text" id="txt1" value="${count}">
<input type="button" value="버튼1" id="btn1">
</div>
<div>
<input type="text" id="txt2">
<input type="button" value="버튼2" id="btn2">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
<script>
$('#btn1').click(function() {
location.href = '/ajax/ex01data.do';
});
</script>
</body>
</html>Ex01.java에서 건네받은 count값을 출력한다.
Ex01Data.java
package com.test.ajax.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
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 com.test.ajax.repository.AjaxDAO;
@WebServlet("/ex01data.do")
public class Ex01Data extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
AjaxDAO dao = new AjaxDAO();
int count = dao.getMemoCount();
req.setAttribute("count", count);
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex01data.jsp");
dispatcher.forward(req, resp);
}
}
ex01data.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>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
<style>
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
<script>
location.href = '/ajax/ex01.do?count=${count}';
</script>
</body>
</html>
DBUtil
package com.test.ajax.controller;
import java.sql.Connection;
import java.sql.DriverManager;
public class DBUtil {
private static Connection conn;
public static Connection open() {
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String id = "hr";
String pw = "java1234";
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection(url, id, pw);
return conn;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public static Connection open(String server, String id, String pw) {
String url = "jdbc:oracle:thin:@" + server + ":1521:xe";
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection(url, id, pw);
return conn;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
AjaxDAO
package com.test.ajax.repository;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import com.test.ajax.controller.DBUtil;
public class AjaxDAO {
private Connection conn;
private Statement stat;
private PreparedStatement pstat;
private ResultSet rs;
public Connection getConn() {
return conn;
}
public void setConn(Connection conn) {
this.conn = conn;
}
public Statement getStat() {
return stat;
}
public void setStat(Statement stat) {
this.stat = stat;
}
public PreparedStatement getPstat() {
return pstat;
}
public void setPstat(PreparedStatement pstat) {
this.pstat = pstat;
}
public ResultSet getRs() {
return rs;
}
public void setRs(ResultSet rs) {
this.rs = rs;
}
public AjaxDAO() {
conn = DBUtil.open();
}
public int getMemoCount() {
try {
String sql = "select count(*) as cnt from tblMemo";
stat = conn.createStatement();
rs = stat.executeQuery(sql);
if (rs.next()) {
return rs.getInt("cnt");
}
} catch (Exception e) {
System.out.println("AjaxDAO.getMemoCount()");
e.printStackTrace();
}
return 0;
}
}
결과 출력
데이터 통신 요구사항
서버는 데이터베이스에 가서 데이터를 얻어온 한 다음에 출력하는 요구사항을 구현해 보도록 하자.
처음에는 ex01.do로 불러오기 때문에 텍스트 박스에 아무것도 없다. request에 아무것도 없으면 null이 들어가기 때문이다. jsp는 아무것도 없는 값을 텍스트 박스에 적으므로 아무 것도 없는 것이다.
버튼을 누르면 Ex01Data.java 페이지에 요청을 해서 데이터 개수를 알아내고, ex01data.jsp는 다시 처음의 페이지로 돌아오며, 해당 값을 Ex01.java에서 ex01.jsp로 전달하여 메모 개수를 출력하게 된다.
페이지를 이동하면 새로고침된다.
그런데 이 구현 방식에는 문제가 있다. 텍스트 박스에서 사용자가 작업 중이었는데, 잠시 메모의 개수를 출력할 일이 생겨서 버튼을 눌러 메모의 개수를 출력하면 작성 중인 기존 내용이 모두 사라져 버리기 때문이다. 즉, 페이지를 바꾸기 때문에 내용이 저장되지 않는다는 문제가 있다.
결론적으로 말하자면, 사용자가 클라이언트 작업 중에 서버와 통신을 하면(서버에게 데이터를 전송하거나 서버로부터 데이터를 수신해야 하는 경우) 기존 페이지에 새로고침이 발생한다. 이때 문제가 되지 않는 페이지도 있지만, 대부분의 페이지는 다른 구성요소가 있고, 작업 중에 서버와 통신해야 하는 경우가 생기게 된다. 이러한 상황에서 발생하는 문제를 Ajax가 해결할 수 있다.
Ajax 구현
- 순수 자바스크립트로 구현
- jQuery로 개량하여 구현
[JDBC] Ajax 구현: 순수 자바스크립트로 구현
🍁순수 자바스크립트로 구현 Ajax를 사용해서 서버로 데이터를 요청하고 응답받는 게 가능하다. 이를 구현하기 위해서는 Ajax 객체를 먼저 만들어야 한다. Ajax 객체 생성 const ajax = new XMLHttpRequest()
isaac-christian.tistory.com
[JDBC] Ajax 구현: jQuery로 개량하여 구현
🍁jQuery로 개량하여 구현 ajax 메서드 $.ajax(); jQuery 함수를 $로 적고 있는데, 여기에 바로 .을 찍으면 ajax 메서드가 나타난다. ajax는 태그와 관련된 기능이 아니라 독립적인 자바스크립트 기능이기
isaac-christian.tistory.com
보통의 경우에는 jQuery를 사용하여 구현한다.
