숍위즈[www.shop-wiz.com] - 오픈소스의 시작

Web	www.shop-wiz.com

[1536]














액션스크립트

전통적인 웹 프로그램의 경우 추가 프로세스는 다음과 같이 진행된다.

1. 전체 리스트를 조회하는 화면에서 추가 버튼 클릭

2. 추가할 항목의 세부사항을 입력받을 화면

3. 입력을 마치면 저장 버튼

4. 입력이 정상적으로 끝났다는 화면 혹은 맨 처음 전체 리스트 화면.

이것처럼 추가 프로세스를 구현하기 위해서 항목을 입력받는 페이지를 추가로 구현해야 한다. 하지만 ajax 를 이용하여 한 페이지 내에서 모든 것을 다 구현할 수 있다. 추가 프로세스가 진행되고 난 후 필요한 부분만 refresh 되는 건 당연하다. ajax 를 이용해서 추가로직만 구현해본 예제를 살펴보자.

그럼 해당 소스코드를 살펴보자.

[샘플구현보기]

<!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/xhtml">
<head>
<title>Employee List</title>

if(name == "" || title == "" || department == "") {
return;
}

var url = "example14.php?"
+ createAddQueryString(name, title, department, "add")
+ "&ts=" + new Date().getTime();

createXMLHttpRequest();
xmlHttp.onreadystatechange = handleAddStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function clearInputBoxes() {
document.getElementById("name").value = "";
document.getElementById("title").value = "";
document.getElementById("dept").value = "";
}

function deleteEmployee(id) {
deleteID = id;

var url = "example14.php?"
+ "action=delete"
+ "&id=" + id
+ "&ts=" + new Date().getTime();

createXMLHttpRequest();
xmlHttp.onreadystatechange = handleDeleteStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function updateEmployeeList() {
var responseXML = xmlHttp.responseXML;

var status = responseXML.getElementsByTagName("status").item(0).firstChild.nodeValue;
status = parseInt(status);
if(status != 1) {
return;
}

var row = document.createElement("tr");
var uniqueID = responseXML.getElementsByTagName("uniqueID")[0].firstChild.nodeValue;
row.setAttribute("id", EMP_PREFIX + uniqueID);

row.appendChild(createCellWithText(name));
row.appendChild(createCellWithText(title));
row.appendChild(createCellWithText(department));

var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "Delete");
deleteButton.onclick = function () { deleteEmployee(uniqueID); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);

document.getElementById("employeeList").appendChild(row);
updateEmployeeListVisibility();
}

function createCellWithText(text) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(text));
return cell;
}

function handleDeleteStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
deleteEmployeeFromList();
}
else {
alert("Error while deleting employee.");
}
}

}

function deleteEmployeeFromList() {
var status = xmlHttp.responseXML.getElementsByTagName("status").item(0).firstChild.nodeValue;
status = parseInt(status);
if(status != 1) {
return;
}

var rowToDelete = document.getElementById(EMP_PREFIX + deleteID);
var employeeList = document.getElementById("employeeList");
employeeList.removeChild(rowToDelete);

updateEmployeeListVisibility();
}

<body>
<h1>Employee List</h1>

<form action="#">
<table width="80%" border="0">
<tr>
<td>Name: <input type="text" id="name"/></td>
<td>Title: <input type="text" id="title"/></td>
<td>Department: <input type="text" id="dept"/></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Add" onclick="addEmployee();"/>
</td>
</tr>
</table>
</form>

<span id="employeeListSpan" style="display:none;">
<h2>Employees:</h2>

<table border="1" width="80%">
<tbody id="employeeList"></tbody>
</table>
</span>
</body>
</html>

<example14.html 의 모든 소스 코드>

<?
class xmlClass{
var $items = array();
var $task = "";

function outputXml(){
header("Content-type: text/xml");
printf("<?xml version=\"1.0\" encoding=\"%s\" ?>\n","EUC-KR");
print("<rss version=\"2.0\">\n");
print("<result>\n");

$this->printChannel();
print("</result>\n");
print("</rss>\n");
}

function printChannel(){
foreach($this->items as $item){
foreach ($item as $name => $value){
$value = htmlspecialchars($value);
printf("<%s>%s</%s>\n",$name,$value,$name);
}
}
}

function addItem($item){
array_push($this->items,$item);
}

function MakeUniqueKey(){
$MicroTsmp = split(" ",microtime());
return $UniqueKey = $MicroTsmp[0]+$MicroTsmp[1];
}

function makexml(){

switch ($this->action) {
case "add":
$this->addItem(array("uniqueID"=> $this->MakeUniqueKey(),"status"=> "1"));
break;
case "delete":
$this->addItem(array("status"=> "1"));
break;
default:
break;

}

$this->outputXml();

}

}

$myxml = new xmlClass();
$myxml->name = $name;
$myxml->title = $title;
$myxml->department = $department;
$myxml->action = $action;
$myxml->makexml();
?>

<example14.php 의 모든 소스 코드>

위 예제에 대한 소스를 보면 쉽게 알겠지만 직원의 정보를 입력하고 추가 버튼을 누르면 파라미터 쿼리 스트링을 생성해서 GET/비동기 방식으로 서버로 보낸다. 서버에서는 해당 정보를 DB 에 insert 가상 로직을 수행하고 그 결과를 XML 로 만들어서 클라이언트로 전송한다. XHR 객체는 해당 XML 정보로 부터 정보를 다시 추출하고 테이블에 추가하는 형태의 흐름으로 전개된다. 삭제 로직도 추가 로직과 거의 비슷하게 동작한다.

[샘플구현보기]

위 예제중에 한가지 살펴볼 것이 있다.

deleteButton.onclick = function () { deleteEmployee(uniqueID); };

이 부분의 코드를 다음과 같이 사용할 수도 있을 것이다.

deleteButton.setAttibute("onclick", "deleteEmployee('"+uniqueID+"');");

하지만 IE 및 FireFox 두개의 브라우저에서 제대로 작동을 하지 않았다. 하지만 다행히 처음코드를 사용하면 모두 정상적으로 잘 작동 하였다. AJAX 를 사용하면서 가장 큰 골치거리가 바로 이런 코드이다. 하루빨리 W3C 표준을 구현하도록 브라우저 전영에도 각성이 촉구된다.