[JQeury + JSP + Servlet] Ajax로 통신하기/비동기통신
자바의 비동기 통신
AJAX
AJAX(Asynchronous JavaScript and XML)는 웹 애플리케이션에서 비동기적으로 데이터를 교환하고 업데이트하기 위해 사용되는 기술이다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버와 통신하여 데이터를 가져오거나 전송하는 것이 가능하다.
제이 쿼리의 Ajax는 아래의 형식을 따른다.
$.ajax({
url: "요청할 URL",
type: "GET 또는 POST",
data: "전송할 데이터",
success: function(response) {
// 요청이 성공한 경우 실행할 콜백 함수
},
error: function(xhr, status, error) {
// 요청이 실패한 경우 실행할 콜백 함수
},
complete: function() {
// 요청이 완료된 후 실행할 콜백 함수
}
});즉 success이전까지의 키값들은 송신용, success부터는 수신용이라고 할 수 있다.
success 함수의 매개변수에는 서버에서 반환된 응답 데이터가 담긴다.
전송할 데이터의 형식은 이러한 것들이 가능하다.
- 쿼리 문자열
- JS 객체
- 제이손
JSP 비동기 통신 예제
index.jsp
<%@page import="sample1.Student"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<button type="button">click me</button>
</body>
<script>
$(document).ready(function(){
$("button").click(()=>{
$.ajax({
url:"data.jsp",
type:"get",
success:(res)=>{
console.log(res);
let json = JSON.parse(res);
console.log(json);
$("#demo").text(json.number + ":" + json.name);
},
error:()=>{
alert("error");
}
})
})
});
</script>
</html>버튼을 클릭시 JSON형식 문자열을 받아와 json으로 변경 후 값을 할당한다.
data.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int number = 1001;
String name = "김기릿";
String json = "{\"number\":" + number + ", \"name\":" + "\"" + name + "\"" + "}";
System.out.println(json);
out.print(json);
%>out.pirnt를 통해 데이터를 보낸다.
out 내장 객체는 응답 출력 스트림을 제공하는 객체이다. HTML이나 텍스트와 같은 응답 데이터를 출력하는 데 사용된다.
서블릿을 이용한 로그인 데모
서블릿을 이용하여 로그인 데모 프로그램을 작성한다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="user">
아이디:<input type="text" name="id"/>
비밀번호: <input type="password" name="pw" />
<button type="button" onclick="func()">click me</button>
</form>
</body>
<script>
function func(){
let info = {
id:$("[name='id']").val(),
pw:$("[name='pw']").prop("value")//해쉬 함수 사용해야함
}
console.log(info);
$.ajax({
url:"user",
type:"get",
data:info,
success:(res)=>{
let ans = res;
if(res === "valid"){
alert("로그인 되었습니다.");
location.href="./home.jsp"
}
else{
alert("올바르지 못한 아이디 혹은 비밀번호 !");
location.href = "./";
}
},
error:()=>{
alert("error");
}
})
}
</script>
</html>사용자로부터 아이디와 비밀번호를 받아 서블릿과 비동기 통신을 진행한다.
실제 로그인을 구현할 시에는 pw는 해쉬 함수를 통과시켜 사용 하여야 한다. 클라이언트 단이든 서버 단이든. 해쉬 함수는 입력 값에 대해 동일한 출력을 보장하는 무작위 수를 생성하는 함수라고 생각하면 된다. 즉 사용자가 입력하는 실제 비밀번호를 결코 db에 저장하는 일이 없도록 하는 것이다.
User.java
@WebServlet("/user")
public class User extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
String pw = req.getParameter("pw");
System.out.println("ID : " + id);
System.out.println("PW : " + pw);
HttpSession session = req.getSession();
System.out.println(pw.equals("correct"));
if(id.equals("correct") && pw.equals("correct")) {
session.setAttribute("isLoggedIn", true);
resp.getWriter().print("valid");
}
else {
resp.getWriter().print("nonValid");
}
}
}name을 기준으로 값을 입력 받아 옳은 값과 비교하여 로그인 처리를 한다. 실제 구현 시에는 db에서 실제 아이디와 비밀번호(해쉬를 통과한)를 불러와 비교 처리하여야 한다.
home.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>
</head>
<body>
<h1>Home</h1>
<%
Boolean isLoggedIn = (Boolean)session.getAttribute("isLoggedIn");
if(isLoggedIn != null && isLoggedIn ){
%>
<h1>환영합니다!(로그인시 보임)</h1>
<%}%>
</body>
</html>로그인 결과를 보여주는 화면이다. 세션에 로그인 정보가 true일 경우 환영합니다 글자가 나타난다.
아래의 순서를 따른다.
사용자의 데이터 입력 → 서블릿으로 데이터를 보냄 → 서블릿에서 데이터 처리 후 클라이언트로 데이터를 보냄 → 받은 데이터가 success:(res)의 res에 담김 → 로그인 처리