AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다. AJAX는 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.
AJAX의 강력한 두가지 특징은 다음과 같다.
1.페이지 새로고침 없이 서버에 요청
2.서버로부터 데이터를 받고 작업을 수행
간단한 목록 출력 예시를 살펴보자.
### Mapper.xml
<!-- 일반리스트 -->
<select id="SelectAllListOfBoard" resultType="bdto">
select * from reboard order by num
</select>리스트 출력 sql 작성
### Dao, DaoInter ``` #Dao---------
@Override
public List<BoardDto> getList2() {
// TODO Auto-generated method stub
return session.selectList("SelectAllListOfBoard");
}
#DaoInter---------
public List<BoardDto> getList2();
<hr>
### Controller.java
@RestController
public class AnswerRestController {
@Autowired
AnswerDao adao;
@Autowired
BoardDao dao;
@GetMapping("rest/ajaxlist1")
public Map<String, Object> abc(){ // 꼭 map일 필요는 없음 일반 리스트처럼 처리해도 ok
List<Map<String, Object>> dataList = new ArrayList<Map<String,Object>>();
Map<String, Object> data = null;
List<BoardDto> sangList = dao.getList2(); // DB에서 데이터를 받아온다.
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
for(BoardDto s : sangList) {
data = new HashMap<String, Object>();
data.put("writer", s.getWriter()); // key, value 형식으로 DB값을 담는다.
data.put("subject", s.getSubject());
data.put("content", s.getContent());
data.put("writeday", sdf.format(s.getWriteday()));
data.put("photo", s.getPhoto());
dataList.add(data); // List에 Record 값을 넣는다.
}
Map<String, Object> sangpumDatas = new HashMap<String, Object>();
sangpumDatas.put("datas", dataList); // Map에 List를 담아 전송한다.
return sangpumDatas; // JSON은 Map을 리턴해야한다.map방식으로 list를 받아와 전송
restlist.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style type="text/css">
#btn1{
font-size: 1.2em;
margin-top: 60px;
margin-left: 100px;
}
#btn2{
font-size: 1.2em;
margin-top: 60px;
margin-left: 15px;
}
#show{
margin-top: 20px;
margin-left: 100px;
}
#banner{
margin-left: 500px;
font-size: 1.2em
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
//트리거로 초기 화면 설정
$("#btn1").trigger("click");
});
</script>
<button type="button" class="glyphicon glyphicon-th-list" id="btn1"></button>
<button type="button" class="glyphicon glyphicon-th" id="btn2"></button><span id="banner">총 ${totalCount }개의 글이 있습니다</span>
<div id="show"></div>
<script type="text/javascript">
$("#btn1").click(function(){
$.ajax({
type:"get",
url:"ajaxlist1",
dataType:"json",
success:function(data){
var s="";
s+="<table class='table table-info' style='width:800px;'>";
s+="<tr align='center' style='background-color: skyblue;'><th>번호</th><th>작성자</th><th>제목</th><th>내용</th><th>날짜</th></tr>";
let list = data.datas;
$(list).each(function(i,item){
s+="<tr>"
s+="<td align='center'>"+(i+1)+"</td>";
s+="<td>"+item.writer+"</td>";
s+="<td>"+item.subject+"</td>";
s+="<td>"+item.content+"</td>";
s+="<td>"+item.writeday+"</td>";
s+="</tr>";
});
s+="</table>";
$("#show").html(s)
}
});
});
$("#btn2").click(function(){
$.ajax({
type:"get",
url:"ajaxlist1",
dataType:"json",
success:function(data){
var s="";
s+="<table class='table table-info' style='width:800px;'>";
s+="<tr>"
let list = data.datas;
$(list).each(function(i,item){
var img=item.photo.split(",");
if(img=="no")
s+="<td><img src='../photo/noimg.jpg' style='width: 160px; height: 160px; border: 2px solid green; border-radius: 20px;'><br><br>";
else
s+="<td><img src='../photo/"+img[0]+"' style='width: 160px; height: 160px; border: 2px solid green; border-radius: 20px;'><br><br>";
s+="<span style='font-size:0.9em; color:blue'>"+item.writer+"</span><br>";
s+="<b>"+item.subject+"</b><br>";
s+="<span style='font-size:0.7em; color:grey;'>"+item.writeday+"</span></td>";
if((i+5)%4==0)
s+="</tr><tr>";
i++;
});
s+="</tr>";
s+="</table>";
$("#show").html(s)
}
});
});
</script>
</body>
</html>ajax를 이용해 출력값 설정. 이때 초기화면설정과 이미지가 없을 시 지정해놓은 'noimg.jpg'를 출력할 수 있도록 함.
남들이 다 아는 걸 모를 수는 없지!