반응형 💻 1. 웹개발_Front end/1-7 Ajax21 [Ajax] 21. Contact Application 만들기 주소록 어플리케이션 만들기 실습 1. 순서 1. 구조 잡기 -> 2. 뷰 템플릿 -> 3. 함수 -> 4. 이벤트 함수 -> 5. add -> 6. update, delete 2. 소스 코드 주소록 리스트 새로운 연락처 추가 번호 이름 전화번호 주소 기능 일련번호 이름 전화번호 주소 1. 새로운 연락처 추가하기 2. 연락처 수정하기 3. 연락처 삭제하기 2021. 10. 7. [Ajax] 20. Ajax jsRender 템플릿 분리하기 1. jsRender와 jsviews 소개 - 이전에 실습한 부트스트랩 테이블 예제는 가독성이 떨어짐 - 테이블 만드는게 훨씬 편해짐 웃는하루의 블로그 :: jsrender, jsviews 소개 및 사용법 (ko-kr.net) jsrender, jsviews 소개 및 사용법 최근 자바스크립트에서도 MVC 모델이 주목을 받으면서, AngularJS가 주목을 받고있다. 하지만 대부분의 웹사이트는 이러한 MVC 모델로 설계되지 않아 개발 상에서 적용이 힘든 경우가 많다. 개발자 blog.ko-kr.net 2. 실습 - jsRender 번호 이름 전화번호 주소 3. 실습 - 다이얼로그(모달) 이름 전화번호 주소 추가 2021. 10. 7. [Ajax] 19. Ajax 제이쿼리 플러그인 1. 실습 - waittime waitMe 테스트 2. 실습 - jpaginate (페이지 표출 라이브러리) jPaginate 테스트 현재 페이지 : 1 2021. 10. 6. [Ajax] 18. 기타 메소드 1. 기타 메소드 종류 - ajaxSetup() : Ajax요청 시에 전달되는 속성 값과 콜백 함수의 기본 값을 설정 및 변경하는 메소드 모든 Ajax요청에 적용되기 때문에 빈번하게 사용하는 것은 권장되지 않음 - ajaxPrefilter() : 사용자 정의 Ajax 설정을 추가하거나 기존 Ajax 설정의 기능을 변경할 때 사용하는 메소드 2. 실습 - Ajax_Setup 조회 삭제 * favicon 에러는 favicon을 지정해주지 않아서 생긴 오류이므로 그냥 무시할 것. 3. 실습 - Ajax_PreFilter 조회 삭제 * 조회 버튼을 여러 번 눌렀을 때 abort가 찍힘 2021. 10. 6. [Ajax] 17. Ajax 전역 이벤트 함수 1. 이론 - Ajax 전역 이벤트 함수 - Ajax 전역 이벤트 함수는 콜백에서 사용되는 공통적인 코드를 관리하고 사용하도록 구성 2. Ajax 전역 이벤트 함수의 종류 1) ajaxStart(handler) : 처리중인 ajax 요청이 없는 상태에서 처음 ajax 요청이 일어날 때 발생되는 이벤트. 이미 ajax 요청이 진행중이면 실행되지 않음 ex) $(document).ajaxStart(function() { console.log("ajaxStart"); }); 2) ajaxSend(handler) : 각각의 ajax 요청이 전송되기 전에 발생되는 이벤트 다른 ajax요청이 진행중인 상태에서도 실행됨 ex) $(document).ajaxSend(function(event, xhr, options).. 2021. 10. 6. [Ajax] 16. 헬퍼 함수 1. 이론 - 헬퍼 함수 - ajax 서버로 요청을 보낼 깨 전송되는 기본 데이터 형식은 x-www-form-urlencoded 형식 - 한글 및 특수문자는 url encode를 직접해줘서 유니코드로 변경을 해줘야됨 - 사용자로부터 입력받을 경우가 많을 경우에는 직접 x-www-form-urlencoded 형식으로 만들어 주는게 귀찮고 어렵다. - 헬퍼 함수의 역할은 사용자 입력 필드의 데이터를 x-www-form-urlencoded 형식으로 간단하게 만들어줌 - 헬퍼 함수를 사용할 때는 input의 name 속성과 매핑되기 때문에 항상 name속성을 지정해줘야됨 - name 속성을 지정하지 않으면 빈 값으로 데이터가 넘어감 - 헬퍼 함수를 사용할 때는 항상 form 요소를 선택해서 사용해야됨(seria.. 2021. 10. 6. [Ajax] 15. encoded_form_data 1. encoded_form_data 이름 : 성별 : 남 여 연령대 : --연령대를 선택하세요-- ~19 20~29 30~39 40~49 50~59 60~ 저장 2021. 10. 6. [Ajax] 14. jsPromise (콜백 지옥 해결법)과 jqWhen 1. 이론 - Jquery Promise 객체 - Promise 객체는 비동기 방식의 통신에서 발생하는 에러를 해결하기 위해 사용하는 객체 - 비동기 방식에서는 가끔 서버에서 데이터를 다 받아오기전에 화면에 표출하려고 하는 문제가 발생하는데 이러한 문제들이나 콜백 지옥 같은 문제들을 해결하는데 Promise 객체를 사용하게 됨 - Promise 객체를 통한 콜백 지옥 해결 ajax를 호출하고 리턴 받는 jqXHR 객체를 통해 새로운 ajax를 추가해주고 .then() 메소드를 통해서 다음 ajax를 호출하도록 설정 then() 메소드 ajax1-------------> ajax2-------------> ajax3-------------> 2. 실습 - jsPromise (콜백 지옥 해결법) 조회 삭제 .. 2021. 10. 6. [Ajax] 13. Ajax Callback 지옥 1. 이론 - ajax 여러 개를 순서에 맞게 호출하려면 success 콜백에서 다음 ajax를 호출 $.get("/contact/list_long.do", { pageno : 1 }, function(data) { console.log("page1 success : " + (new Date()).toLocaleTimeString()); console.log(data); console.log("Send Page2"); //두 번째 ajax 호출 $.get("/contact/list_long.do", { pageno : 2 }, function(data) { console.log("page2 success : " + (new Date()).toLocaleTimeString()); console.log(da.. 2021. 10. 6. [Ajax] 12. XHR객체를 이용한 콜백함수 1. 개념 - jqXHR(Jquery XMLHTTPRequest) 객체 - Jquery에서 제공하는 XHR 객체를 의미 - 기존의 XHR 객체를 jqXHR객체 대체해서 사용 가능 - 기존의 XHR 객체에서 처리하던 HTTP 요청 헤더, 타임아웃 등을 처리할 수 있음 - 추가로 요청 콜백도 처리 가능(ajax에서 사용하던 콜백 함수와 동일한 기능들의 콜백이 존재) - jqXHR 콜백함수 .done() : $.ajax()의 success 콜백 기능 ex) jqXHR.done(function(data, status, xhr) { console.log(data); }); .fail() : $.ajax()의 error 콜백 기능(요청 실패 시에 실행) ex) jqXHR.fail(function(xhr, statu.. 2021. 10. 6. [Ajax] 11. Ajax 단축 메소드 Ajax 단축 메소드 - Ajax 사용하기는 편하지만 설정값들이 많고 복잡하여서 간편하게 사용할 수 있는 단축메소드를 지원 1. 단축 메소드 종류 $.get() : GET 방식의 요청을 전송하고 서버로부터 데이터를 받아옴 $.get(url, successCallback); ex) $.get("/contact/list.do", function(data) { console.log(data); }); $.get(url, data, successCallback); ex) $.get("/contact/list.do", { pageno : 1, pagesize : 15 }, function(data) { console.log(data); }); $.get({ settings }); ex) $get({ url : ".. 2021. 10. 6. [Ajax] 10. Ajax 콜백 함수 1. Ajax 콜백 함수 정리 $.ajax({ /*콜백 함수 영역*/ beforeSend : function(xhr, settings) { alert("전송 전 실행"); } : 요청을 서버로 전송하기 전에 실행되는 콜백 함수 xhr : XHR 객체 settings : ajax 호출 시 지정한 설정 값들 success : function(data, status, xhr) { alert("요청 성공!"); console.log(data); } : 요청이 성공했을 때 실행되는 콜백 함수 data : 서버로부터 응답받은 데이터 status : 요청 상태 정보를 문자열로 전달받는 매개변수("success") try catch finally : try구문에 해당하는 영역 error : function(xhr, s.. 2021. 10. 6. [Ajax] 09. Ajax Bootstrap table로 나타내기 1. Ajax - bootstrap_table 주소록 조회 번호 이름 전화 주소 2021. 10. 6. [Ajax] 08. Ajax POST방식과 Json POST방식 1. Ajax - POST2 방식 등록 삭제 2. Ajax - POST_Json 등록 삭제 2021. 10. 6. [Ajax] 07. Ajax 동기 방식(Sync)과 비동기 방식(Async) 1. Ajax - 동기방식 (Sync) 조회 삭제 2. Ajax - 비동기 방식 (Async) 조회 삭제 * 모든 페이지 요청을 한번에 받음 * 1번 페이지에 2초 쓰레드 걸어주어서 응답이 가장 늦음 2021. 10. 6. 이전 1 2 다음 반응형
