잡동사니에도 사랑을

Ajax를 활용하여 다른 페이지에 있는 데이터를 받아오는 방법을 알아보자. Ajax 외 일반적인 웹은 새로고침을 할 때 새로운 URL이 호출되면서 페이지가 새로 뿌려진다. 하지만 Ajax를 이용하면 비동기 통신 방식으로 로드해올 수 있다. 예제를 살펴보자. ////////exam01.html $.ajax() 함수를 사용한 텍스트 읽기 *주요 내용 → url을 통해 외부 데이터인 txt파일을 불러온다. ////////common.css 더보기 @charset "UTF-8"; html, body { width: 100%; height: 100%; } h1.title { font-size: large; border-left: 10px solid #7BAEB5; border-bottom: 1px solid #7..

Ajax의 개요 (Asynchronous Javascript And Xml) - 비동기 Javascript와 XML을 말한다. (응답을 기다리지 않는데, 응답이 바로 올 때도 있고 그렇지 못할 때도 있어서 순서대로 처리하지 않는다) (Java는 동기 - 서버에게 요청을 하면 반드시 응답을 받아야 한다. / 순서대로 처리할 수 있다.) - Javascript로 원격지로부터 데이터를 읽어오는데 필요한 처리 기술들의 집합체를 뜻한다. - HTML, CSS, DOM, **XMLHttpRequest 객체의 집합체이다. - XMLHttpRequest 객체를 사용하여 서버로부터 데이터를 가져오고, 그 내용을 페이지에 반영해 주기 위해, HTML태그 요소를 제어하는 DOM객체에 대한 처리 및 CSS처리를 병행한다. -..

////////UserUpdateService.java package user.service; import java.util.HashMap; import java.util.Map; import java.util.Scanner; import user.bean.UserDTO; import user.dao.UserDAO; public class UserUpdateService implements UserService { @Override public void execute() { Scanner scan = new Scanner(System.in); System.out.print("수정 할 아이디 입력 : "); String id = scan.next(); UserDAO userDAO = UserDAO.getI..

[21.10.18] exam02(07_jQueryEvent) - 댓글 입력, 저장, 삭제 jQuery Comment 작성자 덧글 내용 on() 함수 - 동적 - 앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다. - 사용법 ; 새로 추가될 요소에 대한 이벤트이기 때문에 이 이벤트가 정의되는 시점에서는 대상이 존재하지 않는다. 따라서 이 이벤트는 document 객체에 설정해야 한다. //$(부모) $(document).on( "이벤트", "셀렉터", function() { ... 이벤트 처리 ... }); --> [결과]

[21.10.18] exam01(07_jQueryEvent) - 아이디, 비밀번호 유효성 검사 & 일정 시간 후 서버로 정보 보내기 로그인 아이디 비밀번호 [결과]

[21.10.18] exam05(06_jQueryDOM) - 카테고리(목록) 추가 및 삭제 [결과]

[21.10.18] exam04(06_jQueryDOM) - 선택된 항목만 내용 표시 HTML5 jQuery Bootstrap3 [결과]

[21.10.18] exam03(06_jQueryDOM) - 마우스 올려 서브메뉴 펼치기 메뉴A 서브메뉴A 서브메뉴A 서브메뉴A 메뉴B 서브메뉴B 서브메뉴B 서브메뉴B 메뉴C 서브메뉴C 서브메뉴C 서브메뉴C [결과]