비동기
-> javascript/JQuery/Axios(vue.js)
정리:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
var uid;
function startRequest(){//요청관련된 로직이 담긴다.
uid=document.frm.userId.value;
xhr = new XMLHttpRequest();
xhr.onreadystatechange=callback;
xhr.open("get", "AjaxServlet?userId="+uid);
xhr.send(null);
}
function callback(){//응답관련된 로직이 여기에 담깁니다. 서버에서의 응답은 이곳으로 들어온다.
if(xhr.readyState==4){
if(xhr.status==200){
//resultView 영역에 전달받은 id값을 출력... 파란색 5크기로 출력
document.getElementById('resultView').innerHTML="<font color=blue size=5>"+xhr.responseText+"</font>";
document.frm.userId.value="";
document.frm.userId.focus();
}
}else{//2,3인경우...
//resultView영역에 a.gif이미지를 출력
document.getElementById('resultView').innerHTML='<img src="img/a.gif">';
}
}
</script>
</head>
<body>
<h2>비동기 통신으로 id 전송하기</h2>
<form name="frm">
ID:<input type="text" name="userId">
<input type="button" value="id값 전송하기" onclick="startRequest()">
</form>
<div id="resultView"></div>
</body>
</html>
package servlet.ajax;
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;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String id = request.getParameter("userId");
System.out.println(id);
//XMLHttprequest가 다시 요청받은 곳으로 갈때 delay시키는 로직입니다. readyState값이 2,3인 경우를 볼 수 있또록 설정...
try {
Thread.sleep(1000);
}catch(Exception e) {
}
out.print(id);
}
}
factory pattern과의 연결
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>Ajax and Factory Pattern을 이용한 회원 id 검색하기</h2>
<a href="idList.do">아이디로 회원 검색하기</a>
<!--
IdListController:: memeber 테이블의 모든 아이디를 가져온다. ...showAllMember()
ArrayList 리턴... and binding
네비게이션...show_idList.jsp
show_idList.jsp:: list 폼으로 화면을 작성, list 폼에 있는 아이디 하나를 선택하면 해당하는 아이디 옆에 나머지 정보가 출력되도록
command?findMemeber
FindController:: id에 해당하는 vo를 리턴-> 바인딩-> show_idList.jsp 특정 영역으로 나머지 정보를 출력... 마지막 이미지 참조
-->
</body>
</html>package servlet.controller;
public class HandlerMapping {
private static HandlerMapping handler = new HandlerMapping();
private HandlerMapping() {
};
public static HandlerMapping getInstance() {
return handler;
}
public Controller createContoller(String command) {
Controller controller = null;
if (command.equals("find.do")) {
controller = new FindController();
System.out.println("FindController 생성됨");
} else if (command.equals("logout.do")) {
controller = new logoutController();
System.out.println("logout 생성됨");
} else if (command.equals("allMember.do")) {
controller = new allMemberController();
System.out.println("allMember 생성됨");
} else if (command.equals("login.do")) {
controller = new loginController();
System.out.println("login 생성됨");
} else if (command.equals("register.do")) {
controller = new registerController();
System.out.println("register 생성됨");
} else if (command.equals("idCheck.do")) {
controller = new idCheckController();
System.out.println("idCheck 생성됨");
} else if (command.equals("update.do")) {
controller = new updateController();
System.out.println("update 생성됨");
} else if (command.equals("idList.do")) {
controller = new idListController();//추가했습니다.
System.out.println("idList 생성됨");
}
return controller;
}
}
package servlet.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import servlet.model.MemberDAOImpl;
public class idListController implements Controller {
@Override
public ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setAttribute("list", MemberDAOImpl.getInstance().showAllMember());
return new ModelAndView("show_idList.jsp");
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
function startRequest() {
var id = document.getElementById("memberId").value;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;
xhr.open("get", "find.do?id="+id);
xhr.send(null);
}
function callback() {
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("memberIdView").innerHTML
= "<font color=green size=4>"+xhr.responseText+"</font>";
}
}
}
</script>
</head>
<body>
<h2 align="CENTER">ID LIST...</h2>
<H3 align="center">리스트 폼에서 특정한 아이디를 선택하세요..</H3>
<select id="memberId" onchange="startRequest()">
<option value="">==== ID CHOICE =====</option>
<c:forEach items="${list}" var="memId">
<option>${memId.id}</option>
</c:forEach>
</select>
<span id="memberIdView"></span>
</body>
</html>
get을 post로 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var xhr;
function startRequest(){
var id = document.getElementById('id').value;
console.log(id);
xhr = new XMLHttpRequest();
xhr.onreadystatechange =callback;
xhr.open("post", "idCheck.do");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xhr.send("id="+id);
}
function callback(){
if(xhr.readyState==4){
if(xhr.status==200){
var flag = xhr.responseText;
var resultSpan= document.getElementById("idCheckView");
if(flag=="true"){
resultSpan.innerHTML="<font color=red><b> ID 사용 불가</b></font>";
}else{
resultSpan.innerHTML="<font color=blue><b> ID 사용 가능</b></font>";
}
}
}
}
</script>
</head>
<body>
<h3>회원가입</h3>
<form action="register.do" name="registerForm" >
> ID : <input type="text" id="id" name="id" required="required">
<input type="button" value="중복확인" onclick="startRequest()"><span id="idCheckView"></span><br><br>
PASSWORD : <input type="password" name="password" required="required"><br><br>
NAME : <input type="text" name="name" required="required"><br><br>
ADDRESS : <input type="text" name="address" required="required"><br><br>
<input type="submit" value="member register">
</form>
</body>
</html>이제 jquery로 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajaxBtn').on('click', function(){
var id = $('#id').val();
var pass = $('#pass').val();
$.ajax({//여기서 부터 비동기 시작 XMLHttpRequest가 생성된다.
//요청
type:"post",
url:"JQueryAjax",
data:"id="+id+"&&pass="+pass, // ,를 반드시.... 해줘야합니다.
//응답
success:function(result){
$('#resultView').html(result).css({
'background':'yellow','color':'red', 'font-weight':'bold'
});
}//callback
});//ajax
})//click
});//ready
</script>
</head>
<body>
<h2>Ajax Using jquery....</h2>
ID<input type="text" name="userId" id="id"><br><br>
PASS<input type="password" name="userPass" id="pass"><br><br>
<input type="button" value="ajaxBnt" id="ajaxBtn">
<span id="resultView"></span>
</body>
</html>package servlet.ajax;
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;
@WebServlet("/JQueryAjax")
public class JQueryAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String id = request.getParameter("id");
System.out.println(id);
String pass = request.getParameter("pass");
System.out.println(pass);
out.print(id+","+pass);
}
}
xml
tag를 내가 만들어도 됩니다.
한글도 됩니다.
root tag는 only one입니다.
'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글
| 2020.06.19 (0) | 2020.06.19 |
|---|---|
| 2020.06.18 (0) | 2020.06.18 |
| 2020.06.11 (0) | 2020.06.11 |
| 2020.06.10 (0) | 2020.06.10 |
| 2020.06.09 (0) | 2020.06.09 |
