본문 바로가기

Ajax & jQuery

Ajax - 댓글 기능이 있는 게시판 만들기(미) 실제폴더: /ibbs, 가상주소(uri): /comm 개발환경: struts2+spring2.0, 톰캣 v8.5, iBatis, 이클립스, JDK 7.x - struts-ibbs.xml ( BoardAction.java, CommentList.java 1. DB설정 ibbs_sqlMap.xml (sqlMapConfig.xml 에 등록) 2. xml파일 struts-ibbs.xml (struts.xml 에 등록) 3. Action클래스 생성 BoardAction.java, CommentAction.java 4. 게시글 관련 jsp 페이지 list.jsp, created.jsp, article.jsp 5. 댓글관련 jsp 페이지 - article.jsp (게시글 부분과 공통) - ajax를 통해 데이터를 반.. 더보기
Ajax - 방명록 만들기 (댓글창 만들기) *Ajax를 이용하여 새로고침(Reload) 하지 않아도 글 작성 시 밑에 조회가 되도록 구현해보자 *Redirect를 쓰지 않아야 한다. Redirect 시키면 새로고침 됨 개발 환경 톰캣 8.5, 이클립스, 오라클, JDK, Struts2, Spring2.0, iBatis 구현 순서 1. DB 생성 - iguest (테이블명) 2. DTO 생성 - GuestDTO.class 3. 페이징 처리를 위한 클래스 생성 - MyUtil.class (이전 페이징 처리와 조금 달라짐) 4. [jsp 페이지] - 방명록 작성/조회 페이지 - guest.jsp - DB에 접근하여 결과 뿌려주는 페이지 - list.jsp 5. Action 클래스 생성 - GuestAction.java 6. [iBatis] - igue.. 더보기
Ajax(5) - Document Object Model (DOM), DOM API를 이용한 XML 파싱 (pdf파일로부터 내용 더 보완하기) 1. DOM API를 이용해서 HTML 화면변경을 하는 예제 - changeHTMLUsingDOM.jsp 2. DOM API를 이용해서 XML 파싱 DOM과 XML DOM, 즉 Document Object Model은 문서를 객체로 표현하기 위한 표준으로서 HTML 이나 XML등의 문서를 객체로 표현할 때 사용되는 API이다. 자바스크립트 ,자바,C,C# 등다양한 언어에서 DOM API를 제공하고있다. DOM은 문서를 트리구조로 표현하기 때문에 쉽게 이해할수있다. XMLHttpRequest 객체는 응답텍스트대신 XML 응답결과를 사용할수있는데,이 때 DOM API를 사용해서 서버가 생성한 XML로부터 데이터를 추출할 수 있다. DOM API의 주요 인터페이스 DOM API에서 모든 건 Node로 표현된다.. 더보기
Ajax(4) - JSON형식 데이터를 읽어와 Javascript의 객체 생성 하기 Ajax를 이용하여 JSON 데이터 읽어와서 Javascript의 객체 생성하기 1. JSON 기초 실습 - jsonUse.jsp 2. JSON 방식으로 미리 만들어둔 상태의 데이터를 읽어오기 - newsTitleJSON.jsp, newsTitleJSON_ok.jsp 3. DB에서 가져온 데이터(TEXT형태)를 JSON으로 변환하여 읽어오기 - newsTitleJSON2.jsp, newsTitleJSON2_ok.jsp 4. Javascript에 클래스기능 만들기 (원래는 없음) - member.js, log.js 5. Javascript에 패키지 만들기- member_json.js, memberJSONClass.jsp 1. db에 저장된 text 데이터를 읽어낸다 2. text 데이터를 xml로 바꾼다 .. 더보기
Ajax(3) - CSV 형식 데이터 읽기, 검색 시 제시어 기능 1. CSV 읽어오기 ex. 뉴스 헤드라인 목록 - newsTitleCSV.jsp 2. 검색 시 제시어 기능 만들기 - suggestClient.jsp 의 의미 jsp는 톰캣서버에 올라가서 자기 로컬 경로에 class, java파일이 생성됨 => class파일 들어가보면 Init() Destroy() Service() 있음. 이렇게 만들면 그 안의 내용이 Service() 메소드 안에 생성이 됨 - 메소드 안에 또 메소드를 정의할 때는 이 안에 쓸 수 없음 Service() 바깥에 생김 => 전역변수로 생성된다는 소리 httpRequest.js - XMLHttpRequest 객체 생성 파일 (공통으로 쓸 것) function getXMLHttpRequest(){ //IE인 경우 if(window.Acti.. 더보기
JQuery 셋팅 및 예제 (10.18필기보고보완) 1. JQuery 셋팅 2. (JQuery 예제) Javascript와 JQuery 비교 - test1. jsp , test2. jsp 1. JQuery 셋팅 JQuery는 엘리먼트를 선택하여 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 두가지로 나뉘어져 있음 - Script 파트와 GUI 파트 1) Javascript 파트 다운받기 https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during developm.. 더보기
Ajax(2) - get/post 방식 비교, ID 유효성 검사, javascript를 이용한 Ajax 구현 - Ajax는 필수기술 중 하나, 매우 중요! 네이버에서 자동으로 바뀌는 부분들은 다 Ajax로 구현됨 - jQuery도 부트스트랩처럼 CDN이 있음. jQUERY 사이트 > view source - 나중엔 Javascript만을 이용해 server, view도 컨트롤 할 수 있음 1. Ajax 의 get방식과 post 방식 비교 2. Ajax를 활용한 ID 유효성 검사 3. Javascript를 이용한 Ajax 구현 1. Ajax - Get방식과 Post 방식 비교 ajaxGetPost.jsp ajaxGetPost ajaxGetPost_ok.jsp 데이터를 바꿔도 잘 바뀌지 않음 // 클라이언트 캐쉬 제거 작업 response.setHeader("Pragma","no-cache"); response.s.. 더보기
Ajax (1) - 데이터 전송받기 (javascript,jQuery,Ajax) 오늘 진행 할 예제 test1.jsp => javascript로만 Ajax를 구현 test2.jsp => JQuery의 Ajax 기능을 통해서 Ajax를 구현 (많이씀) test3.jsp => JQuery로만 Ajax를 구현 test4.jsp => JQuery의 Ajax를 이용하여 get,post방식으로 데이터 넘기기 test5.jsp => jQuery의 Ajax를 이용하여 JSON 형식으로 데이터 주고받기 1. JavaScript를 이용해 Ajax를 구현하는 예제 JavaScript를 이용하여 서버로 보내는 HTTP request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요 XMLHttpRequest 객체 생성 xmlReq = new XMLHttpRequest(); // .. 더보기