日期:2014-05-16 浏览次数:20638 次
本节的例子是发送用户请求和现实服务器处理的结果,后者是Servlet。处理用户发送的请求,比把处理结果返回给用户。
运行实例:
这是一个简单的表单,只有一个输入名字的输入框,在输入框中输入名字,单击submit按钮,就在同一个页面底部显示输入的内容,该输入内容是由服务器中的servlet服务器返回的,当然这是由AJAX技术实现的。
客户端的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Simple Application Form</title> <script type="text/javascript"> var xmlhttp; var outMsg; function createXMLHtppRequest() { if(window.ActiveXOject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } } function createQueryString() { //createRequest(); var userName = document.getElementById("userName").value; var queryString= "userName="+userName; return queryString; } function doRequest() { createXMLHtppRequest(); var queryString = "HelloAjaxJava1?"; queryString = queryString+createQueryString(); xmlhttp.onreadystatechange = handleStateChange; xmlhttp.open("POST", queryString, true); xmlhttp.send(null); } function handleStateChange() { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) parseResults(); } } function parseResults() { var responseDiv = document.getElementById("serverResponse"); if(responseDiv.hasChildNodes()) { responseDiv.removeChild(responseDiv.childNodes[0]); } var responseText = document.createTextNode(xmlhttp.responseText); responseDiv.appendChild(responseText); } </script> </head> <body> <h1>Simple Application Form</h1> <form action="#"> choose your user: <input type="text" id="userName"/> <br> <br> <input type="button" id="submission" value="submit" onclick="doRequest();"/> </form> <br> <h2>Server Response:</h2> <div id="serverResponse"></div> </body> </html>
服务器端的代码:
package helloajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class HelloAjaxJava1 extends HttpServlet { /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); out.println("<HTML>"); out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>"); out.p