반응형 전체 글 보기299 [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. [Ajax] 06. GET 방식과 POST방식 1. GET 방식 조회 삭제 2. POST 방식 조회 삭제 3. Ajax - GET 방식 조회 삭제 4. Ajax - POST 방식 등록 삭제 2021. 10. 6. [Ajax] 05. Ajax 기본형과 설정 값들 1. Ajax 기본형 $.ajax({ settings : 설정 값들 (서버에 요청할 url, 메소드 방식, 비동기 여부 등등) }); - Ajax 호출 후 리턴 값은 jqXHR(jquery XMLHTTPRequest) 객체 2. Ajax 설정 값들 $.ajax({ /*설정 값들 영역*/ url : 요청할 서비스 url('/list.do'), type : 메소드 타입 지정('POST', 'GET', 'PUT', 'DELETE', 기본 값 : 'GET'), async : 비동기 방식/동기 방식 지정(true : 비동기 방식, false : 동기 방식), data : 서버로 전달할 데이터를 입력. 문자열, 배열, 객체 형식 지원 문자열인 경우 직접 url 인코딩을 해야됨(한글/특수문자 유니코드로 변경) ex).. 2021. 10. 6. [Ajax] 04. Ajax XMLHttpRequest(XHR) 객체 2. XMLHttpRequest(XHR) 객체 1. XMLHttpRequest(XHR) 객체 - 서버와 상호작용하기 위해 사용 - 서버와 데이터를 주고 받기 위해 사용하는 객체 - 전체 페이지의 새로고침없이 데이터를 받아올수 있음 - 데이터 단위로 서버에 요청을 하기 때문에 화면의 일부분만 새로고침 가능 2. Ajax - XHR 객체를 기본적으로 사용 - 브라우저 -> Ajax -> XHR 객체 -> 서버와 통신 3. XHR 객체 직접사용 - 소스코드가 복잡하고 어려움 (단점) - 많이 사용되지 않음 4. Ajax를 통한 XHR 객체 사용 - Ajax를 통해 XHR 객체로 접근하는 방식을 주로 사용 - Ajax -> XHR 객체 -> 서버와 통신 - XHR 객체를 직접 사용하는 것보다 소스코드 구성이 간.. 2021. 10. 6. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음 반응형
