Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
621 lines (610 sloc) 25.6 KB
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Building a RESTful Web Service</title>
<meta name="description" content="A sample page that uses RESTful web services using HTTP support methods such as GET, PUT, POST, and DELETE." />
<link rel="stylesheet" type="text/css" href="http://www.aspectran.com/assets/css/styles_aspectran.css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:500,500i,700" rel="stylesheet">
<script src="http://www.aspectran.com/assets/js/modernizr.js"></script>
<script src="http://www.aspectran.com/assets/js/jquery.js"></script>
<script src="http://www.aspectran.com/assets/js/fastclick.js"></script>
<link rel="mask-icon" href="http://www.aspectran.com/assets/img/aspectran-logo.svg" color="#4B555A" />
<link rel="apple-touch-icon" sizes="57x57" href="http://www.aspectran.com/assets/img/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="http://www.aspectran.com/assets/img/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://www.aspectran.com/assets/img/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="http://www.aspectran.com/assets/img/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://www.aspectran.com/assets/img/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="http://www.aspectran.com/assets/img/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://www.aspectran.com/assets/img/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="http://www.aspectran.com/assets/img/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="http://www.aspectran.com/assets/img/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="http://www.aspectran.com/assets/img/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="16x16" href="http://www.aspectran.com/assets/img/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="http://www.aspectran.com/assets/img/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="http://www.aspectran.com/assets/img/favicon-96x96.png" />
<meta name="msapplication-TileImage" content="http://www.aspectran.com/assets/img/ms-icon-144x144.png" />
<meta name="msapplication-TileColor" content="#4B555A" />
<meta name="theme-color" content="#4B555A" />
<!-- Facebook Optimization -->
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Quick Start Guide" />
<meta property="og:description" content="Aspectran is a lightweight Java application framework for building Web, console-based, and embedded applications." />
<meta property="og:url" content="http://www.aspectran.com/getting-started/quickstart/" />
<meta property="og:site_name" content="Aspectran" />
<!-- Search Engine Optimization -->
<link type="text/plain" rel="author" href="http://www.aspectran.com/humans.txt" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66807210-2', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
</head>
<body id="top-of-page" class="article" itemscope itemtype="http://schema.org/WebPage">
<nav id="navigation" class="no-js">
<div class="title-bar" data-responsive-toggle="gnb-menu" data-hide-for="large">
<div class="title-bar-left">
<a class="logo" href="http://www.aspectran.com/" title="Aspectran"><img src="http://www.aspectran.com/assets/img/aspectran-icon.png" alt="Aspectran"/></a>
</div>
<div class="title-bar-center">
<a href="#top-of-page">Aspectran</a>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle></button>
</div>
</div>
<div class="top-bar" id="gnb-menu">
<div class="row">
<div class="top-bar-logo">
<a class="logo" href="http://www.aspectran.com/" title="Aspectran"><img src="http://www.aspectran.com/assets/img/aspectran-icon.png" alt="Aspectran"/></a>
</div>
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu data-close-on-click-inside="false">
<li class="active">
<a href="/">Examples</a>
<ul class="menu" data-submenu data-close-on-click-inside="false">
<li><a href="/gs-rest-service/gs-rest-service.html">RESTful Web Service</a></li>
</ul>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu data-close-on-click-inside="false">
</ul>
<div class="quick-search-box show-for-large">
<form name="google_quick_search">
<div class="input-group">
<input class="input-group-field" type="text" name="keyword" placeholder="Search">
<div class="input-group-button">
<button type="submit" class="button"><i class="fi-magnifying-glass"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row quick-search-box hide-for-large">
<div class="small-12 columns">
<form name="google_quick_search">
<div class="input-group">
<input class="input-group-field" type="text" name="keyword" placeholder="Search">
<div class="input-group-button">
<button type="submit" class="button">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
<section itemscope itemtype="http://schema.org/Article">
<div id="masthead">
<div id="forkme-ribbon" style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px;">
<a href="https://github.com/aspectran/aspectran" target="_blank">
<img src="http://aral.github.com/fork-me-on-github-retina-ribbons/right-white@2x.png" width="149" height="149" alt="Fork me on GitHub"></a>
</div>
<div class="row">
<div class="small-12 columns">
<header>
<p class="subheadline" itemprop="alternativeHeadline"></p>
<h1 itemprop="headline">Building a RESTful Web Service</h1>
<p class="teaser" itemprop="description">
A sample page that uses RESTful web services using HTTP support methods such as GET, PUT, POST, and DELETE.
</p>
</header>
</div>
</div>
<div class="row breadcrumbs-bar">
<div class="columns">
<nav role="navigation" aria-label="You are here:">
<ul class="breadcrumbs" itemprop="breadcrumb">
<li><a href="/">Examples</a></li>
<li><span class="show-for-sr">Current: </span> <span class="current">RESTful Web Service</span></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="row">
<div class="t10 large-4 columns" style="position:relative;">
<h2 style="margin:0;">Customer List</h2>
<span id="total" class="float-right warning badge" style="font-size:2em;position:absolute;top:0;right:0;">0</span>
<div id="customer-list-board" style="clear:both;border-radius:3px;margin-bottom:.5em;">
<select name="customerList" size="12" style="height:auto;background-image:none;margin:0;">
</select>
</div>
<div class="float-left">
<button id="refresh" type="button" class="button warning">Refresh</button>
</div>
<div class="float-right">
<button id="add" type="button" class="button">Add</button>
<button id="delete" type="button" class="button alert">Delete</button>
</div>
</div>
<div class="t10 large-8 columns" style="position:relative;">
<h2 style="margin:0;">Customer Details</h2>
<span id="cust-no" class="float-right success badge" style="font-size:2em;position:absolute;top:0;right:0;">0</span>
<div id="details" class="panel radius">
<form>
<label>
No.
<input type="text" name="id" disabled="disabled"/>
</label>
<label>
Name
<input type="text" name="name" maxlength="30"/>
</label>
<label>
Age
<input type="number" name="age" min="1" max="199" maxlength="3" oninput="if(this.value.length >= this.maxLength) this.value = this.value.slice(0, this.maxLength);"/>
</label>
<legend>Approval Status:
<input type="radio" name="approvalStatus" id="approved" value="Y" required><label for="approved">Approved</label>
<input type="radio" name="approvalStatus" id="denied" value="N" required><label for="denied">Denied</label>
</legend>
</form>
</div>
<div class="float-right t10">
<button id="save" type="button" class="success button">Save</button>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div id="describe" class="input-group">
<span class="input-group-label" style="white-space:nowrap;"></span>
<input class="input-group-field" type="text" value="" readonly>
</div>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="large-12 columns" style="position:relative;">
<span id="response-status-code" class="float-left badge" style="font-size:1.7em;position:absolute;top:0;left:0;margin-left:.32em;margin-top:-.36em;">200</span>
<pre id="response-text" style="padding-left:4em;min-height:100px;max-height:300px;"></pre>
</div>
</div>
<script>
var backend = "";
$(function() {
$("select[name=customerList]").change(function() {
$("#details form, #cust-no").fadeOut(300);
getCustomer($(this).val());
$("#details form, #cust-no").fadeIn(200);
});
$("button#refresh").click(function() {
$("#customer-list-board, #total").fadeOut(300);
getCustomerList();
$("#customer-list-board, #total").fadeIn(200);
});
$("button#add").click(function() {
$("select[name=customerList] option:selected").removeAttr("selected");
clearForm();
$("input[name=name]").focus();
});
$("button#save").click(function() {
saveCustomer();
});
$("button#delete").click(function() {
deleteCustomer();
});
$("input[name=approvalStatus]").click(function() {
updateApproval($(this).val() == "Y");
});
$("input").focus(function() {
$(this).removeClass("is-invalid-input");
});
getCustomerList();
});
function getCustomerList() {
$.ajax({
type: "GET",
url: backend + "/gs-rest-service/customers",
dataType: "json",
success: function(data, textStatus, xhr) {
describe("GET", this.url, xhr);
var list = $("select[name=customerList]");
list.empty();
for(var i = 0; i < data.customers.length; i++) {
var id = data.customers[i].id;
var name = data.customers[i].name;
list.append($("<option/>").attr("value", id).text("#" + id + ". " + name));
}
clearForm();
},
error: function(xhr, status, error) {
alert("code: " + xhr.status + "\nmessage: " + xhr.responseText + "\nerror: " + error);
}
});
}
function getCustomer(id) {
$("input.is-invalid-input").removeClass("is-invalid-input");
$.ajax({
type: "GET",
url: backend + "/gs-rest-service/customers/" + id,
dataType: "json",
success: function(data, textStatus, xhr) {
describe(this.type, this.url, xhr);
$("input[name=id]").val(data.customer.id);
$("input[name=name]").val(data.customer.name);
$("input[name=age]").val(data.customer.age);
$("input[name=approvalStatus][value=" + (data.customer.approved ? "Y" : "N") + "]").prop("checked", true);
$("#cust-no").text(data.customer.id);
},
error: function(xhr, status, error) {
alert("code: " + xhr.status + "\nmessage: " + xhr.responseText + "\nerror: " + error);
}
});
}
function saveCustomer() {
if($("input[name=name]").val() == "") {
$("input[name=name]").addClass("is-invalid-input");
}
if($("input[name=age]").val() == "") {
$("input[name=age]").addClass("is-invalid-input");
}
if($("input.is-invalid-input").size() > 0) {
return;
}
var type, url;
var id = $("input[name=id]").val();
if(id == "") {
type = "POST";
url = backend + "/gs-rest-service/customers";
} else {
type = "PUT";
url = backend + "/gs-rest-service/customers/" + id;
}
$.ajax({
type: type,
url: url,
data: {
name: $("input[name=name]").val(),
age: $("input[name=age]").val(),
approved: $("input[name=approvalStatus]:checked").val()
},
dataType: "json",
success: function(data, textStatus, xhr) {
describe(this.type, this.url, xhr);
if(id == "") {
$("#total").fadeOut(300);
$("select[name=customerList]").append($("<option/>").attr("value", data.id).text("#" + data.id + ". " + data.name));
$("select[name=customerList]").val(data.id);
$("input[name=id]").val(data.id);
$("#cust-no").text(data.id);
$("#total").text($("select[name=customerList] option").size());
$("#total").fadeIn(200);
} else {
$("select[name=customerList] option[value=" + data.id + "]").text("#" + data.id + ". " + data.name);
}
$("select[name=customerList] option:selected").css("color", "blue");
},
error: function(xhr, status, error) {
alert("code: " + xhr.status + "\nmessage: " + xhr.responseText + "\nerror: " + error);
}
});
}
function deleteCustomer() {
var id = $("input[name=id]").val();
if(!id) {
alert("Please select a customer to remove.");
return;
}
$.ajax({
type: "DELETE",
url: backend + "/gs-rest-service/customers/" + id,
dataType: "json",
success: function(data, textStatus, xhr) {
describe(this.type, this.url, xhr);
$("select[name=customerList] option[value=" + id + "]").remove();
clearForm();
},
error: function(xhr, status, error) {
alert("code: " + xhr.status + "\nmessage: " + xhr.responseText + "\nerror: " + error);
}
});
}
function updateApproval(approved) {
var id = $("input[name=id]").val();
if(!id) {
return;
}
$.ajax({
type: "PUT",
url: backend + "/gs-rest-service/customers/" + id + "/approve/" + (approved ? "true" : "false"),
dataType: "json",
success: function(data, textStatus, xhr) {
describe(this.type, this.url, xhr);
},
error: function(xhr, status, error) {
alert("code: " + xhr.status + "\nmessage: " + xhr.responseText + "\nerror: " + error);
}
});
}
function clearForm() {
$("input[name=id]").val("");
$("input[name=name]").val("");
$("input[name=age]").val("");
$("input[name=approvalStatus]").attr("checked", false);
$("#total").text($("select[name=customerList] option").size());
$("#cust-no").text("-");
$("input.is-invalid-input").removeClass("is-invalid-input");
}
function describe(method, url, xhr) {
$("#describe span").text(method);
$("#describe input").val(url);
$("#response-status-code").fadeOut(300);
$("#response-status-code").text(xhr.status);
$("#response-text").text(xhr.responseText);
if(xhr.status == "201") {
$("#response-text").prepend("<strong>Location: " + xhr.getResponseHeader('Location') + "</strong>\n");
}
$("#response-status-code").fadeIn(200);
}
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</section>
<div id="up-to-top" class="row">
<div class="small-12 columns" style="text-align: right;">
<a class="iconfont" href="#top-of-page">&#xf108;</a>
</div><!-- /.small-12.columns -->
</div><!-- /.row -->
<footer id="footer-content">
<div id="footer">
<div class="row">
<div class="medium-2 large-1 columns hide-for-small-only t5">
<h5><a class="logo" href="http://www.aspectran.com/info/" title="Aspectran"><img src="http://www.aspectran.com/assets/img/aspectran-logo-grey-x100.png" width="100" height="100" title="Aspectran"/></a></h5>
</div>
<div class="medium-4 large-4 columns">
<a href="http://www.aspectran.com/info/"><h5>About Aspectran</h5></a>
<p>
<a href="http://www.aspectran.com/info/">Aspectran is a lightweight Java application framework for building Web, console-based, and embedded applications.</a>
</p>
</div>
<div class="small-6 medium-3 large-3 large-offset-1 columns">
<h5>Navigation</h5>
<ul class="no-bullet">
<li class="">
<a href="/getting-started/" title="">Getting-Started</a>
</li>
<li class="">
<a href="/docs/" title="">Documentation</a>
</li>
<li class="" >
<a href="/guides/" title="">Guides</a>
</li>
<li class="" >
<a href="/projects/" title="">Projects</a>
</li>
</ul>
</div>
<div class="small-6 medium-3 large-3 columns">
<h5>Services</h5>
<ul class="no-bullet">
<li>
<a href="http://www.aspectran.com/support/" title="Aspectran Support">Support</a>
</li>
<li>
<a href="http://www.aspectran.com/feed.xml" title="Subscribe to RSS Feed">RSS</a>
</li>
<li>
<a href="http://www.aspectran.com/atom.xml" title="Subscribe to Atom Feed">Atom</a>
</li>
<li>
<a href="http://www.aspectran.com/sitemap.xml" title="Sitemap for Google Webmaster Tools">sitemap.xml</a>
</li>
</ul>
</div>
</div>
</div>
<div id="subfooter">
<nav class="row b30">
<section id="subfooter-left" class="medium-6 columns credits">
<p>© 2008–2017 Juho Jeong. All rights reserved.</p>
</section>
<section id="subfooter-right" class="medium-6 columns social-icons">
<ul>
<li><a href="http://github.com/topframe" target="_blank" class="icon-github" title="Code and more ..."></a></li>
<li><a href="http://twitter.com/aspectran" target="_blank" class="icon-twitter" title="Always the latest news from aspectran there on Twitter"></a></li>
<li><a href="http://www.facebook.com/aspectran" target="_blank" class="icon-facebook" title="Let's be friends!"></a></li>
</ul>
</section>
</nav>
</div>
</footer>
<script src="http://www.aspectran.com/assets/js/foundation.min.js"></script>
<script src="/assets/js/jquery.backstretch.js"></script>
<script>
$(document).foundation();
$(document).ready(function() {
var navFixed = false;
var navHeight = $("#masthead").height() - $("#navigation").height();
var $win = $(window);
$win.scroll(function() {
var scrollTop = $win.scrollTop();
if(navFixed) {
if(scrollTop < navHeight) {
navFixed = false;
$("#navigation").removeClass("fixed");
$("#navigation").hide();
$("#navigation").slideDown(220);
}
} else {
if(scrollTop > navHeight) {
navFixed = true;
$("#navigation").addClass("fixed");
$("#navigation").hide();
$("#navigation").fadeIn(450);
}
}
});
if($win.scrollTop() > navHeight) {
$win.scroll();
}
/* google search */
$("form[name=google_quick_search]").submit(function(event) {
window.open('https://www.google.com/search?q=' + this.keyword.value + '+site:http%3A%2F%2F0.0.0.0%3A4000');
event.preventDefault();
});
});
</script>
<script>
$(document).ready(function() {
$("#masthead h1, article h1, article h2, article h3, article h4, article h5, article h6").each(function(index, item) {
var tagn = item.localName;
var anchor = "top-of-page";
if(tagn != "h1") {
anchor = "anchor-" + (index + 1);
$(this).before("<a class='toc-anchor " + anchor + "' id='" + anchor + "' name='" + anchor + "'></a>");
}
$("#toc ul").append("<li class='toc-" + tagn + "'><a anchor='" + anchor + "' href='#" + anchor + "'>" + $(item).text() + "</a></li>");
});
});
</script>
<script>
$(document).ready(function() {
$(".lazy-sticky").each(function() {
var $win = $(window);
var $this = $(this);
var topNavHeight = 60;
var upToTopHeight = $("#up-to-top").height() + 30 + 60;
var footerHeight = $("#footer-content").height() + upToTopHeight;
var baseOffsetTop = $this.offset().top - topNavHeight;
var offsetTop = 0;
var thisHeight = $this.height();
var winHeight = $win.height();
var scrollTimer = null;
var immediate = false;
$this.find("#toc ul a").click(function(e) {
immediate = true;
var anchor = $(this).attr("anchor");
if(anchor != "top-of-page") {
setTimeout(function() {
var offset = $("#" + anchor).offset();
if(offset) {
immediate = true;
$win.scrollTop(offset.top - topNavHeight);
}
}, 100);
}
});
$win.scroll(function() {
var scrollTop = $win.scrollTop();
if(scrollTop < baseOffsetTop) {
if(scrollTimer) {
clearInterval(scrollTimer);
scrollTimer = null;
}
scrollTimer = setInterval(function() {
if(offsetTop != 0) {
$this.css({
top: 0
});
}
offsetTop = 0;
clearInterval(scrollTimer);
scrollTimer = null;
immediate = false;
}, immediate ? 250 : 500);
} else {
if(immediate || (scrollTop > baseOffsetTop + offsetTop + thisHeight - 20) || (scrollTop < baseOffsetTop + offsetTop)) {
var tocOffsetLeftBase = $this.offset().left;
if(tocOffsetLeftBase > 100) {
if(scrollTimer) {
clearInterval(scrollTimer);
scrollTimer = null;
}
scrollTimer = setInterval(function() {
scrollTop = $win.scrollTop();
if(scrollTop < baseOffsetTop) {
scrollTop = 0;
} else {
scrollTop = scrollTop - baseOffsetTop + 10;
}
if(scrollTop > $(document).height() - footerHeight - thisHeight - baseOffsetTop - topNavHeight) {
scrollTop = $(document).height() - footerHeight - thisHeight - baseOffsetTop - topNavHeight;
}
offsetTop = scrollTop;
$this.css({
position: "relative"
});
$this.animate({
top: scrollTop + "px"
}, 300);
clearInterval(scrollTimer);
scrollTimer = null;
winHeight = $win.height();
thisHeight = $this.height();
footerHeight = $("#footer-content").height() + upToTopHeight;
immediate = false;
}, immediate ? 250 : 500);
}
}
}
});
$win.resize(function() {
var tocOffsetLeftBase = $this.offset().left;
if(tocOffsetLeftBase <= 100) {
clearInterval(scrollTimer);
$this.css("top", 0);
} else {
$win.scroll();
}
});
setTimeout(function() {
if($win.scrollTop() > baseOffsetTop) {
offsetTop = $win.scrollTop();
$win.scroll();
}
}, 150);
});
});
</script>
<script>
/* Creating custom :external selector */
$.expr[':'].external = function(obj) {
return !obj.href.match(/^javascript\:/)
&& !obj.href.match(/^mailto\:/)
&& (obj.hostname != location.hostname);
};
$(function(){
/* Add 'external' CSS class to all external links */
$('a:external').addClass('external');
/* turn target into target=_blank for elements w external class */
$(".external").attr('target','_blank');
})
</script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-66807210-2'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>