• Rich Client UI를 개발하는 다양한 기능을 지원 – HTML 문서 탐색 , 이벤트처리 ,애니메이션 , ajax 상호작용 • HTML에서 구조와 동작을 분리하여 작성 – 구조 : HTML, 동작 : Javascript – 강력한 selector지원 • 크로스 브라우저 지원 • 메소드 체인 • 플러그인 지원
기본 문법 • jQuery 라이브러리 등록 – <script>로 다운받은 파일 등록 – URL로 등록 • <script src="http://code.jquery.com/jquery-latest.js"> • Selector함수 – jQuery 함수를 적용할 요소를 찾는 함수 – jQuery(“selector”) 또는 $(“selector”) • Selector함수.jQuery커맨드 – jQuery커맨드는 jQuery가 지원하는 메소드임 – jQuery Chain • 예 – jQuery(“#layer”).html(“안녕”); – $(“p”).css(“color”, “red”).css(“background”, “blue”);
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <a href="/ajax_category/controller?command=first_category">카테고리요청</a> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body>
<c:if test="${requestScope.error_message!=null }"> 실행 도중 오류가 발생했습니다.<br> 오류 내용 ${error_message } </c:if> <a href='/${initParam.context_root }/index.jsp'>메인페이지로 이동</a> </body> </html>
function selectRargeCategory() { var sel = document.getElementById("first_category"); createXhr(); xhr.onreadystatechange = callback; var queryString = "command=second_category&id="+ sel.options[sel.selectedIndex].value; xhr.open("GET", "/ajax_category/controller?" + queryString, true); xhr.send(null);
// alert(sel.options[sel.selectedIndex].value);
}
function callback() { //서버로부터 응답이 왔다면 일한다. if (xhr.readyState == 4) {//응답을 다 받은 경우 if (xhr.status == 200) {//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = JSON.parse(resTxt);
var sel = document.getElementById("second_category");
//중분류 항목삭제 while(sel.hasChildNodes()){ sel.removeChild(sel.firstChild); } //추가 sel[0] = new Option("중분류","default"); for ( var i = 0; i < jobj.length; i++) { sel.options[i + 1] = new Option(jobj[i].name); sel.options[i + 1].value = jobj[i].id; } //소분류 항목삭제 var sel1 = document.getElementById("third_category"); var childCnt = sel1.children.length-1; for ( var i = 0; i < childCnt; i++) { // alert(thead.firstChild.nodeName); sel1.removeChild(sel1.lastChild); } } else { alert("요청처리가 정상적으로 안되었습니다.\n" + xhr.status); } } } function getThird() { var sel = document.getElementById("second_category"); createXhr(); xhr.onreadystatechange = callback1; var queryString = "command=third_category&id="+ sel.options[sel.selectedIndex].value; xhr.open("GET", "/ajax_category/controller?" + queryString, true); xhr.send(null); //alert(sel.options[sel.selectedIndex].value); } function callback1() { //서버로부터 응답이 왔다면 일한다. if (xhr.readyState == 4) {//응답을 다 받은 경우 if (xhr.status == 200) {//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = JSON.parse(resTxt);
var sel = document.getElementById("third_category"); var childCnt = sel.children.length; for ( var i = 1; i < childCnt; i++) { // alert(thead.firstChild.nodeName); sel.removeChild(sel.lastChild); } for ( var i = 0; i < jobj.length; i++) { sel.options[i + 1] = new Option(jobj[i].name); sel.options[i + 1].value = jobj[i].id; } } else { alert("요청처리가 정상적으로 안되었습니다.\n" + xhr.status); } } } function getProduct() { var sel = document.getElementById("third_category"); createXhr(); xhr.onreadystatechange = callback2; var queryString = "command=get_product_list&id="+ sel.options[sel.selectedIndex].value; xhr.open("GET", "/ajax_category/controller?" + queryString, true); xhr.send(null); // alert(sel.options[sel.selectedIndex].value); } function callback2() { //서버로부터 응답이 왔다면 일한다. if (xhr.readyState == 4) {//응답을 다 받은 경우 if (xhr.status == 200) {//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = eval("(" + resTxt + ")");
var thead = document.getElementById("thead");
var childCnt = thead.children.length; for (var i = 0; i < childCnt; i++) { thead.removeChild(thead.firstChild); }
var tr = document.createElement("tr"); var td1 = document.createElement("th"); var td2 = document.createElement("th"); var td3 = document.createElement("th"); var td4 = document.createElement("th"); var td5 = document.createElement("th");
var xhr; function createXhr(){ if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xhr = new XMLHttpRequest(); } }
DROP TABLE PRODUCT; DROP TABLE THIRD_CATEGORY; DROP TABLE SECOND_CATEGORY; DROP TABLE FIRST_CATEGORY; CREATE TABLE FIRST_CATEGORY( FIRST_CATEGORY_ID VARCHAR2(20) PRIMARY KEY, FIRST_CATEGORY_NAME VARCHAR2(100) NOT NULL );
INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-1', '매직스테이션 DM-C210-PA01S', 580000, '삼성전자', '인텔 / 펜티엄 / E5400 (2.7GHz) / 2GB / DDR3 / 320GB / DVD 레코더 / 슬림 / 인텔 / GMA X4500 / 기본 메모리 공유 / 1Gbps 유선랜 / 7 홈 프리미엄 / DVI / 멀티 리더기 / 모니터 미포함 / 색상: 블랙', 'T-1'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-2', '매직스테이션 DB-R130-PA01S', 545000, '삼성전자','인 텔 / 펜티엄 / E5300 (2.6GHz) / 2GB / DDR2 / 320 GB / DVD 레코더 / 슬림 / 엔비디아 / 지포스 7100 / 기본 메모리 공유 / 1Gbps 유선랜 / 7 홈 프리미엄 / 멀티 리더기 / 모니터 미포함 / 색상: 블랙', 'T-1'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-3', 'XPION Mini X30MT-ACA201', 480000, 'LG전자', '인텔 / 아톰 / 230 (1.6GHz) / 2GB / DDR2 / 250GB / 컴팩트 / 엔비디아 / ION / 기본 메모리 공유 / 100Mbps 유선랜 / Vista 홈 베이직 / 모니터 미포함 / 색상: 블랙', 'T-2'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-4', 'XPION S30NP-AR5701', 1370000, 'LG전자', '인 텔 / 코어i5 / i5-750 (2.66 GHz) / 3GB / DDR3 / 640GB / DVD 레코더 / 미니타워 / 엔비디아 / 지포스 9600 GT / 512MB / 1Gbps 유선랜 / 7 홈 프리미엄 / 멀티 리더기 / 모니터 미포함', 'T-2'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-5', 'SENS NT-R480-PS55A', 1381000, '삼성전자', '인 텔 / 코어i5 / i5-520M (2.4GHz) / LED 백라이트 / 14인치 / 1366x768 / 500GB / 4GB DDR3 / DVD레코더 / 7 홈프리미엄 / 엔비디아 / 지포스 GT 330M / 1GB GDDR3 / 2.3Kg / 6cell / 1Gbps 유선랜 / 802.11n 무선랜 / HDMI / D-SUB / 웹캠 / 블루투스 / e-SATA / 멀티 리더기 / 블록 키보드 / 색상: 레드', 'T-6'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-6', 'SENS NT-R530-JA42S', 711000, '삼성전자', '인 텔 / 펜티엄 / T4300 (2.1GHz) / LED 백라이트 / 15.6인치 / 1366x768 / 250GB / 2GB DDR3 / DVD레코더 / 7 홈프리미엄 / 인텔 / GMA 4500MHD / 시스템 메모리 공유 / 2.5Kg / 6cell / 100Mbps 유선랜 / 802.11n 무선랜 / HDMI / D-SUB / 웹캠 / 멀티 리더기 / 숫자 키패드 / 색상: 블랙', 'T-6'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-7', 'ThinkPad Edge E320 1298-RK9', 591000, '레노버', '인텔 / 코어i5-2세대 / i5-2450M (2.5GHz) / LED 백라이트 / 13.3인치 / 1366x768 / 320GB / 2GB / DDR3 / 옵션(선택사항) / OS 미포함 / AMD(ATI) / 라데온 HD6630 / 1GB DDR3 / 1.86Kg / 6cell / 1Gbps 유선랜 / 802.11n 무선랜 / 블루투스 3.0 / 웹캠 / HDMI / D-SUB / USB 2.0 / e-SATA / 블록 키보드 / 멀티 리더기 / 색상: 블랙 / 13.3인치 가성비 No.1 ', 'T-4'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-8', 'ThinkPad X220 4286-AL8', 1311000, '레노버', '인텔 / 코어i5-2세대 / i5-2520M (2.5GHz) / LED 백라이트 / 눈부심 방지 / 회전 LCD / 광시야각 / 12.5인치 / 1366x768 / 320GB / 4GB / DDR3 / 옵션(선택사항) / 7 프로페셔널 / 인텔 / HD Graphics / 시스템 메모리 공유 / 1.46Kg / 6cell / 802.11n 무선랜 / 1Gbps 유선랜 / 블루투스 3.0 / 웹캠 / 디스플레이 / D-SUB / USB 2.0 / 익스프레스 카드 / 지문 인식 / 방수 키보드 / 멀티 리더기 / IPS패널 / 색상: 블랙 ', 'T-4'); INSERT INTO PRODUCT (PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE, PRODUCT_MAKER, PRODUCT_INFO, THIRD_CATEGORY_ID)VALUES ('P-9', 'ThinkPad X220 4286-PH3', 1611000, '레노버', '인텔 / 코어i7-2세대 / i7-2640M (2.8GHz) / 광시야각 / LED 백라이트 / 눈부심 방지 / 회전 LCD / 12.5인치 / 1366x768 / 320GB / 8GB / DDR3 / 옵션(선택사항) / 7 프로페셔널 / 인텔 / HD 3000 / 시스템 메모리 공유 / 1.46Kg / 6cell / 1Gbps 유선랜 / 802.11n 무선랜 / 블루투스 3.0 / 웹캠 / 디스플레이 / D-SUB / USB 2.0 / USB 3.0 / 지문 인식 / 방수 키보드 / 멀티 리더기 / IPS패널 / 색상: 블랙', 'T-4');
select * from PRODUCT;
select * from FIRST_CATEGORY; select * from THIRD_CATEGORY where SECOND_CATEGORY_ID='S-1'; select * from SECOND_CATEGORY where FIRST_CATEGORY_ID='F-2'; select * from PRODUCT where THIRD_CATEGORY_ID='T-2';
jquery-1.7.2.min.js
ajax_category.zip
product_category_logical.pdf
