post請求步驟與前篇的get請求步驟差別不大,只是增加了
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
這里直接上代碼:
在web\02_testpost 分別創建兩個文件posttest.jsp和test.js
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded">
<input type="button" name="ok" id="ok" value="測試服務器連接">
</form>
</body>
</html>
//當頁面加載完畢之后，執行以下代碼
window.onload = function(){ document.getElementById("ok").onclick = function(){ /* * 1 創建XMLHttpRequest對象 */ var xhr = ajaxFunction(); /* * 2 服務器向瀏覽器響應請求 * * readyState 屬性表示Ajax請求的當前狀態。它的值用數字代表。 0 代表未初始化。 還沒有調用 open 方法 1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用 2 代表已加載完畢。send 已被調用。請求已經開始 3 代表交互中。服務器正在發送響應 4 代表完成。響應發送完畢 常用狀態碼及其含義： 404 沒找到頁面(not found) 403 禁止訪問(forbidden) 500 內部服務器出錯(internal service error) 200 一切正常(ok) 304 沒有被修改(not modified)(服務器返回304狀態，表示源文件沒有被修改 ) */ xhr.onreadystatechange = function(){ alert(xhr.readyState); //alert(xhr.status);
if(xhr.readyState==4){ if(xhr.status==200||xhr.status==304){ var data = xhr.responseText; alert(data); } } } /* * 3 瀏覽器與服務器建立連接 * * xhr.open(method, url, asynch); * * 與服務器建立連接使用 * * method：請求類型，類似 “GET”或”POST”的字符串。 * * url：路徑字符串，指向你所請求的服務器上的那個文件。請求路徑 * * asynch：表示請求是否要異步傳輸，默認值為true(異步)。 */ xhr.open("POST","../testServlet?timeStamp="+new Date().getTime()+"&c=18",true); //如果是POST請求方式，設置請求首部信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); /* * 4 瀏覽器向服務器發送請求 * * send()方法： * * 如果瀏覽器請求的類型為GET類型時，通過send()方法發送請求數據，服務器接收不到 * * 如果瀏覽器請求的類型為POST類型時，通過send()方法發送請求數據，服務器可以接收 */ xhr.send("a=6&b=9"); //xhr.send(null);
} } function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; }
package com.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * Created by huangyichun on 2016/12/7. */ @WebServlet(name = "testServlet",urlPatterns = "/testServlet") public class TestServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("a=" + request.getParameter("a")); System.out.println("c=" + request.getParameter("c")); PrintWriter out = response.getWriter(); out.println("get connection server success"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("connection..."); System.out.println("a=" + request.getParameter("a")); System.out.println("c=" + request.getParameter("c")); PrintWriter out = response.getWriter(); out.println("get connection server success"); } }