본문 바로가기
728x90
반응형

Java Web Programming98

[Ajax/jQuery] 제이쿼리 기초 : 시작하기 & 예제 코드 [ jQuery 란? ] : javaScript를 편리하게 사용할 수 있도록 해주는 Java Script Library이다. - javascript에 jQuery를 쓰면 웹 호환성이 좋아진다! jQuery 사용을 선언하기 사이에 삽입해준다. jQuery 시작 하기 jQuery(document).ready(function(){ // process.. }); $(document).ready(function(){ // process.. }); $(document).ready(callback 함수) = jQuery와 $는 같은 의미이다 document가 준비된 시점에 (=메모리에 로딩 시에) 익명함수가 실행되고, 이 익명함수는 현 페이지에서 필요한 이벤트 행위를 일괄적으로 등록한다. - jQuery 이벤트 메서.. 2020. 10. 6.
[Ajax/JSON] JSON을 이용한 Ajax 통신 2 (JSON Array + JSON Object) JSON을 이용한 Ajax 통신 에서 JSON Array 안에 JSON Object를 추가하는 방법도 있다! [Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array) [JSON Object] Model > 요소 : model (String) , price(int), maker(String) /CarDTO.java package model; public class CarDTO { private String model; private int pirce; private String maker; public CarDTO.. creamilk88.tistory.com [ 본문 보기 전에 !] Ajax 란 비동기 웹통신이다. 비동기 웹 통신은 전체페이지 로딩 없이 "필요한 .. 2020. 10. 6.
[Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array) [JSON Object] Model > 요소 : model (String) , price(int), maker(String) /CarDTO.java package model; public class CarDTO { private String model; private int pirce; private String maker; public CarDTO() { super(); } public CarDTO(String model, int pirce) { super(); this.model = model; this.pirce = pirce; } public CarDTO(String model, int pirce, String maker) { super(); this.model = model; this.pirce.. 2020. 10. 6.
[Ajax/JSON] JSON Basic! (개념, 특징, 기본문법) Ajax : 웹 비동기 통신 ! = 전체 페이지가 아닌, "필요한 데이터"만 전송받는다! 장점 1) 속도가 빠르다 2) 사용자는 페이지 변경 없이 필요한 데이터만 응답받으므로, 응답 여부와 무관하게 작업 지속 가능 기술 - XML : 1) 설정 정보 2) 데이터 전송 역할 - JSON : JavaScript Object Notation - 구조화된 데이터 응답을 위한 기술 더 많이 씀 ! JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 .. 2020. 10. 6.
[JSP/Ajax] Ajax 방식으로 정보 검색 - get / post 방식 (응답 대기중) 1) GET 방식 /step3-ajax.jsp /FindMemberAjaxServlet.java package step3; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/FindMemberAjaxServlet") public class FindMem.. 2020. 10. 5.
[JSP/Ajax] 동기적 방식과 비동기적 방식(ajax) * 동기적 방식과 비동기적 방식의 차이! 비동기적 방식(ajax)은 페이지 응답이 아닌, "필요한 데이터"만 응답한다. * 서버의 작업처리 시간이 많이 소요되어, Thread.sleep()을 주었을 때 - 동기적 방식은 요청 후 응답을 기다려야 하지만, - 비동기적 방식은 요청 후 다른 작업을 진행할 수 있다. 1. 동기적 방식 동기적 통신 방식의 예 step1-syn.jsp와 연동 /SynServlet.java package step1; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import java.. 2020. 10. 5.
[JSP/Ajax] Ajax basic 기본 개념과 문법 (+ xml, json 설명) [ AJAX ] : Asynchronous JavaScript And XML = "비동기 통신" : 비동기 통신의 주체는 JavaScript와 XML(최근에는 JSON)이다 ★ 핵심 ★ 동기적 방식의 전체 페이지를 응답받는 것이 아니라, "필요한 데이터"만 응답받는 방식이다! 사용자는 페이지 변경 없이 필요한 데이터만 응답받으므로, 응답 여부과 관계없이 작업을 지속할 수 있다. [ 개요 ] JavaScript와 XML을 이용하여 Web Client와 Server간의 비동기적 처리를 지원하는 프로그래밍 기법 - Google의 Google Map이 AJAX를 이용하여 구축된 이후 각광 받음. - Web 2.0의 Rich Client 기술로 인식되어 Web의 많은 분야에서 적용되는 추세 AJAX는 그 자체가 .. 2020. 10. 5.
[JSP/MVC] 커뮤니티 게시판 웹 어플리케이션 - 게시글 관리 (Model2 Pattern) [ 요구 사항 ] Model2 MVC 기반 커뮤니티 게시판 비로그인 상태에서는 '게시판 리스트' 정보만 제공된다. 상단부 화면에서 '로그인 할 수 있는 폼'이 제공된다. '게시판 리스트'에서는 '게시물 번호', '제목', '작성자', '작성일', '조회수'가 제공된다. 또한 게시물을 최신 등록순으로 정렬되어 제공된다. 로그인 상태에서는 상단부 로그인 폼 대신 '홈' 링크, '글쓰기' 링크, '사용자 이름'과 '로그아웃' 링크가 제공된다. 상단부에 '게시판 리스트' 부분에 '제목'이 링크로 활성화되어, '게시글 상세보기'가 제공된다. 1) '게시물 상세보기'에서는 '게시물 번호','제목', '작성자', '작성일시', '조회수', '게시물 본문 내용'이 제공된다. 2) '게시판 리스트' 화면에서는 '게시글 .. 2020. 10. 2.
[JSP] 장바구니 웹 어플리케이션 (세션 이용) '회원관리 웹 어플리케이션' 포스팅 에서 이어지는 포스팅입니다. > 위 회원관리 웹 어플리케이션을 이용하여, 장바구니 웹 어플리케이션을 만들기 위한 준비 ! 붙여넣기 2. 새로 복제된 프로젝트의 이름 변경 (webstudy35-jstl-item-inst -> webstudy36-cart 로) 3. webstudy36-cart 프로젝트에 오른쪽 마우스 클릭해서 properties 들어가기 4. Location 오른쪽 끝 옆 파일 이모티콘 클릭 5. webstudy36-cart > .setting > org.eclipse.wst.common.component 열기 6. 아래 세 부분을 'webstudy36-cart'로 변경 7. 다시 이클립스로 돌아와 'webstudy36-cart' 오른쪽 마우스 클릭 > .. 2020. 9. 23.
728x90
반응형

티스토리툴바