Форм HTTP POST запроса с помощью AJAX и сервлетов

Leave a comment Go to comments 4 марта 2008 Hitesh Agrawal Оставить комментарий Перейти к комментариям

В Java Сервлеты мир широко используется для Model View Controller (MVC) шаблона дизайна. Эта статья поможет вам писать AJAX приложение, которое будет пост данные 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 и сервлетов помощью AJAX </ TITLE> <тип скрипта = "Текст / JavaScript"> функция getXMLObject () / / XML Object (VAR XMLHTTP = false; попробовать XMLHTTP = (New ActiveXObject ( " Msxml2.XMLHTTP ") / / Для Старые браузеры Microsoft поймать) (E) ((попытаться XMLHTTP = New ActiveXObject (" Microsoft.XMLHTTP ") / / Для Microsoft IE 6.0 +) поймать (E2) (XMLHTTP = False / / Нет Browser принимает XMLHTTP объекта затем ложно)), если (! XMLHTTP & & TypeOf XMLHttpRequest! = 'неопределенный') (XMLHTTP = новый XMLHttpRequest (); / / Для Mozilla, Opera браузеры) возвращение XMLHTTP / / Обязательное заявление возвращается AJAX созданного объекта) VAR XMLHTTP = новый getXMLObject (); / / XMLHTTP держит AJAX ajaxFunction функции Object () (if (XMLHTTP) (VAR txtname = документе. getElementById ( "txtname"); XMLHTTP. Open ( "POST", "GetName", True ); / / GetName будет сервлет XMLHTTP имя. onreadystatechange = handleServerResponse; XMLHTTP. setRequestHeader ( 'Content-приложений типа', '/ X-WWW-форм-urlencoded'); XMLHTTP. отправить ( "txtname =" + txtname. Value); / / Posting txtname к Servlet)) функция handleServerResponse () (if (xmlhttp. readyState == 4) (if (xmlhttp. статус == 200) (документе. MyForm. сообщении. innerHTML = XMLHTTP. responseText / / обновления элемента HTML Form другое) (Alert ( "Ошибка при вызове 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 COLSPAN = "2"> <input type="button" value="Submit" onclick="ajaxFunction();" /> </ TD> </ TR> </ table> <div id="message"> </ div> </ FORM> </ body> </ head> </ html>

Код сервлета

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

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

 ; Импорт java.util .*;

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

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

 HttpServlet { общественности GetName класс расширяет HttpServlet (

	 init ( ServletConfig config ) throws ServletException { общественности инициализации недействительным (ServletConfig конфигурации) бросает ServletException (	
		 ( config ) ; Супер. инициализации (конфигурации);
	 )

	 destroy ( ) { общественности Void Destroy () (

	 )

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

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

Здесь я заявил 3 JavaScript функции:
getXMLObject () - ответственный за создание AJAX объекта в зависимости от браузера.
ajaxFunction () - отвечает за вызов сервлета вызова через AJAX.
handleServerResponse () - отвечает за отображение данных, полученные с сервера.

Как AJAX код работает:

При загрузке страницы я создаю объект AJAX, вызвав getXMLObject () и возвращения объекта, созданного в XMLHTTP переменная
Когда пользователь нажимает на кнопку ввод, ajaxFunction () вызывается, которая проверяет ли Аякс создается объект или нет, и в зависимости от того вызывает удаленного сценария. Здесь функция обработчика handleServerResponse определяется также для получения значения с сервера
Когда readystate призыва AJAX достигает 4 и HTTP статусом 200 мы передаем данные полученные с сервера в текстовое поле

Разъяснение коде сервлета

По умолчанию функция doPost вызывается при публикации содержания в сервлет
В doPost I AM функция извлечения POST данные в виде txtname и присвоить его имя переменной местных
Наконец я показаны данные, полученные через POST. Все данные отображаются будет послана на Ajax объекта в виде ответов на Ajax с призывом к сервлет

Пользовательский поиск

Азы зона