標籤：not found 2.x orb 接收 pat 方式 bsp 實現 prot
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"); }}
js實現ajax的post請求步驟
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
