<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>페이지 내용을 동적으로 바꾸는 예제</title>
<script language="JavaScript">
<!--
var xmlHttp;
var requestType;
// XHR 객체를 생성한다.
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
// 조회를 한다.
function doSearch() {
requestType = document.getElementById("부서").value;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "dynamicContent.xml", true);
xmlHttp.send(null);
}
// 요청 처리 콜백 함수
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearPreviousResults();
parseResults();
}
}
}
// 이전 결과를 지운다.
function clearPreviousResults() {
var header = document.getElementById("header");
if(header.hasChildNodes()) {
header.removeChild(header.childNodes[0]);
}
var tableBody = document.getElementById("resultsBody");
while(tableBody.childNodes.length > 0) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
// 요청의 결과를 테이블 형태로 동적으로 출력한다.
function parseResults() {
var results = xmlHttp.responseXML;
var code = "";
var departmentName = "";
var position = "";
var name = "";
// 모든 사원노드를 배열로 가져옵니다.
var staffs = results.getElementsByTagName("사원");
for(var i = 0; i < staffs.length; i++) {
// 부모노드의 부서 코드를 가져옵니다.
code = staffs[i].parentNode.getAttribute("code");
// 부서를 선택했을 경우 코드가 다르면 건너뜁니다.
if(requestType != "all" && code != requestType) continue;
// 부서명, 직위, 이름 정보를 가져옵니다.
departmentName = staffs[i].parentNode.getAttribute("title");
position = staffs[i].getAttribute("position");
name = staffs[i].childNodes[0].nodeValue;
addTableRow(departmentName, position, name);
}
var header = document.createElement("h2");
var headerText = document.createTextNode("조회결과:");
header.appendChild(headerText);
document.getElementById("header").appendChild(header);
document.getElementById("resultsTable").setAttribute("border", "1");
}
// 테이블의 TR 엘리먼트를 주어진 내용으로 생성한다.
function addTableRow(departmentName, position, name) {
// 테이블 행 엘리먼트를 생성합니다.
var row = document.createElement("tr");
// 테이블 데이터 엘리먼트를 생성해서 추가합니다.
var cell = createCellWithText(departmentName);
row.appendChild(cell);
cell = createCellWithText(position);
row.appendChild(cell);
cell = createCellWithText(name);
row.appendChild(cell);
// 테이블에 행을 추가합니다.
document.getElementById("resultsBody").appendChild(row);
}
// 테이블의 TD 엘리먼트를 주어진 text 를 내용으로 하여 생성한다.
function createCellWithText(text) {
// 테이블 데이터 엘리먼트를 생성합니다.
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
//-->
</script>
</head><body>
<h3>페이지 내용을 동적으로 바꾸는 예제</h3>
<h1>부서별 조회</h1>
<form action="#">
부서
<select id="부서">
<option value="all">전체</option>
<option value="sale">영업부</option>
<option value="insa">인사부</option>
</select>
<input type="button" value="Search" onclick="doSearch();"/>
</form>
<span id="header"></span>
<table id="resultsTable" width="500" border="0">
<tbody id="resultsBody">
</tbody>
</table></body></html>
