Created
March 12, 2014 18:08
-
-
Save cleuton/9512708 to your computer and use it in GitHub Desktop.
HTML 5 / jQuery client for a Jersey / Jetty enabled web service
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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á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ç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