Scribd Logo
Carica

Benvenuto in Scribd!

  • Ajax

    Caricato da

    Maykel Braga Andion
    45 visualizzazioni7 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    ODT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato ODT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    45 visualizzazioni7 pagine

    Ajax

    Caricato da

    Maykel Braga Andion

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato ODT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 7

    Construindo uma pgina de insero de dados

    Criei uma pgina simples para facilitar o entendimento. Nela, temos um formulrio com alguns campos, que iro enviar os parmetros para a pgina que far a insero no banco de dados. Antes de proceder, melhor que j tenha construdo o seu banco de dados, no MySQL. Crie um banco de dados no MySQL. Meu banco chama-se "projeto2", a tabela chama-se "geral2" e os campos so: codigo (auto incremento), nome, endereco, cidade, telefone, login e senha. Voc pode alter-los, contanto que modifique as variveis corretamente, tanto no Ajax quanto no HTML e JSP. Esta pgina chama-se "formulario.jsp" e, aps o clique no boto "Gravar", dever enviar os parmetros para a pgina "grava_usuario.jsp" e limpar os dados dom campos, preparando para uma nova insero. <html> <head> <title>Teste</title> <script> function verificacampos() { var nome = document.getElementById("nome").value; var senha = document.getElementById("senha").value; var login = document.getElementById("login").value; if (senha == "" || login == "" || nome == "") { alert(' necessrio digitar os campos Nome, Login e Senha corretamente'); return false; } else { salvar() } } //esta a funo Ajax. Sem ela, nada acontece. function openAjax() { var ajax; try{ ajax = new XMLHttpRequest(); // XMLHttpRequest para Firefox, Safari, dentre outros. }catch(ee){ try{ ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o Internet Explorer }catch(e){ try{ ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o Internet Explorer }catch(E){ ajax = false; } } } return ajax; } function salvar() { var nome = document.getElementById('nome').value; //Note que as variveis so resgatadas pela funo getElementById. var endereco = document.getElementById('endereco').value; var cidade = document.getElementById('cidade').value; var telefone = document.getElementById('telefone').value; var login = document.getElementById('login').value; var senha = document.getElementById('senha').value; var exibeResultado = document.getElementById('exibeResultado');

    var ajax = openAjax(); // Inicia o Ajax. ajax.open("GET", "grava_usuario.jsp?nome=" + nome +"&endereco=" + endereco + "&cidade=" + cidade + "&telefone=" + telefone +"&login=" + login + "&senha="+ senha, true); // Envia o termo da busca como uma querystring, nos possibilitando o filtro na busca. ajax.onreadystatechange = function() { if(ajax.readyState == 1) // Quando estiver carregando, exibe: carregando... { exibeResultado.innerHTML = "Inserindo"; } if(ajax.readyState == 4) // Quando estiver tudo pronto. { if(ajax.status == 200) { var resultado = ajax.responseText; exibeResultado.innerHTML = resultado; } else { exibeResultado.innerHTML = "Erro nas funes do Ajax"; } } } ajax.send(null); // submete document.getElementById("nome").value= "";//limpa os campos document.getElementById("endereco").value= ""; document.getElementById("senha").value= ""; document.getElementById("login").value= ""; document.getElementById("cidade").value= ""; document.getElementById("telefone").value= ""; document.getElementById("nome").setFocus=true; } </script> <link rel="stylesheet" type="text/css" href="tabelacss.css"/> </head> <body> <table id="tabela_especial" align="center" width="900"> <tr> <td> <table border="1" align="center" width="790"> <tr> <td id="fundo_branco">New Brejos' PUserName_Senha_Administrador </td> </tr> <tr> <td align="left"> <table align=center width="790"> <tr> <td> <form name="formgrava" action="grava_usuario.jsp"> <table width="560"> <tr> <td align="right">Nome:</td><td><input type="text" id="nome" size="30" name="nome"></td> </tr> <tr> <td align="right">Endereo:</td><td><input type="text" id="endereco" size="30" name="endereco"></td> </tr> <tr> <td align="right">Cidade:</td><td><input type="text" id="cidade" size="30" name="cidade"></td> </tr> <tr> <td align="right">Telefone:</td><td><input type="text" id="telefone" size="30" name="telefone"></td> </tr>

    <tr> <td align="right">Login:</td><td><input type="text" id="login" size="30" name="login"></td> </tr> <tr> <td align="right">Senha:</td><td><input type="password" id="senha" size="30" name="senha"></td> </tr> <tr><br></tr> <tr> <td align="left"><td><input type="button" size="30" name="gravar" id="gravar" value="Gravar" onclick="verificacampos()"> <input type="button" size="30" name="cancelar" value="Cancelar"> </tr> </form> </table></td>

    </tr> </td> </tr> </table><tr></tr> <table> <tr align="left"> <td align="left"><font color="lightgray">Status: </font></td><td align="left"><div id="exibeResultado" align="center"><font color="lightgray">Em espera</font></div></td> </tr> </table> <tr><td align="right"><font color="#EBD8F5">Insero usando AJAX</font></td></tr> </table> </td><br> </tr> </table> </body> </html>

    Note que os campos esto com "name" e com "ID". O campo "name" no necessrio, mas o campo "ID" extremamente necessrio. Note tambm que a Div "exibeResultado" necessria, pois o Ajax utiliza-a para exibir os resultados da insero. Prximo passo: A pgina JSP que ir inserir os dados.
    Pgina JSP que ir gravar os parmetros

    Esta pgina ir gravar em seu banco de dados os parmetros digitados no formulrio. <% // Importao de Classes Java %> <%@ page import = "java.sql.*" %> <%@ page import = "java.text.*" %> <%@ page import = "java.util.*" %> <% // Variveis da conexo com o banco de dados %>

    <% String url1 = "jdbc:mysql://localhost/projeto2"; String usuario = "mysql"; String senha = "mysql"; Connection con = null; ResultSet sqlretorno1 = null; Statement sqlconsulta1 = null; ResultSet sqlretorno2 = null; Statement sqlconsulta2 = null; Statement SQLS = null; // conexo ao banco de dados Class.forName("org.gjt.mm.mysql.Driver").newInstance(); con = DriverManager.getConnection( url1, usuario, senha); sqlconsulta1 = con.createStatement(); sqlconsulta2 = con.createStatement(); SQLS = con.createStatement();

    //Parmetros recuperados do Ajax String login = request.getParameter("login"); String senha1 = request.getParameter("senha"); String nome = request.getParameter("nome"); String endereco = request.getParameter("endereco"); String telefone = request.getParameter("telefone"); String cidade = request.getParameter("cidade");

    %> <% String consulta_2 = ""; consulta_2 = "insert into geral2 (nome, endereco, telefone, cidade, login, senha) values ('"+nome+"', '"+endereco+"', '"+telefone+"', '"+cidade+"', '"+login+"', '"+senha1+"') "; sqlconsulta2.executeUpdate(consulta_2); //Este comando devolver "Dados inseridos com Sucesso para" o Ajax. out.println("Dados inseridos com Sucesso!!!"); %> <% con.close(); %> <%// Note que, aps a insero, a pgina no redireciona para nenhuma pgina.%> E, assim, temos uma simples aplicao Ajax com JSP e MySQL. necessrio dizer que possuo o Tomcat instalado em meu Red Hat e que, o artigo foi construdo tomando os arquivos de instalao do Java, o Tomcat, o MySQL e demais configuraes j previamente instalados e configurados.

    Outra possibilidade

    Java - How to use Ajax in JSP


    Ajax is become so popular in web, everyone want to use Ajax in JSP application. Ajax got big popularity after Google used in their application gmail. Java also watching Ajax power and realized that Ajax is important part of any web application. It should be implemented in JSP, struts projects. Ajax allows us to load page in background without refreshing and submitting full page. Ajax is simple JavaScript script which work with XML Http request. How to use Ajax in JSP 1. Ajax framework for java 2. Simple Ajax script for JSP Ajax framework for java Frameworks for Ajax in java are available from many third party websites. This Ajax framework can easily implement in any java application e.g. struts, JSP, Servlet. This Ajax framework comes in taglib and tags can use in front end page JSP. You can check and download these ajax framework http://ajaxtags.sourceforge.net/ http://ajaxanywhere.sourceforge.net/ https://ajax.dev.java.net/ Simple Ajax script for JSP Lot of script is available for auto complete, load page, validation, and menu navigation in Ajax which can use in JSP. A simple example of ajax show you to use in JSP index.jsp <html> <head> <script src="ajaxjs.js"></script> </head> <body> <a href="javascript:loadContent('parameterValue')">Load Ajax content</a> <div id="prtCnt"></div>

    </body> </html> ajaxjs.js var xmlhttp function loadContent(str) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support Ajax HTTP"); return; } var url="loadJSP.jsp"; url=url+"?q="+str; xmlhttp.onreadystatechange=getOutput; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function getOutput() { if (xmlhttp.readyState==4) { document.getElementById("prtCnt").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } JSP file which load in background loadJSP.jsp

    <%@ page contentType="text/html; charset=iso-8859-1" language="java" %> <% String q =request.getParameter("q"); String str="This is JSP string loading from JSP page in ajax, loading time :"; java.util.Date dt=new java.util.Date(); out.print(str+dt); %>

    Potrebbero piacerti anche