본문 바로가기
728x90
반응형

Ajax8

Spring 개발자 수업 111일차 - RESTful API Client 구현 RESTful API Client 구현 [ 구현 목표 ] - Java(Servlet/Spring)과 JSP를 이용해서 간단한 목록 보기 웹 브라우저 페이지를 만든다. - JavaScript(Ajax)와 JSP를 이용해서 간단한 목록 보기 자바스크립트 중심의 웹 브라우저 페이지(원 페이지: 여러가지 업무를 하나의 페이지에서 한다.)를 만든다. - 위 두개의 페이지를 RESTful API를 사용해서 만들어보고 각 특성을 확인해보자. (RESTful API는 ajax와 같이 많이 쓰인다. ) [ 초기 설정 ] - 각 설정은 어제와 동일하며 기존 컨트롤러(RestContoller)를 사용하고, jsp파일만 따로 생성한다. views > page.jsp (java,spring,servlet 기반의 일반적인 웹 페.. 2021. 9. 3.
Spring 개발자 수업 109일차 - jQuery Ajax를 이용한 post-it 메모장 만들기(작성, 위치 저장, 삭제) jQuery Ajax를 이용한 post-it 메모장 만들기(작성, 위치 저장, 삭제) [ 구현 목표 ] - 어제 작업하던 post-it 마무리 구현을 오늘 해보자. 1. 메모 이동 -> (id, left, top) -> DB 반영 2. 메모 z-index 변경 -> (id, zindex) -> DB반영 3. 메모 내용 수정 -> (id, memo) -> DB반영 ----------------------------------------------------------- 4. 메모 삭제 -> DB반영 --> 정리해서 업무 구분을 하자면 이동, z-index 변경, 내용 수정은 UPDATE 작업이며 메모 삭제는 DELETE 작업이다. [ 환경설정 및 파일 생성 ] - 환경설정, 파일 및 DB테이블은 어제와 동.. 2021. 8. 31.
Spring 개발자 수업 108일차 - jQuery Ajax를 이용한 post-it 메모장 만들기(생성, 확인) jQuery Ajax를 이용한 post-it 메모장 만들기(생성, 확인) - 기존에 배웠던 Ajax를 활용해 post-it 형식의 메모장을 만들어서 post-it 메모장 생성, 리스트 확인, 메모 작성, 메모 삭제 기능을 구현하기 - 우선 오늘은 post-it 메모장 생성(랜덤 위치)과 리스트 확인(새로고침 해도 원래 위치)을 구현을 해보자. [ 환경설정 및 파일 생성 ] - 기존의 Ajax수업의 프로젝트 환경설정과 동일하며, 파일 생성만 따로 추가하도록 하자 [ Controller ] com.test.ajax > MemoController.java > MemoDAO.java > MemoDTO.java com.test.ajax.mapper > ajax.xml [ View ] views > memo > i.. 2021. 8. 30.
Spring 개발자 수업 105일차(2) - jQuery Ajax를 이용한 아이디 중복검사 jQuery Ajax를 이용한 아이디 중복검사 - 우리가 회원가입 양식이나, 여러가지 입력 폼을 만들었을 때 만약 중복검사를 하게 되면 페이지가 이동되어 이전에 작성 했던 내용이 사라지는 부분이 많이 불편했다. 이 점들을 보완해서 사용자가 바로바로 확인할 수 있도록 ajax를 이용해서 새로고침이 이루어지지 않는 아이디 중복 검사를 간단하게 구현해보자. [ 준비 작업 ] - 이전 준비 작업과 동일하며 추가적으로 WEB-INF > views > login 폴더를 생성하고 ex01.jsp을 만들자. - 예제를 위한 임의의 테이블 tblUser를 만들고 컬럼에 id를 추가해서 몇개만 미리 넣어두자. [ 아이디 중복 검사 예제 ] 1) JSP (ex01.jsp) - 기본적인 아이디 입력 폼 양식과 중복 체크 검사.. 2021. 8. 26.
Spring 개발자 수업 104일차 - jQuery Ajax, 동기와 비동기 방식 jQuery Ajax - 어제 배웠었던 Ajax는 XMLHttpRequest() 객체를 직접 생성해 전부 작성하는 순수 Ajax인데, 이처럼 Ajax 기능을 하나씩 전부 구현 하는것이 아닌 jQuery에서 제공하는 Ajax가 대게 많이 쓰인다. - jquery.js 파일만 있으면 기본적으로 제공된다. [ 기존 방식 vs jQuery 방식 ] - 코드가 굉장히 간결해졌으며, 필요한 프로퍼티만 입력하면 되기 때문에 유지보수도 용이하다. - jQuery에서 제공하는 Ajax는 기존 Ajax 방식을 바탕으로 구현 한 것이므로 상세한 코드는 숨기고 원하는 프로퍼티만 입력하는 방식으로 구현이 되어있다. [ jQuery Ajax 내부 프로퍼티 작성 양식 ] $.ajax({ type: '', // 요청 메소드(GET,.. 2021. 8. 24.
Spring 개발자 수업 103일차 - Ajax Ajax [ 정의 ] - Asynchronous JavaScript And(XML), 비동기 자바스크립트와 XML - 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다. - JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. - 자바스크립트를 사용한 서버와 통신하는 기술(서버와 데이터를 주고 받는 기술) - 자바스크립트 기술이다. [ 특징 ] - 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다. - 페이지 새로고침 없이 서버에 요청 - 서버로부터 데이터를 받고 작업을 수행 [ ajax를 왜 사용할까? ] - 이처럼 1개의 웹 페이지에서 두개의 업무를 진행 하려고 할 때 한개의 업무가 실행시 다른 업무 진행 여부와 상관.. 2021. 8. 23.
728x90
반응형

티스토리툴바