JavaScript/Ajax6 Ajax) 검색어 자동완성 기능 (Autocomplete) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 검색어 자동완성 https://jqueryui.com/autocomplete/ Autocomplete | jQuery UI Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr jqueryu.. 2022. 7. 12. Ajax) text/html 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML text.jsp csv No 이름 프로필 구분 document.querySelector("#btn-celeb-html").addEventListener('click', (e) => { $.ajax({ url : '/celeb/html', method : 'GET', success(html) { console.log(html); document.querySelector("#tbl-celeb tbody").innerHTML = html; }, error(jqxhr, statusText, err) { console.log(jaxhr, statusText, err); } }); }); C.. 2022. 7. 12. Ajax) text/csv 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. CSV text.jsp csv CelebCsvServlet @WebServlet("/celeb/csv") public class CelebCsvServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throw.. 2022. 7. 12. Ajax) text/plain 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. text text.jsp 검색 $.ajax({})안에 필요한 데이터들을 담아 전송합니다. 서버 응답이 오류없이 넘어오면 success의 매개변수로 담기게 되고, 서버 응답 시 오류가 발생하면 error()가 실행됩니다. SearchServlet @WebServlet("/jquery/search") public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServlet.. 2022. 7. 8. Ajax) 동기와 비동기 차이, Javascript로 비동기처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 동기와 비동기 차이 사용자가 서버에 요청/서버 응답까지의 시간을 기다리느냐 기다리지 않느냐에 대한 차이가 있는 것을 알 수 있습니다. javascript로 처리하는 비동기식 - 폼 전송은 무조건 동기식 요청! - 서버는 동기적 처리 / 비동기적 처리를 구분하지 않음 GET방식 helloAjax.jsp Ajax - js 검색 폼 제출은 무조건 동기적 통신이기 때문에 submit 이벤트를 이용해서 비동기 처리를 할 수 있습니다. 객체 생성 후, readyState에 대한 change 핸들러를 바인딩 처리하였으며 open의 매개인자로 전송방식과 url을 넘겨주었습니다. readyState는 0 .. 2022. 7. 8. Ajax) 정리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. Ajax # Ajax * Asynchronous JavaScript and XML 이란 용어로써 2005년 2월 제시 제임스 카렛이 처음 사용하면서 알려지게 되었음 * 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법으로 비동기식 요청을 보내는데 필요한 기술을 말함 ## 동기식/비동기식이란? 동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이함. 만약 서버에서 호출된 결과까지의 시간이 지연이 생길 경우 웹에서는 아무런 작동 없이 기다려야함. 새로운 콘텐츠를 추가, 불러오기 위해서는 페이지를 리로드 하거나 이동해야함. 이에.. 2022. 7. 8. 이전 1 다음
