[Spring] Day10 (Note): Ajax, CRUD 게시판

2022/3/29

 

Ajax

Asynchronous JavaScript and XML : 비동기 방식의 JS와 XML을 가리킴

 

동기방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작 수행가능

비동기 방식 : 신호를 보냈을 때 응답 상태와 상관없이 다음 동작 수행가능

 

사용 이유 : 화면 전환 없이 클라이언트와 서버 간의 XML, JSON, 텍스트, HTML 등 정보 교환하기 위해

 

*jQuery 라이브러리 배치하여 사용 (제이쿼리 가지고 에이젝스 통신)

 

Ajax 관련 메서드

1.  load()
사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용. 요청한 컨텐츠를 이용하여 선택한 요소의 내용 변경 가능

$(“요소 선택”).load(url, data, 콜백 함수)
url: 외부 콘텐츠 요청할 외부 주소 입력
data: 전송할 데이터 ( 생략 가능)
콜백 함수: 전송 완료되면 콜백 함수에 저장된 코드 실행 (생략 가능)

 

2.  $.ajax()
사용자가 지정한 URL 경로에 파일 데이터 전송, 요청한 데이터를 선택한 요소에 불러옴. 불러올 수 있는 외부 데이터는 텍스트, HTML, XML, JSON 등이 있다. 통합적인 메서드 (post(), get(), getJSON() 기능 포함). 중요!
중괄호 안에 다양한 옵션 입력 가능, 옵션은 속성과 값으로 이루어짐
$.ajax({
       url: “요청할 주소”, //form 태그의 action에 작성하는 주소
       type: “전송 방식”, //post, get 등으로 지정
       data: 전송할 데이터, //요청 시 보내줄 데이터
       contentType: “요청 시 보내는 데이터의 타입; cjarset=utf-8”, //MINE 타입으로 지정
       dataType: “응답받는 데이터의 타입”, 위에 data와 관련 x //”html”, “xml”,”json”, “text”
       success: function(result){ //응답받는 데이터가 담길 변수
       // 성공했을 때 실행할 콜백 함수
},
       error: function(e){ //e는 에러 발생 정보 담기는 매개변수
       //요청 실패 시 실행될 코드
}
});

*옵션들
async: 통신을 동기/비동기 방식으로 설정하는 옵션
beforeSend: 요청하기 전에 실행하는 이벤트 핸들러
cache: 요청한 페이지를 인터넷 캐시 (저장)할지 여부 설정
complete: Ajax 완료 시 함수 실행 이벤트 핸들러
contentType: 요청 시 보내는 데이터의 타입 설정. dafault는 application/x-www.form-urlencoded
username: HTTP 액세스 할 때 인증 필요한 경우 사용자 이름 지정.

3.  $.post()
데이터를 서버에 HTTP POST 방식으로 요청 후 응답받을 때

4.  $.get()
GET 방식으로 요청 후 응답받을 때

5.  $.getJSON()
GET 방식으로 요청 후 응답을 JSON형식으로 받을 때

6.  $.getScript()
Ajax를 이용하여 외부 자바스크립트를 불러올 때

7.  .ajaxStop(function(){})
비동기 방식으로 서버에 응답 요청 완료되었을 때 함수 실행

8.  .ajaxSuccess(function(){})
ajax 요청이 성공적으로 완료되면 함수 실행

9.  .ajaxComplete(function(){})
ajax 통신이 완료되면 함수 실행

 

 

게시판

#필요 요소

A.  DB 테이블 board

B.  게시판 목록 페이지

C.  글 작성 폼 페이지

D.  글 본문 (내용) 페이지

E.  글 수정 폼 페이지

F.  글 삭제

G.  controller, service, mapper, VO/DTO

 

#1. 게시판 플랜

/board/list	GET	게시판 목록	list.jsp
/board/write	GET	글작성 폼	write.jsp
/board/write	POST	글 작성 처리
/board/content	GET	글 내용 (본문)	content.jsp
/board/modify	GET	글 수정 폼	modify.jsp
/board/modify	POST	글 수정 처리
/board/delete	GET	글 삭제	delete.jsp
/board/delete	POST	글 삭제 처리

 

 

#2. 패키지, 폴더 구조

*src/main/java

com.board.controller

com.board.service

com.board.mapper

com.board.domain

*src/main/resources

com.board.mapper > xml

view > board 폴더 > jsp 파일