728x90 반응형 Java Web Programming/5. JavaScript | Ajax | jQuery (JSON)9 [Ajax/jQuery] jQuery 를 활용한 Ajax 방식 프로그래밍 [ 목차 ] : 클릭하여 목차 이동 0. 이론 1. JSONObject와 JSONArray 2. jquery ajax(get방식으로 Servlet을 거쳐서 데이터를 받아옴) 3. jquery ajax(post방식으로 Servlet을 거쳐서 데이터를 받아옴) 4. jquery ajax(JSON 객체 활용) 5. serialize() ajax [asynchronous javascript and xml] 비동기 방식 통신 기존 동기적 방식과 비교하면 전체 페이지를 로딩하는 것이 아니라 필요한 부분 데이터만 전달받아 화면에 표현 (서버의 부담이 줄어든다) 사용자의 편의성 증대 (요청 후 다른 작업이 가능하고 페이지가 변경되지 않으므로 로컬에서 작업하는 것으로 느낀다) xml or json의 필요성 : 구조화된 .. 2020. 10. 8. [Ajax/jQuery] 제이쿼리 활용 [ 목차 ] : 클릭하여 목차 이동 1. Form 연동 ( change event, submit, reset ) 2. Table 제어 (하위/상위 태그 제어 - tr, td) 3. Toggle (정보 더보기/접기) 4. From tag 제어 (select / option / radio / checkbox) 5. MouseEnter로 마우스 움직임 제어 5-1. Hover 로 마우스 움직임 제어 6. CheckBox 체크박스 - 변수 누적 7. Loop 반복문 (Each) 8. Prop - checkbox의 체크 상태 제어 9. Append 10. Select-option 동적 생성 11. next / pre 를 통해 값 찾기 12. 새로 생성된 버튼 동작 가용 기능 1. Form 연동 ( change e.. 2020. 10. 7. [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. 이전 1 다음 728x90 반응형
