AJAX Con JSP y Servelts - Jarroba

14/7/2016
AJAXconJSPyServeltsJarroba
AJAXconJSPyServelts
El
cdigo
y
el
proyecto
de
esta
(https://github.com/jarroba/AJAX_JSP_Servelts_Example).
entrada
lo
podis
descargar
pulsando
AQUI
En esta entrada vamos a poner un sencillo ejemplo de como incluir AJAX

(AsynchronousJavaScript And XML) en JSP y Servelts. AJAX nos permitir recargar contenido en un
fragmento(enun<div>)delapginawebsinqueestatengaqueserrecargadadenuevo,locualnos
permitirhacerunawebmsamigableymscmodadeverparaelusuario.
EsteejemploquemostramossehahechoconelfindemostrarelfuncionamientodelAJAX,por
tantoyparanoensuciarelcdigodelejemplo,novamosaprogramarqueelcontenidodelformularioes
correcto y dems comprobaciones, simplemente lo hacemos para que se vea el flujo del programa y
comofuncionanaqulosServelts,luegotenisqueservosotroslosqueprogramislalgicadevuestra
web.
Elejemploquevamosarealizaraqu,vaaconsistirenrellenarunsencilloformulariodenombre,
apellidoyedad,yaldarlealbotnAadirseaadirnesosdatosaunatabladeformaasncrona,sinque
lawebtengaqueserrecargada,talycomomostramosacontinuacin:
(http://jarroba.com/wpcontent/uploads/2013/12/Ejemplo_Servelts_JSP_AJAX_jarroba.com_.png)
http://jarroba.com/ajaxconjspyservelts/
1/10
14/7/2016
Elficheroindex.jspeselsiguiente:
<%@pagelanguage="java"contentType="text/html;charset=UTF8"
pageEncoding="ISO88591"%>
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html
4/loose.dtd">
<html>
<head>
<metahttpequiv="ContentType"content="text/html;charset=ISO88591">
<title>AJAXJSPServelts</title>
<scriptsrc="http://code.jquery.com/jquerylatest.js">
</script>
<script>
$(document).ready(function(){
$('#submit').click(function(event){
Usodecookies
varnombreVar=$('#nombre').val();
Estesitiowebutilizacookiesparaqueustedtengalamejorexperienciadeusuario.Sicontinanavegandoestdandosuconsentimientoparalaaceptacindelasmencionadascookiesylaaceptacin
varapellidoVar=$('#apellido').val();
denuestrapolticadecookies(http://jarroba.com/faq/)
varedadVar=$('#edad').val();
(http://jarroba.com/faq/)
//Sienvezdeporpostloqueremoshacerporget,cambiamosel
ACEPTAR
$.postpor$.get
$.post('ActionServlet',{
nombre:nombreVar,
apellido:apellidoVar,
edad:edadVar
},function(responseText){
$('#tabla').html(responseText);
});
});
});
</script>
</head>
<body>
<h2>EjemplodeAJAXconJSPyServelts</h2>
<formid="form1">
Nombre:<inputtype="text"id="nombre"/><br>
Apellido:<inputtype="text"id="apellido"/><br>
Edad:<inputtype="text"id="edad"/><br>
<inputtype="button"id="submit"value="Aadir"/>
</form>
<br>
<! EnestedivmetemoselcontenidodelatablaconAJAX>
<divid="tabla"></div>
</body>
</html>
Elcontenidodelservelt,llamadoActionServlet.javaeselsiguiente:
2/10
14/7/2016
packageajaxdemo;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassActionServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
privateArrayList<Persona>personas=newArrayList<>();
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)th
Usodecookies
rowsServletException,IOException{
//Siloqueremoshaceratravesdeunget,tenemosqueponerelcodigod
elpostenestaclase
}
ACEPTAR
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)t
hrowsServletException,IOException{
response.setContentType("text/html;charset=iso88591");
PrintWriterout=response.getWriter();
//Obtengolosdatosdelapeticion
Stringnombre=request.getParameter("nombre");
Stringapellido=request.getParameter("apellido");
Stringedad=request.getParameter("edad");
tabla
//Comprueboqueloscamposdelformulariotienendatosparaaadirala
if(!nombre.equals("")&&!apellido.equals("")&&!edad.equals("")){
//CreoelobjetopersonayloaadoalarrayList
Personapersona=newPersona(nombre,apellido,edad);
personas.add(persona);
}
BRE</td>");
LIDO</td>");
</td>");
out.println("<tablestyle=cellspacing="1"bgcolor="#0099cc">");
out.println("<tr>");
out.println("<tdstyle=rowspan="7"align="center"bgcolor="#f8f8f8">NOM
out.println("<tdstyle=rowspan="7"align="center"bgcolor="#f8f8f8">APEL
out.println("<tdstyle=rowspan="7"align="center"bgcolor="#f8f8f8">EDAD
out.println("</tr>");
for(inti=0;i<personas.size();i++){
Personapersona=personas.get(i);
out.println("<tr>");
3/10
14/7/2016
out.println("<tdstyle=rowspan="7"align="center"bgcolor="#f8f8
f8">"+persona.getNombre()+"</td>");
f8">"+persona.getApellido()+"</td>");
f8">"+persona.getEdad()+"</td>");
out.println("</tr>");
out.println("</table>");
Laclasepersonaeslasiguiente:
Usodecookies
ACEPTAR
4/10
14/7/2016
packageajaxdemo;
publicclassPersona{
privateStringnombre;
privateStringapellido;
privateStringedad;
publicPersona(){
}
publicPersona(Stringnombre,Stringapellido,Stringedad){
super();
this.nombre=nombre;
this.apellido=apellido;
this.edad=edad;
}
Usodecookies
publicStringgetNombre(){
returnnombre;
}
ACEPTAR
publicvoidsetNombre(Stringnombre){
this.nombre=nombre;
publicStringgetApellido(){
returnapellido;
publicvoidsetApellido(Stringapellido){
this.apellido=apellido;
publicStringgetEdad(){
returnedad;
publicvoidsetEdad(Stringedad){
this.edad=edad;
}
}
Elcontenidoweb.xmleselsiguiente:
5/10
14/7/2016
<?xmlversion="1.0"encoding="UTF8"?>
<webappxmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/
javaee/webapp_3_0.xsd"
id="WebApp_ID"version="3.0">
<displayname>EjemploconAJAX</displayname>
<servlet>
<servletname>ActionServlet</servletname>
<servletclass>ajaxdemo.ActionServlet</servletclass>
</servlet>
<servletmapping>
<servletname>ActionServlet</servletname>
<urlpattern>/</urlpattern>
</servletmapping>
</webapp>
Usodecookies
Llegados a este punto, solo queda ejecutar el ejemplo. Para ello es necesario tener el Tomcat
instalado y ejecutar el proyecto en el Tomcat. Si alguno tiene dudas de como hacerlo, dejamos dos
ACEPTAR
enlaces a los tutoriales de como instalar el Tomcat y como configurar el eclipse para trabajar con
Servelts:
Instalar un contenedor de Servlets local: Tomcat (http://jarroba.com/instalaruncontenedorde

servletslocaltomcat/)
Como programar Webs y Servlets en Eclipse (http://jarroba.com/comoprogramarwebsy
servletseneclipse/)
Recomendados
(http://jarroba.com/graficas
(http://jarroba.com/mean
enpaginasw ebcongoogle
enpaginasw ebcon
mongoexpressangularnode
charts/)
highcharts/)
ejemplodeaplicacionw eb
Graficasenpginasw ebcon
Graficasenpginasw ebcon
parteii/)
GoogleCharts
Highcharts
MEAN(MongoExpress
AngularNode)Ejemplode
enpaginasw ebcon
AplicacinWeb(ParteII)
6/10
14/7/2016
charts/)
enpaginasw ebcon
highcharts/)
AplicacinWeb(ParteII)
ejemplodeaplicacionw eb
parteii/)
(http://jarroba.com/como
(http://jarroba.com/banner
programarw ebsyservlets
rotatorioconjavascript/)
eneclipse/)
Bannerrotatoriocon
ComoprogramarWebsy
JavaScript
Usodecookies
(http://jarroba.com/banner
ServletsenEclipse
crearentornosdedesarrollo
rotatorioconjavascript/)
convagrantypuppet/)
programarw ebsyservlets
eneclipse/)
Comocrearentornosde
ACEPTAR
desarrolloconVagranty
Puppet(Video)
crearentornosdedesarrollo
convagrantypuppet/)
desarrollofullstack
javascriptpartei/)
MEAN(MongoExpress
AngularNode)DesarrolloFull
StackJavaScript(ParteI)
desarrollofullstack
javascriptpartei/)
7/10
14/7/2016
(http://jarroba.com/codigo
hash/)
CdigoHash
(http://jarroba.com/codigo
hash/)
Usodecookies
Loadmoreposts
Comparteestaentradaen:
ACEPTAR
(http
(http
(http
(http
s://p ://w ://w ://tw

(http://creativecommons.org/licenses/byncsa/3.0/es/)
(http://www.safecreative.org/userfeed/1401310112503)
lus. ww.l ww. itter.
AJAXconJSPyServelts(http://jarroba.com/ajaxconjspyservelts/)por"www.jarroba.com"estabajouna
goo inke face com
licenciaCreativeCommons
ReconocimientoNoComercialCompartirIgual3.0UnportedLicense.
gle. din. boo /ho
Creadoapartirdelaobraenwww.jarroba.com(http://jarroba.com/ajaxconjspyservelts/)
com com k.co me?

/sha /sha m/s stat
(/)
re? reAr hare us=

url= ticle .php AJA
Siguenos en:
http
X+c
%3 mini u=ht on+

(http://www.youtube.com/user/Jarrobaweb)
(https://twitter.com/JarrobaWeb)
A% =tru tp% JSP

(https://www.facebook.com/jarrobaWeb)
(https://github.com/jarroba?tab=repositories)
2F e&u 3A +y+
(https://plus.google.com/103352032205227460108/)
%2 rl=ht %2 Serv
Contacto: jarrobaweb@gmail.com
Fjar (mailto:jarrobaweb@gmail.com)
tp% F% elts
8/10
14/7/2016
roba 3A 2Fja
FAQ(HTTP://JARROBA.COM/FAQ/)
.co %2 rrob http
VISITAS(HTTP://JARROBA.COM/VISITAS/)
GASTOS
m% F%
a.co %3
SITEMAP(HTTP://JARROBA.COM/SITEMAP_INDEX.XML)
2Faj 2Fja m% A%
ax rrob 2Faj 2F
con a.co ax %2
Copyright2016Jarroba.com(http://www.jarroba.com)Todoslosderechosreservados
jsp m% con Fjar
2Faj jsp &

roba
By yReimon
Richard
Usodecookies
serv ax
.co
elts con
serv m%
ACEPTAR
%2 jsp elts 2Faj
F)
%2 ax
serv F&t con

elts =AJ jsp
%2 AX+ y
F&ti con serv
tle= +JS elts
AJA P+y %2
X+c +Se F)
on+ rvelt
JSP s)
+y+
Serv
elts
&so
9/10
14/7/2016
&so
urce
=jar
roba
.co
m)
Usodecookies
ACEPTAR
10/10

AJAX Con JSP y Servelts - Jarroba

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

AJAX Con JSP y Servelts - Jarroba

Încărcat de

Drepturi de autor:

Formate disponibile

14/7/2016

En esta entrada vamos a poner un sencillo ejemplo de como incluir AJAX

Instalar un contenedor de Servlets local: Tomcat (http://jarroba.com/instalaruncontenedorde

s://p ://w ://w ://tw

com com k.co me?

re? reAr hare us=

%3 mini u=ht on+

A% =tru tp% JSP

2Faj jsp &

serv F&t con

S-ar putea să vă placă și