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 с призывом к сервлета