Ajax案例2-->POST请求

jsp页面--secondajax.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 <title>Insert title here</title>
 9 </head>
10 <script type="text/javascript">
11     function createXMLHttpRequest() {
12         try {
13             return new XMLHttpRequest();
14         } catch (e) {
15             try {
16                 return new ActiveXObject("Msxml2.XMLHTTP");
17             } catch (e) {
18                 try {
19                     return new ActiveXObject("Microsoft.XMLHTTP");
20                 } catch (e) {
21                     alert("浏览器不兼容");
22                 }
23             }
24         }
25     };
26 
27     window.onload = function() {
28         var btn = document.getElementById("btn");
29         
30         btn.onclick = function(){
31             
32             //获取XMLHttpRequest对象
33             var xmlHttp = createXMLHttpRequest();
34             
35             //连接服务器
36             xmlHttp.open("POST","<c:url value='/SecondServlet'/>",true);
37             
38             //设置POST请求的请求头
39             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
40             
41             //发送请求体内容
42             xmlHttp.send("username=张三&password=123");
43             
44             //ajax接收服务器数据
45             xmlHttp.onreadystatechange = function() {
46                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
47 
48                     var text = xmlHttp.responseText;//接收服务器响应数据
49                     var h1 = document.getElementById("h1");
50                     h1.innerHTML = text;
51                 }
52             };
53         };
54     };
55 </script>
56 
57 <body>
58     <button id="btn">获取post请求的servlet响应内容</button>
59     <h1 id="h1"></h1>
60 </body>
61 </html>

Servlet-->SecondServlet.java

 1 package ajax;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 public class SecondServlet extends HttpServlet {
12 
13     private static final long serialVersionUID = -8677043877281884063L;
14 
15     public void doPost(HttpServletRequest request, HttpServletResponse response)
16             throws ServletException, IOException {
17 
18         //POST请求需要设置编码
19         request.setCharacterEncoding("utf-8");//设置处理请求的编码
20         response.setContentType("text/html;charset=utf-8");//设置响应的编码--给浏览器的
21         
22         String username = request.getParameter("username");
23         String password = request.getParameter("password");
24         response.getWriter().print(username+" 您好!  您的登录密码是:"+password);
25         
26     }
27 
28 }

图片展示: