목록Ajax (20)
hyeonga_code
- Ajax를 활용한 댓글 구현하기 - 테이블 생성하기 ===== 1 2 3 4 5 6 7 8 9 CREATE TABLE TABLEMENT ( ID NUMBER(10,0) NOT NULL ENABLE, NAME VARCHAR2(20) NOT NULL ENABLE, CONTENT VARCHAR2(4000) NOT NULL ENABLE, CONSTRAINT TABLEMENT_PK PRIMARY KEY (ID) ENABLE ); /* Table TABLEMENT이(가) 생성되었습니다. */ - 시퀀스 생성하기 ===== 1 2 3 4 5 6 7 8 9 10 11 12 CREATE SEQUENCE TABLEMENT_SEQ MINVALUE 1 MAXVALUE 9999999 INCREMENT BY 1 START W..
- XMLHttpRequest 객체를 사용하여 XML 파일을 텍스트 형식으로 표시 - 원하는 이미지를 ch03 폴더에 저장합니다. [ httpRequestSample.jpg ] - 메인 페이지의 버튼을 클릭하는 경우 변경되는 내용을 받을 메소드 파일을 작성합니다. - ch03 > 'ajaxEx01.js' JavaScript 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 /** * */ // XMLHttpRequest객체를 저장할 변수를 전역변수로 선언합니다. var xhrObject; function createXHR() { // XM..
- XMLHttpRequest 객체는 서버로부터 XML 문서를 응답으로 읽어올 수 있습니다. - 서버에서 읽어온 XML 문서는 DOM 트리로 변환되어 저장됩니다. - DOM API를 사용하여 서버가 생성한 XML 문서로부터 원하는 정보를 읽어올 수 있습니다. 1) 서버에서 XML 응답 생성하기 - webapp > ch03 > 'books.jsp' jsp 파일 생성하기 ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 첫 번째 book 태그 title 첫 번째 book 태그 content 두 번째 book 태그 title 두 번째 book 태그 content 세 번째 book 태그 title 세 번째 book 태그 content - 'books.jsp'파일을 실행합..
- XSL/T를 사용하여 XML을 HTML로 변환하기 - 서버에서 XML 문서를 읽어온 다음 필요한 작업을 정보를 읽어와 화면에 출력합니다. - 노드로부터 하나씩 얻어와 코드를 생성하여 화면을 구현하는 경우 복잡한 코드가 됩니다. - XML 문서를 XSL을 사용하여 읽어와 원하는 문서로 변환합니다. - XSL/T를 사용하여 XML 을 HTML로 변환하기 위해서는 변환 규칙을 담고 있는 XSL 파일을 작성해야 합니다. - 앞서 사용한 'books.jsp'파일을 HTML 코드로 변환하고 싶은 경우 - ch03 > 'books.xsl' xsl 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29..
- webapp > ch03 폴더 생성 - ch03 > 'changeUsingDOM.html' html 파일 생성하기 ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 DOM을 사용한 변경 var count = 0; function appendItem() { count++; // div 태그가 생성됩니다. var newItem = document.createElement("div"); // div 태그의 id 속성을 item_1로 설정합니다. newItem.setAttribute("id", "item_" + coun..
- DOM API 를 사용하여 문서 구조 변경하기 - Document 인터페이스의 Element 노드 생성 함수 Element createElement(String tagName) - 지정한 태그 이름을 갖는 Element 노드를 생성합니다. Text createText(String text) - text 값으로 갖는 Text 노드를 생성합니다. - Node 인터페이스의 DOM 트리 변경 관련 함수 Node insertBefore(Node newChile, Node refChild) - 현재 노드의 자식 노드인 refChild 노드의 previousSibing 자리에 newChild 노드를 삽입합니다. Node replaceChild(Node newChild, Node oldChild) - 현재 노드의 ..
- DOM_Document Objcet Model - 문서를 객체로 표현하기 위한 표준입니다. - HTML, XMl 등의 문서를 객체로 표현할 때 사용하는 API입니다. - DOM API는 문서를 트리 구조로 표현합니다. - document : DOM 트리에서 문서 전체를 나타냅니다. - root : document 노트 바로 파위에 위치합니다. - DOM API를 사용한 노드 접근 - 구성 요소 - Document - 전체 문서 - Element - 각 태그를 의미합니다. - 태그에 해당하는 노드가 매핑됩니다. - Text - 문자열 데이터를 의미합니다. - CDataSection - XML 문서의 CDATA 영역의 문자열 값을 저장합니다. - Node 인터페이스 - Element, Document, ..
-- 종합 예제 - 입력한 검색어를 서버에 전송합니다. - 전달 받은 검색어를 활용하여 제시어 목록을 추출합니다. - 제시어를 지정한 양식으로 클라이언트에 전송합니다. - 응답 텍스트를 분석하여 제시어 목록을 화면에 출력합니다. - webapp > ch02 > 'suggest.jsp' jsp 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
- 응답 결과를 작성합니다. - webapp > ch02 > 'getMaxTemperature.jsp' jsp 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 'maxTemperature.html' html 파일을 작성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 최고기온 // get 방식으로 jsp 파일을 불러오며 함수를 호출합니다. function loadList() {..
- 웹 서버의 응답 텍스트 값이 HTML 코드입니다. - 응답 텍스트를 innerHTML을 사용하여 화면에 반영합니다. - 웹 서버의 응답 텍스트가 임의의 포맷이 지정되어 있고 자바 스크립트는 그 응답 텍스트를 분석합니다. - 분석한 HTML 코드를 생성한 뒤 innerHTMl을 사용하여 화면에 반영합니다. - 응답 결과를 작성합니다. - webapp > ch02 > 'getTitles.jsp' ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ch02 > 'news.html' html 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30..