기록

◉ 타임리프와 바닐라(순수) 자바스크립트를 활용한 Ajax 구현 ▪︎ AjaxExamController.java - 세 번째 'member 목록 요청' 클릭 시, 요청 처리 메서드 작성 // * /index.html에서 member 목록 요청 누를 경우 @GetMapping("ajax/member/all") public String getMemberList() { log.info("{}", "ajax/member/all 요청 중"); return "ajax/member/list"; } ▪︎ templates/member 에 list.html 생성 ① 타임리프 네임스페이스 선언 ② body 태그 안에 Ajax 호출 버튼 및 호출 후 받아온 데이터를 이용해 테이블을 그려 줄 memberTable 작성 - 태..

◉ 예제 실습 ▪︎ GET 방식과의 차이점 - RequestHeader에 Content-Type 정의 // - post 방식은 반드시 보내는 데이터의 요청 헤더를 설정해야 함. httpRequest.setRequestHeader('Content-Type', 'application/json') - send 요청 시 파라미터 데이터를 포함하여 요청 // - 서버로 요청 정보 실제로 보내기 httpRequest.send(JSON.stringify(reqData)) ▪︎ index.html Ajax POST 방식 요청 name: ajax호출 여기에 이름이 옴. 여기에 나이가 옴. - ajax 처리 순서 ① ajax(XMLHttpRequest 내장객체 이용) 객체를 먼저 생성 ② ajax 객체의 현재 진행상태 및..

◉ 예제 실습 ▪︎ 이전 시간에 실습하던 HelloJSON 프로젝트에서 진행 ▪︎ 의존성 추가 ▪︎ templates 폴더에 index.html 생성 - html 파일에 css 스타일 적용 : 태그 안에 입력 Ajax GET 연습 Ajax POST 연습 Ajax GET 연습 (member 목록 요청) ▪︎ AjaxExamController.java 생성 @Controller @Slf4j public class AjaxExamController { // * http://localhost/ // 또는 http://localhost 주소에 대한 요청 처리 // - http://localhost : 기본값으로 루트 생략됨 @GetMapping("/") public String home() { return "in..

◉ AJAX란? ▪︎ AJAX - Asynchronous Javascript And XML의 약자, 비동기 방식의 javascript와 XML을 의미 - 자바스크립트처럼 특정 프로그래밍 언어를 지칭하는 것이 아니고, 제이쿼리나 리액트처럼 특정한 프레임 워크를 지칭하는 것도 아닌, 구현하는 방식을 의미 - 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나 - 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음 → 즉, Ajax를 이용하면, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시 가능 이때 서버와는 다양한 형태의 데이터를 주고 받을 수 있음 ( JSON, XML, HTML, 텍스트 파일 등 ) ▪︎ AJAX의 장점 ① 웹 페이..