HTTP POST Форма запиту за допомогою AJAX та Servlet

Головна > AJAX , Java > HTTP POST Форма запиту за допомогою AJAX та Servlet

HTTP POST Форма запиту за допомогою AJAX та Servlet

Leave a comment Go to comments 4 березня 2008 Hitesh Agrawal Залишити коментар Перейти до коментарів

У Java World Сервлет, що використовуються для виробництва Model View Controller (MVC) шаблон проектування. Ця стаття допоможе вам писати AJAX програма, яка буде розміщувати дані в Servlet і отримання розрахункових даних з Servlet. При такому підході сторінка буде отримати оновлене зміст з сервера, без оновлення JSP / HTML-сторінку.

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 і Servlet використанням AJAX </ TITLE> <скрипт типу = "текст / JavaScript"> getXMLObject функції () / / XML ОБ'ЄКТ (VAR XmlHttp = помилковим, спробуйте (XmlHttp = новий ActiveXObject (" Msxml2.XMLHTTP ") / / для старих браузерів Microsoft) зловити (е) ((спробувати XmlHttp = новий ActiveXObject (" Microsoft.XMLHTTP ") / / Для Microsoft IE 6.0 +) зловити (е2) = (XmlHttp помилковою / / Ні браузера приймає XMLHTTP об'єкта, то помилково)), якщо (! XmlHttp і і ЬуреоЕ XMLHttpRequest! = "невизначені") (XmlHttp = новий XMLHttpRequest (); / / Для Mozilla, Opera Браузери) повернення XmlHttp / / Обов'язкове заява повертається Ajax-об'єкт, створений) VAR = XMLHTTP нових getXMLObject (); / / XMLHTTP проводить Ajax ajaxFunction функції об'єкта () (якщо (XMLHTTP) (VAR txtname = документ. ідентифікатора ("txtname"); XMLHTTP. відкрите ("POST", "GetName", правда ) / / GetName буде сервлет XMLHTTP ім'я. onreadystatechange = handleServerResponse; XMLHTTP. setRequestHeader ('Content-Type', 'застосування / х-веб-форми urlencoded'); XMLHTTP. відправити ("txtname =" + txtname. вартості); / / Відправка txtname в Servlet)) функції handleServerResponse () (якщо (xmlhttp. readyState == 4) (якщо (xmlhttp. статус == 200) (документа. MyForm. повідомленні. innerHTML = XMLHTTP. responseText / / Оновлення елемента форми HTML) (ще сповіщення ("Помилка під час розмови AJAX. Спробуйте ще раз ");))) </ SCRIPT> <body> <form name="myForm" method="post" action="getname"> <table> <tr> <td> Введіть ім'я </ TD> <td> <input type="text" name="txtname" id="txtname" /> </ TD> </ TR> <tr> <TD Об'єднання = "2"> <input type="button" value="Submit" onclick="ajaxFunction();" /> </ TD> </ TR> </ TABLE> <div id="message"> </ DIV> </ FORM> </ BODY> </ HEAD> </ HTML>

Servlet кодексу

  ; імпорт java.io. *;

 ; імпорт java.text .*;

 ; ввезення java.util .*;

 ; імпорт javax.servlet .*;

 ; імпорт javax.servlet.http .*;

 HttpServlet { громадського GetName клас розширює HttpServlet (

	 init ( ServletConfig config ) throws ServletException { громадського ініціалізації недійсним (ServletConfig конфігурації) кидає ServletException (	
		 ( config ) ; супер. ініціалізації (конфігурації);
	 )

	 destroy ( ) { громадського недійсними знищити () (

	 )

	 doPost ( HttpServletRequest request,HttpServletResponse response ) throws IOException , ServletException { громадського doPost недійсним (HttpServletRequest прохання HttpServletResponse відповідь) кидки IOException, ServletException (
		 null ; String ім'я = NULL;
		 response. getWriter ( ) ; PrintWriter з = відповідь. GetWriter ();
		 request. getParameter ( "txtname" ) != null ) { якщо (request. getParameter ("txtname")! = NULL) (
			 ( "txtname" ) ; ім'я = запит. getParameter ("txtname");
		 )
                 зе (
                        ; ім'я = "";
                 )
  	         "You have successfully made Ajax Call:" + name ) ; поза. println ("Ви успішно зробили Ajax Call:" + ім'я);
	 )
 )

Пояснення для AJAX кодексу

Тут я оголосив 3 JavaScript функції:
getXMLObject () - відповідальність за створення AJAX об'єкта залежить від браузера.
ajaxFunction () - відповідає за виклик сервлет через виклик AJAX.
handleServerResponse () - відповідає за відображення даних, отриманих із сервера.

Як працює код AJAX:

При завантаженні сторінки я створюю AJAX об'єкта по телефону getXMLObject () та повернення об'єкта, створеного на XMLHTTP змінної
Коли користувач натискає на кнопку введення, ajaxFunction () викликається, яка перевіряє чи Ajax створюється об'єкт чи ні, і в залежності від того дзвінки віддаленого сценарію. Тут handleServerResponse функції обробника визначається також для отримання значення з сервера
Коли readystate призову AJAX досягає 4 і HTTP-статус 200 Перейдемо дані отримані з сервера в текстове поле

Пояснення Servlet кодексу

За замовчуванням doPost викликається при публікації контенту на сервлет
У doPost функції я витягнення даних POST у вигляді txtname і призначення його місцева назва змінної
Нарешті я показані дані, отримані через POST. Всі дані відображаються переходить в руки Ajax об'єкта у формі відповідей на Ajax із закликом до сервлет