level 1 --------------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>Dynamic Contents</title>
<script src="http://common.ticketlink.co.kr/ajax/prototype.js"></script>
<script type="text/javascript">
//var xmlHttp;
//function createXMLHttpRequest(){
//if ( window.ActiveXObject) {
//xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
// }
//else if (window.XMLHttpRequest){
//xmlHttp = new XMLHttpRequest();
// }
//}
//function doSearch(){
//createXMLHttpRequest();
//xmlHttp.onreadystatechange = handleStateChange;
//xmlHttp.open("GET","test.xml", true);
//xmlHttp.send(null);
//}
//function handleStateChange(){
//if(xmlHttp.readyState == 4){
//if(xmlHttp.status == 200){
//clearPreviouseResults();
//parseResults();
//}
//}
//}
//Use prototype Ajax.Request
function doSearch()
{
var url = 'test.xml';
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: 'null',
onComplete: parseResults,
onFailure: reportError
});
}
//alert error message when Request error
function reportError(request)
{
alert('Sorry. There was an error.');
}
function clearPreviouseResults(){
//document.getElementById() : change $()
var header = $("header");
if (header.hasChildNodes()){
header.removeChild(header.childNodes[0]);
}
//document.getElementById() : change $()
var tableBody = $("resultsBody");
while (tableBody.childNodes.length > 0 ) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
function parseResults(response){
clearPreviouseResults();
//var results = xmlHttp.responseXML;
var results = response.responseXML;
var property = null;
var address = "";
var price = 0;
var comments = "";
var properties = results.getElementsByTagName("property");
for (var i = 0; i <properties.length; i++){
property = properties[i];
address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
//if (price >= parseInt(document.frm.startPrice.value) ){ : change $F()
if (price >= parseInt ($F('startPrice')) ){
addTableRow(address, price, comments);
}
}
var header = document.createElement("h2");
var headerText = document.createTextNode("Results");
header.appendChild(headerText);
document.getElementById("header").appendChild(header);
document.getElementById("resultsTable").setAttribute("border", "1");
}
function addTableRow(address, price, comments) {
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell);
cell = createCellWithText(price);
row.appendChild(cell);
cell = createCellWithText(comments);
row.appendChild(cell);
//document.getElementById("resultsBody").appendChild(row); : change $()
$("resultsBody").appendChild(row);
}
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
</script>
</head>
<body>
<h1> Search Real Estate Listing</h1>
<form name="frm">
Show listings from
<select name="startPrice" size="5">
<option value="50000">50,000</option>
<option value="100000">100,000</option>
<option value="150000">150,000</option>
</select>
to
<select name="endPrice" size="5">
<option value='100000'>100,000</option>
<option value='150000'>150,000</option>
<option value='200000'>200,000</option>
</select>
<input type="button" value="Search" onClick="doSearch()" />
</form>
<span id ="header"></span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody"></tbody>
</table>
</body>
</html>
2008년 1월 25일 금요일
SCRIPT - AJAX : PROTOTYPE WITH SAMPLE DYNAMIC CONTENTS (JSP)
피드 구독하기:
댓글 (Atom)
댓글 1개:
now I stay in touch!
댓글 쓰기