⁂ AJAX/: 기본 익히기

[AJAX] #5 - 검색 기능 구현하기

1. 검색 기능 구현하기 이번엔 검색 기능을 구현해보고자 한다. 한 글자를 쓸 때마다 그것에 반응하여 검색 결과를 매핑시켜 출력시키는 형태로 출력을 해보자! 1) JSP 페이지 교재 검색 우선 keyup() 메소드를 사용하여 키보드로 무언가가 입력되었을 때마다 알람창이 뜨게 하였다. keyup() : 누른 키에서 손을 뗄 때 실행 keydown() : 키보드를 누를 때 실행. 계속 누르고 있다면 계속 실행 keypress() : 키보드를 누를 때 실행. 계속 누르고 있다면 계속 실행 keydown() 과 keypress()의 차이점 : keypress()는 입력할 수 있는 키를 눌렀을 때만 반응한다. 예를 들어 방향키, delete 같은 test 입력에 반영되는 키가 아니라면 이벤트가 반응하지 않는다. ..

[AJAX] #4 - AJAX로 사진 띄우기

1. 결과물부터 확인하기 2. JSP 페이지 교재 선택 --선택 -- spring Android jQuery javaScript 3. 컨트롤러 package kr.co.itwill.book; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @RequestMapping("/book") @Controller public class BookCont { public Boo..

[AJAX] #3 - ajax로 ID 중복확인 하기(쿠키 사용)

1. ID 중복확인하기 회원 등록 폼 아이디 아이디 중복확인 버튼을 누르면 panel 이란 아이디를 가진 div 공간에 중복확인 결과를 출력 시켜보자. 1) $.post() / $.serialize() : 아이디 중복확인하기 - 형식 $.post("요청명령어",전달값,callback함수) - 구현 1) : jsp 페이지 코딩 $("#btn_userid").click(function(){ $.post( "idcheckproc.do"// 요청 명령어 ,"userid="+ $("#userid").val()// 전달값 ,responseProc// 콜백함수 ); }); // click() end function responseProc(result){ $("#panel").empty(); $("#panel").ht..

[AJAX] #2 AJAX 기본 문법 뜯어보기

1. AJAX를 사용해보자 AJAX를 사용해보자! AJAX Introduction W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 우선 스프링에서 AJAX를 활용하기 위해 필요한 jquery와 jquery.cookie js파일을 프로젝트에 추가해주었다. AJAX를 사용하는 것은 자바스크립트의 XMLHttpRequest객체를 이용하지만, 사용문법이 복잡해서 jQuery 오픈..

[AJAX] #1 AJAX의 이해

1. AJAX의 예시 AJAX에 대해 이야기를 하기 전에 이것을 생각해보자. 내가 어느 사이트에 댓글을 보고 싶어서 가려진 댓글을 더보기를 눌렀다. 그러자 촤라락, 사이트가 펼쳐지며 여러 댓글들이 보이게 되었다. 분명 사이트에 변화가 생겼지만, 웹페이지가 다른 페이지로 넘어가진 않았다. 그저 댓글들이 들어있는 페이지가 쭈욱 하고 더 생긴다. 이런 기능을 구현하게 해주는 것이 바로 AJAX! 2. AJAX 뜯어보기 AJAX(Asynchronous Javascript And XML)란 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능으로 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다 여기서 비동기 방식이란 웹페이지를 리로드 하지 않고 데이터를 불러오는 방식(댓..