1. 비동기 통신과 동기통신의 차이점은?
1-1. 비동기 통신
: 클라이언트와 서버가 서로 요청(Request) 및 응답(Response)하는 과정이 동시에 일어나지 않는(Asynchronous) 통신기법.
1-2. 통기 통신
: 클라이언트와 서버가 서로 요청 및 응답하는 과정이 동시에 일어나는(Synchronous) 통신기법.
2. xml 과 json 에 대하여 설명하시오.
2-1. xml
: eXtensible Markup Language의 약자로, 마크업 언어기반 문서인 HTML에서 좀 더 확장적인 기능등을 제공하여 태그(Tag)를 이용한 기능구현 및 환경설정등을 할 수 있는 문서.
2-2. json
: JavaScript Object Notation의 약자로, 자바스크립트의 기능 중 하나인 객체(Object)의 성질을 이용하여 키 : 값(Key : Value) 관계를 형성하여 데이터를 전달할 수 있어 개발 친화적인 특성을 지닌 개방형 표준 포맷.
3. list를 ajax로 json으로 출력하시오.
3-1-1. 소스코드 (Controller 객체)
// Ajax를 이용한 게시글 리스트
@GetMapping("/board/ajaxList")
public void ajaxList(Model model) {
log.info("ajaxList()");
}3-1-2. 소스코드 (JSP)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>MyBoard - Ajax List</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
function getList() {
var url = "${pageContext.request.contextPath}/rest/after.json";
$.ajax({
type: 'GET',
url: url,
cache : false,
dataType: 'json',
success: function(result) {
var htmls="";
$("#list-table").html("");
$("<tr>" , {
html : "<td>" + "번호" + "</td>"+
"<td>" + "이름" + "</td>"+
"<td>" + "제목" + "</td>"+
"<td>" + "날짜" + "</td>"+
"<td>" + "히트" + "</td>"
}).appendTo("#list-table")
if(result.length < 1){
htmls.push("등록된 댓글이 없습니다.");
} else {
$(result).each(function(){
htmls += '<tr>';
htmls += '<td>'+ this.bId + '</td>';
htmls += '<td>'+ this.bName + '</td>';
htmls += '<td>'
for(var i=0; i < this.bIndent; i++) {
htmls += '-'
}
htmls += '<a href="${pageContext.request.contextPath}/content_view?bId=' + this.bId + '">' + this.bTitle + '</a></td>';
htmls += '<td>'+ this.bDate + '</td>';
htmls += '<td>'+ this.bHit + '</td>';
htmls += '</tr>';
});
htmls+='<tr>';
htmls+='<td colspan="5"> <a href="${pageContext.request.contextPath}/write_view">글작성</a> </td>';
htmls+='</tr>';
}
$("#list-table").append(htmls);
}
});
}
</script>
<script>
$(document).ready(function(){
getList();
});
</script>
</head>
<body>
<table id="list-table" border="1">
</table>
</body>
</html>3-2. 구현화면
4. content_view 내 삭제 기능 또한 ajax를 사용하여 구현하시오.
4-1-1. 소스코드 (Controller 객체)
// AJAX를 이용한 게시글 삭제
@RequestMapping(value = "/rest/delete/{bId}", method = RequestMethod.DELETE)
public int restDelete(@PathVariable("bId") int bId) {
log.info("restDelete");
return boardService.remove(bId);
}4-1-2. 소스코드 (JSP)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function getList() {
var url = "${pageContext.request.contextPath}/rest/after.json";
$.ajax({
type: 'GET',
url: url,
cache : false,
dataType: 'json',
success: function(result) {
var htmls="";
$("#list-table").html("");
$("<tr>" , {
html : "<td>" + "번호" + "</td>"+
"<td>" + "이름" + "</td>"+
"<td>" + "제목" + "</td>"+
"<td>" + "날짜" + "</td>"+
"<td>" + "히트" + "</td>"
}).appendTo("#list-table")
if(result.length < 1){
htmls.push("등록된 댓글이 없습니다.");
} else {
$(result).each(function(){
htmls += '<tr>';
htmls += '<td>'+ this.bId + '</td>';
htmls += '<td>'+ this.bName + '</td>';
htmls += '<td>'
for(var i=0; i < this.bIndent; i++) {
htmls += '-'
}
htmls += '<a href="${pageContext.request.contextPath}/content_view?bId=' + this.bId + '">' + this.bTitle + '</a></td>';
htmls += '<td>'+ this.bDate + '</td>';
htmls += '<td>'+ this.bHit + '</td>';
htmls += '</tr>';
}); //each end
htmls+='<tr>';
htmls+='<td colspan="5"> <a href="${pageContext.request.contextPath}/write_view">글작성</a> </td>';
htmls+='</tr>';
}
$("#list-table").append(htmls);
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function (){
$('#a-delete').click(function(event){
event.preventDefault();
console.log("ajax 호출전");
$.ajax({
type : "DELETE",
url : "${pageContext.request.contextPath}/rest/delete/" + "${content_view.bId}",
data:{"bId":"${content_view.bId}"},
success: function (result) {
console.log(result);
getList();
},
error: function (e) {
console.log(e);
}
})
});
});
</script>
</head>
<body>
<table id="list-table" width="500" cellpadding="0" cellspacing="0" border="1">
<form action="modify" method="post">
<input type="hidden" name="bId" value="${content_view.bId}">
<tr>
<td> 번호 </td>
<td> ${content_view.bId} </td>
</tr>
<tr>
<td> 히트 </td>
<td> ${content_view.bHit} </td>
</tr>
<tr>
<td> 이름 </td>
<td> <input type="text" name="bName" value="${content_view.bName}"></td>
</tr>
<tr>
<td> 제목 </td>
<td> <input type="text" name="bTitle" value="${content_view.bTitle}"></td>
</tr>
<tr>
<td> 내용 </td>
<td> <textarea rows="10" name="bContent" >${content_view.bContent}</textarea></td>
</tr>
<tr >
<td colspan="2">
<input type="submit" value="수정">
<a href="list">목록보기</a>
<a id="a-delete" href="${pageContext.request.contextPath}/rest/delete?bId=${content_view.bId}">삭제</a>
<a href="reply_view?bId=${content_view.bId}">답변</a>
</td>
</tr>
</form>
</table>
</body>4-2. 구현화면
4-3. 개선사항
- 게시글이 삭제되고 나서 해당 페이지의 리다이렉트 기능 추가가 필요하다.
- JSP내 Script에서 일부 기능들의 경로를 재설정해야 한다.
'WebDev > 본과정' 카테고리의 다른 글
| Spring의 트랜잭션과 rollback 및 commit (0) | 2021.05.17 |
|---|---|
| RESTful (0) | 2021.05.17 |
| Mybatis를 이용한 Spring MVC 출력 방법 (0) | 2021.05.16 |
| DB의 설계와 Spring의 MockMVC (0) | 2021.05.16 |
| SQL의 더미 데이터 처리와 JUnit을 통한 테스트 (0) | 2021.05.16 |
최근댓글