HTTP POST de formulaire de demande en utilisant AJAX et Servlet
En Java Servlets mondiale sont couramment utilisés pour Modèle Vue Contrôleur (MVC) Design Pattern. Cet article vous guide sur l'écriture AJAX application basée que publiera ses données à Servlet et la récupération des données calculée à partir de la servlet. Avec cette approche, la page sera mise à jour obtenir le contenu du serveur sans rafraîchir la jsp / page html.
Code JSP:
"text/javascript" > function getXMLObject ( ) //XML OBJECT { var xmlHttp = false ; try { xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP" ) // For Old Microsoft Browsers } catch ( e ) { try { xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP" ) // For Microsoft IE 6.0+ } catch ( e2 ) { xmlHttp = false // No Browser accepts the XMLHTTP Object then false } } if ( ! xmlHttp && typeof XMLHttpRequest != 'undefined' ) { xmlHttp = new XMLHttpRequest ( ) ; //For Mozilla, Opera Browsers } return xmlHttp ; // Mandatory Statement returning the ajax object created } var xmlhttp = new getXMLObject ( ) ; //xmlhttp holds the ajax object function ajaxFunction ( ) { if ( xmlhttp ) { var txtname = document. getElementById ( "txtname" ) ; xmlhttp. open ( "POST" , "getname" , true ) ; //getname will be the servlet name xmlhttp. onreadystatechange = handleServerResponse ; xmlhttp. setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' ) ; xmlhttp. send ( "txtname=" + txtname. value ) ; //Posting txtname to Servlet } } function handleServerResponse ( ) { if ( xmlhttp. readyState == 4 ) { if ( xmlhttp. status == 200 ) { document. myForm . message . innerHTML = xmlhttp. responseText ; //Update the HTML Form element } else { alert ( "Error during AJAX call. Please try again" ) ; } } } </ script > <body> <form name="myForm" method="POST" action="getname"> <table> <tr> <td>Enter Name</td> <td><input type="text" name="txtname" id="txtname" /></td> </tr> <tr> <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td> </tr> </table> <div id="message"></div> </form> </body> </head> </html> <html> <head> <title> JSP et Servlet utilisant AJAX </ title> type de script <= "text / javascript" getXMLObject fonction> () / / XML Object (var xmlHttp = false; try (xmlHttp = new ActiveXObject (" Msxml2.XMLHTTP ") / / Pour Old Microsoft Navigateurs) catch (e) (try (xmlHttp = new ActiveXObject (" Microsoft.XMLHTTP ") / / Pour Microsoft IE 6.0 +) catch e2) ((xmlHttp = false / / Browser n accepte l'objet XMLHTTP puis false)) if (! xmlHttp & & typeof XMLHttpRequest! = "undefined") (xmlHttp = new XMLHttpRequest (); / / Pour Mozilla, Navigateurs) xmlHttp retour Opera; / / obligatoire Déclaration retour de l'ajax objet créé) XMLHTTP var = getXMLObject new (); / / XMLHTTP détient la fonction objet ajaxFunction ajax () (if (xmlhttp) (var = txtName document. getElementById ("txtName"); XMLHTTP. open ("POST", "getName", true ); / / getname sera le nom de servlet XMLHTTP. onreadystatechange = handleServerResponse; XMLHTTP. setRequestHeader ("Content-Type", "application / x-www-form-urlencoded '); XMLHTTP. send (" txtName = "txtName +. valeur); / / Affichage txtName à Servlet)) handleServerResponse function () (if (xmlhttp. readyState == 4) (if (xmlhttp. état == 200) (document. myForm. message. innerHTML = XMLHTTP. responseText; / / Mise à jour de l'élément de formulaire HTML) else (alert ("Erreur lors de l'appel AJAX. S'il vous plaît essayer de nouveau");))) </ script> <body> <form name="myForm" method="POST" action="getname"> <table> <tr> <td> Entrée <Nom / td> <td> <input type="text" name="txtname" id="txtname" /> </ td> </ tr> <tr> <td colspan = "2"> <input type="button" value="Soumettre" onclick="ajaxFunction();" /> </ td> </ tr> </ table> <div id="message"> </ div> </ form> </ body> </ head> </ html>
Servlet Code
; import java.io. *; ; java.text importation .*; ; import java.util .*; ; javax.servlet .* à l'importation; ; javax.servlet.http importation .*; HttpServlet { getname public class extends HttpServlet ( init ( ServletConfig config ) throws ServletException { public void init (config ServletConfig) throws ServletException ( ( config ) ; super. init (config); ) destroy ( ) { public void destroy () ( ) doPost ( HttpServletRequest request,HttpServletResponse response ) throws IOException , ServletException { public void doPost (HttpServletRequest demande, la réponse HttpServletResponse) throws IOException, ServletException ( null ; String name = null; response. getWriter ( ) ; à PrintWriter = réponse. getWriterQ (); request. getParameter ( "txtname" ) != null ) { if (getParameter request. ("txtName")! = null) ( ( "txtname" ) ; name = demande. getParameter ("txtName"); ) else ( ; name = ""; ) "You have successfully made Ajax Call:" + name ) ; OUT. println ("Vous avez réussi à faire appel Ajax:" + nom); ) )
Explication du code AJAX
Ici, j'ai déclaré 3 fonctions JavaScript:
getXMLObject () - Responsable de la création de l'objet AJAX selon le navigateur.
ajaxFunction () - responsable de la convocation servlet par appel AJAX.
handleServerResponse () - Responsable pour l'affichage des données récupérées à partir du serveur.
Comment fonctionne le code AJAX:
- Lorsque le chargement de la page je crée un objet AJAX en appelant la getXMLObject () et retourner l'objet créé dans la variable XMLHTTP
- Lorsque l'utilisateur clique sur l'entrée, Button ajaxFunction () est appelée pour savoir si des vérifications qui l'objet Ajax est créé ou non et en fonction de qui appelle le script distant. Voici une fonction de gestion de handleServerResponse est également définie pour la récupération de la valeur à partir du serveur
- Lorsque le readyState de l'appel AJAX atteint 4 et le statut HTTP est de 200, nous passons les données récupérées depuis le serveur vers la zone de texte
Explication pour le code de la servlet
- En fonction doPost par défaut est appelée lorsque vous publiez le contenu à la servlet
- En fonction doPost je suis aller chercher les données POST sous la forme d'txtName et en lui attribuant le nom de variable locale
- Enfin je suis l'affichage des données par la méthode POST obtenu. Toutes les données affichées est transmis à l'objet Ajax sous la forme de réponse à l'appel lancé Ajax à la servlet
Recherche personnalisée
Articles populaires:
- Envoi de courriels en utilisant Java
- Lecture de documents Microsoft Word en JAVA
- Remote URL de connexion à travers un proxy en Java
- Lecture de documents Excel Sheet en Java
- Java Development Kit de désinstallation sur les systèmes Linux
Good site I "Stumbledupon" aujourd'hui et lui a donné un faux pas pour vous .. hâte de voir ce que vous avez .. plus tard
code ne fonctionne pas! u poursuivre son code fonctionne ... après la sortie présenter servlet pas démontré page rester tel qu'il est .. aider
J'ai donné les mêmes noms et vérifié le code correctement ...
Salut le code vraiment travaillé, mais ses travaux en seulement pour l'affichage d'une valeur de la forme, j'ai une forme que les valeurs de nombreux postes de près de huit champs de texte, ce code ne fonctionne pas avec ceux qui ne sont d'intrants s'il vous plaît suggérer une solution,
et son IVE urgence à utiliser dans mon projet sem final,
Merci beaucoup d'avance
utilisation
"Document.getElementById (" message "). InnerHTML = xmlhttp.responseText;"
remplacer
"Xmlhttp.responseText document.myForm.message.innerHTML =;"
Salut Hitesh
Je suis nouveau à l'Ajax. J'ai un problème pour lequel j'ai besoin d'une solution utilisant ajax ..
Dans ma demande dès que je me connecte il se réfère à un servelt qui a le BusinessLogic et de sortie est un fichier jsp affichant un tableau ... j'ai besoin de mettre à jour cette jsp après un certain intervalle sans aucune action ou un événement. Qu'elle a d'obtenir les données actualisées à partir de la base de données
Can u pls donner quelques exemples