bibaramxml 이라기보다는 xhtml 인듯도한대.. 현제 이게시판 첨부기능 없으니 소스를 직접올립니다.
출처는 IBM 뉴스 레터 developerWorks 에서 수신한 메일입니다.
원본의 링크 주소 http://211.218.146.2:8777/servlet/LinkTraceEM?SEND_MODE=R&CAMPAIGN_NO=000000000001045&RESULT_SEQ=1133327903581333&PRODCD=&START_DATE=20051130141800&END_DATE=20051207141800&CUSTOMER_EMAIL=imas64cGljY29tQGFuaWZvci5uZXQ=&CUSTOMER_ID=imas64MTA5OTA=&CUSTOMER_NM=imas64sO2wtLTU&LINK_SEQ=15&LINK_URL="http://www.ibm.com/developerworks/edu/wa-dw-wa-ajax-i.html"&LINKTITLE=7_기타%20유용한%20자료_튜토리얼_Web%20Architecture%20Approved%20dW%20main%20page%20highlight-%20Build%20apps%20using%20Asynchronous%20JavaScript%20with%20XML%20(AJAX)&End=1
내용이 길고 복잡하니.. 먼저 정리합니다.
응답쪽 설계는 servlet 인대 별거없고 단순히 일반적인 출력물을 만들어 HttpStream에 뿌려주기만 합니다.
먼저 눈길을 끄는 코드는 아래이고
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "/Library/LibraryServlet";
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
이거내요, 이거 javascript 코드내용입니다.
위 링크가서 war 페키지 받어서 tomcat5에 설치하면 데모가 바로 테스트 가능하니 해보시면 될긋
<script>
var req;
var url;
function startup() {
document.forms[0].subscriptionID.focus = true;
}
function init() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "/Library/LibraryServlet";
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
function validate(formObj) {
init();
req.onreadystatechange = subscriptionValidator;
req.send("subscriptionID=" + formObj.subscriptionID.value);
}
function displayList(field) {
init();
titles.innerHTML = " ";
req.onreadystatechange = listHandler;
req.send("select=" + escape(field));
}
function displayTitles(formObj) {
init();
var index = formObj.list.selectedIndex;
var val = formObj.list.options[index].value;
req.onreadystatechange = titlesHandler;
req.send("list=" + val);
}
function subscriptionValidator() {
if (req.readystate == 4) {
if (req.status == 200) {
var messageObj = req.responseXML.getElementsByTagName("message")[0];
var message = messageObj.childNodes[0].nodeValue;
if (message == "true") {
msg.innerHTML = "Subscription is valid";
document.forms[0].order.disabled = false;
} else {
msg.innerHTML = "Subscription not valid";
document.forms[0].order.disabled = true;
}
}
}
}
function titlesHandler() {
if (req.readystate == 4) {
if (req.status == 200) {
var titles = document.getElementById("titles");
var indexObj = req.responseXML.getElementsByTagName("index")[0];
var index = indexObj.childNodes[0].nodeValue;
var temp = "<select name="titles" multiple>";
for (var i=0; i<index; i++) {
var listObj = req.responseXML.getElementsByTagName("list")[i];
temp = temp + "<option value=" + i +">" + listObj.childNodes[0].nodeValue + "</option>";
}
temp = temp + "</select>";
titles.innerHTML = temp;
}
}
}
function listHandler() {
var prefix;
if (req.readystate == 4) {
if (req.status == 200) {
var list = document.getElementById("list");
var authorOption = document.getElementById("select")
if (authorOption.checked) {
prefix = "A";
} else {
prefix = "P";
}
var list = document.getElementById("selectionList");
var indexObj = req.responseXML.getElementsByTagName("index")[0];
var index = indexObj.childNodes[0].nodeValue;
var temp = "<select name="list" onchange="displayTitles(this.form)">";
for (var i=0; i<index; i++) {
var listObj = req.responseXML.getElementsByTagName("list")[i];
temp = temp + "<option value=" + prefix + i +">" + listObj.childNodes[0].nodeValue + "</option>";
}
temp = temp + "</select>";
list.innerHTML = temp;
}
}
}
</script>
///////////////////////////////////////////////////////////////////////////////
// 여까지 js 파일내용이고
// 이하는 html 페이지임다
<html>
<head>
<script type="text/javascript" src="/Library/library.js" >
</script>
</head>
<body onload="startup()">
<%@ page import="java.util.*" %>
<font face="Arial,Helvetica,Verdana" size="3">
<form name="LibraryForm" action="/Library/LibraryServlet">
<b>Enter Subscription ID: </b>
<input type="text" name="subscriptionID" onblur="validate(this.form)"/>
<!-- Font for Status Message -->
<font face="Arial,Helvetica,Verdana" size="2" color="#FF0000">
<b id="msg"></b>
</font>
<!-- Font End -->
<hr>
<table height="300" width="600" border="1">
<tr>
<td valign="top" width="40%">
<!-- Font for Radio Buttons -->
<font face="Arial,Helvetica,Verdana" size="2">
<input type="radio" name="select" value="author" onclick="displayList('author')" />
<b>By Author</b>
<input type="radio" name="select" value="pubs" onclick="displayList('pubs')" />
<b>By Publisher</b>
</font>
<!-- Font End -->
<br><br>
<div id="selectionList">
</div>
</td>
<td width="20%"> </td>
<td valign="top" width="40%">
<b>Select Title: </b> <br>
<div id="titles"></div>
</td>
</tr>
</table>
<hr>
<input type="submit" name="order" value="Order" disabled />
<input type="reset" name="cancel" value="Cancel" />
</form>
</font>
</body>
</html>
