Skip to content

Instantly share code, notes, and snippets.

@cleuton cleuton/index.html
Created Mar 12, 2014

Embed
What would you like to do?
HTML 5 / jQuery client for a Jersey / Jetty enabled web service
<!DOCTYPE html>
<html>
<head>
<title>Microblog</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var sessao = null;
var usuario = null;
var password = null;
$(document).ready(function(){
$.postJSON = function(url, data, callback) {
return jQuery.ajax({
'type': 'POST',
'url': url,
'contentType': 'application/json',
'data': JSON.stringify(data),
'dataType': 'json',
'success': callback
});
};
$("#logon").click(function(){
if (!$("#username").val()) {
window.alert("Informe o username");
}
else {
if (!$("#password").val()) {
window.alert("Informe a password");
}
else {
$.get("/mb/server/session/"
+ $("#username").val()
+ "/"
+ $("#password").val(),
function(responseTxt,statusTxt,xhr) {
if (xhr.status == 200) {
sessao = responseTxt;
alert("Logon ok");
showUser();
updateMessages();
}
else {
alert("Erro: " + statusTxt);
}
}
);
}
}
});
$("#refresh").click(function(){
updateMessages();
});
});
function showUser() {
$.postJSON("/mb/server/userdata", sessao,
function(resposta) {
usuario = resposta;
$("#usuario").text(usuario.username);
}
);
}
function updateMessages() {
if (!sessao) {
alert("Tem que logar antes!");
}
else {
$("#mensagens").empty();
$("#mensagens").text("... aguardando ...");
$.postJSON("/mb/server/messages", sessao,
function(resposta) {
var lista = resposta;
$("#mensagens").empty();
for (var x=0; x < lista.length; x++) {
var mensagem = lista[x];
$("#mensagens").append("<hr>" + new Date(mensagem.map.data.map.$date) + ", " + mensagem.map.texto);
}
}
);
}
}
</script>
</head>
<body>
<h1>Microblog</h1>
<br/><span id="usuario">[nenhum usu&aacute;rio logado]</span>
<br/>Username: <input type="text" name="username" id="username" />
Password: <input type="password" name="password" id="password" />
<input type="button" id="logon" value="Logon" />
<hr/>
<input type="button" id="refresh" value="Refresh" />
<div id="mensagens"><span>[fa&ccedil;a logon para ver as mensagens]</span></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.