2. 程式人生 > >ajax與伺服器傳值有兩種方式：get 和post的區別

ajax與伺服器傳值有兩種方式：get 和post的區別

阿新 • • 發佈：2019-02-01
  1. get是把引數資料佇列加到提交表單的ACTION屬性所指的URL中，值和表單內各個欄位一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。使用者看不到這個過程。get可以使用瀏覽器的快取機制，別的使用者可以從快取中獲取你的資訊，比如“使用者名稱和密碼”，而POST獲取不到，所以使用POST比較安全。
  2. 對於get方式，伺服器端用Request.QueryString獲取變數的值，對於post方式，伺服器端用Request.Form獲取提交的資料。兩種方式的引數都可以用Request來獲得。Servlet中使用request.getParameter(key)來獲取值。
  3. get傳送的資料量較小，不能大於2KB。post傳送的資料量較大，一般被預設為不受限制。
  4. get安全性非常低，post安全性較高。
  5. <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一樣的，也就是說，method為get時action頁面後邊帶的引數列表會被忽視；而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一樣的。

       另外 Get請求有如下特性：它會將資料新增到URL中，通過這種方式傳遞到伺服器，通常利用一個問號？代表URL地址的結尾與資料引數的開端，後面的引數每一個數據引數以“名稱=值”的形式出現，引數與引數之間利用一個連線符&來區分。 Post請求有如下特性：資料是放在HTTP主體中的，其組織方式不只一種，有&連線方式，也有分割符方式，可隱藏引數，傳遞大批資料，比較方便。

        現在我們再看看通過URL傳送請求時，get方式和post方式的區別。用下面的例子可以很容易的看到同樣的資料通過GET和POST來發送的區別，傳送的資料是 username=張三。

GET 方式，瀏覽器鍵入 http://localhost?username=張三

GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Connection: Keep-Alive

POST 方式：

POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Content-Length: 28
Connection: Keep-Alive
username=%E5%BC%A0%E4%B8%89

區別就是一個在 URL 請求裡面附帶了表單引數和值, 一個是在 HTTP 請求的訊息實體中。

比較一下上面的兩段文字, 我們會發現 GET 方式把表單內容放在前面的請求頭中, 而 POST 則把這些內容放在請求的主體中了, 同時 POST 中把請求的 Content-Type 頭設定為 application/x-www-form-urlencoded. 而傳送的正文都是一樣的, 可以這樣來構造一個表單提交正文: encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....

注: encodeURIComponent 返回一個包含了 charstring 內容的新的 String 物件（Unicode 格式）， 所有空格、標點、重音符號以及其他非 ASCII 字元都用 %xx 編碼代替，其中 xx 等於表示該字元的十六進位制數。 例如，空格返回的是 "%20" 。 字元的值大於 255 的用 %uxxxx 格式儲存。參見 JavaScript 的 encodeURIComponent() 方法.

在瞭解了上面的內容後我們現在用ajax的XMLHttpRequest物件向伺服器分別用GET和POST方式傳送一些資料。

GET 方式

var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" 
	+ encodeURIComponent("[email protected]");
xmlhttp.open("GET", "somepage" + "?" + postContent, true);
xmlhttp.send(null);

POST 方式

var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" 
	+ encodeURIComponent("[email protected]");
xmlhttp.open("POST", "somepage", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Content-Type", "text/xml"); //如果傳送的是一個xml檔案
xmlhttp.send(postContent);

get方式

get方式是最為常見的，一般實現使用者登入，修改密碼用的都是get方式。

新建一html文件，body標籤內容如下：

<body style="text-align: center">
    <input type ="text" id ="txt" />
    <br />
    <input type ="button" value ="get方式回撥"  onclick ="get()" />
</body>

js程式碼檔案

var xhr=getXHR();//獲得xmlhttprequest物件,getXHR函式的具體實現這裡不給出，因為非常簡單
function get()
{
    var str=document.getElementById ("txt").value;
    var url="PageAjax.aspx?argument="+escape(str);//編碼str
    xhr.open("get",url,true);
    xhr.onreadystatechange=renew;
    xhr.send(null);//不傳送任何內容,因為url中包含了引數資料
}
function renew()
{
    if (xhr.readystate==4)
    {
        if (xhr.status==200)
        {
            var response=xhr.responsetext;
            var res=response.split('\n');
            alert(res[0]);
        }
    }
}

伺服器端PageAjax.aspx.cs檔案程式碼如下

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["argument"] != null)
        {
            string res ="成功實現post方式回撥！傳入的引數是："+ Request["argument"].ToString()+"\n";
            Response.Write(res);
        }
    }

到此一個簡單的get方式回撥完成。

post方式

由於get方式每次都要傳入引數到url地址上，像使用者名稱，密碼之類的引數由於字元比較少，完全可以考慮這中傳遞方式，但是當有很多引數、並且引數的字串值很長時（比如部落格，你不可能把整篇部落格的內容都以引數的方式傳遞到url上），這種方式就不好了，由於有了post方式的出現。

新建一html文件，body標籤內容如下：

<textarea id="TextArea1" style="width: 323px; height: 76px"></textarea>
    <br />
    <input id="Button1" type="button" value="post方式回撥" onclick="post()" />

js程式碼檔案

var xhr=getXHR();//獲得xmlhttprequest物件,getXHR函式的具體實現這裡不給出，因為非常簡單
function post() 
{
    var str=document.getElementById ("TextArea1").value;
    var poststr="arg="+str;
    var url="PageAjax.aspx?time="+new Date();//加一時間戳,放置發回的資料是伺服器快取的資料
    xhr.open("post",url,true);
   
    xhr.onreadystatechange=update;
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //告訴伺服器傳送的是文字
    //xhr.setRequestHeader("Content-Type", "text/xml"); //告訴伺服器傳送的是一個xml檔案
xhr.send(poststr);//傳送poststr資料到伺服器}function update(){ if (xhr.readystate==4) { if (xhr.status==200) { var response=xhr.responsetext; var res=response.split('\n'); alert(res[0]); } }}

伺服器端PageAjax.aspx.cs檔案程式碼如下

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["arg"] != null)
        {
            string res = "成功實現get方式回撥！傳入的引數是：" + Request["arg"].ToString() + "\n";
            Response.Write(res);
        }
    }

到此一個簡單的post方式回撥完成。

Get 與 Post 的程式碼編寫上的區別

.......  
function createQueryString(){  
 var firstName = document.getElementById("firstName").value;  
 var secName = document.getElementById("secName").value;  
  
 var querystring="firstName="+firstName+"&secName="+secName;  
}  
  
  
//GET方式  
function doRequestUsingGET(){  
   createXMLHttpRequest();  
   var queryString = "test.php?";  
   queryString= queryString + createQueryString()+"&timstamp="+new Date().getTime();  
   Ajax.onreadystatechange=handleStateChange;  
   Ajax.open("GET",queryString,true);  
   Ajax.send(null);  
  
}  
  
//POST方式  
function doRequestUsingPOST(){  
   createXMLHttpRequest();  
  
  /* 注意以下程式碼與GET方式的區別 */  
   var url= "test.php?timstamp="+new Date().getTime();  
   // POST 需要定義傳送的字串
   var queryString=createQueryString();
   Ajax.open("POST",url,true);  
   Ajax.onreadystatechange=handleStateChange;  
   // POST 需要設定請求頭部
   Ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")  
   // 引數不為 null 
   Ajax.send(queryString);  
  
}  
  
function handleStateChange(){  
    if(Ajax.readyState==4){  
       if(Ajax.status==200){ .......}   //成功資料其它資料  
    }  
  
}  
下面看一個例子：
    使用jsp+Ajax+ Servlet實現非同步傳輸：
    客戶端程式碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>

	<head>

		<title>Ajax</title>

		<script type="text/javascript">

	function loadXMLDoc() {

		if (document.getElementById("account").value == "") {

			document.getElementById("accDiv").innerHTML = "使用者名稱不能為空";

			return;

		}

//先例項化一個XMLHttpReques物件，根據不同的瀏覽器的不同設定不同的例項化構造方法；
		var xmlHttp;

		if (window.XMLHttpRequest) {                // IE版本7以上

			xmlHttp = new XMLHttpRequest();

		} else {                                    // IE版本5和IE版本6

			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

		}

//當onreadystatechange發生改變時執行function（）
		xmlHttp.onreadystatechange = function() {

			if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

//xmlHttp.responseText  responseText是獲取到伺服器返回的資料
document.getElementById("accDiv").innerHTML = xmlHttp.responseText;
			}

		}

		var a = document.getElementById("account").value;

		var url = "validate?";

		var transData = "name=" + encodeURI(a);

xmlHttp.open("POST", url, true);

//若使用POST進行傳值，則必須加上下面的語句，進行請求引數宣告。
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
//將要傳送的引數使用send（String data）傳送；
xmlHttp.send(transData);
	}
	function delData() {

		document.getElementById("account").value = "";

		document.getElementById("accDiv").innerHTML = "";

	}

</script>

<style type="text/css">

#accDiv {

	font-family: 楷體;

	font-size: 14px;

	color: #FF0000;

}

</style>

	</head>

	<body>

		<h3>

			ajax

		</h3>

		<table>

			<tr>

				<td>

					賬號：

				</td>

				<td>

					<input id="account" type="text" onblur="loadXMLDoc();"

						onfocus="delData();" />

				</td>

				<td>

					<div id="accDiv"></div>

				</td>

			</tr>

			<tr>

				<td>

					密碼：

				</td>

				<td>

					<input id="passwd" type="password" />

				</td>

			</tr>

			<tr>

				<td>

					確認密碼：

				</td>

				<td>

					<input id="vPasswd" type="password" />

				</td>

			</tr>

			<tr>

				<td>

					姓名：

				</td>

				<td>

					<input id="name" type="text" />

				</td>

			</tr>

		</table>

	</body>

</html>

伺服器端：
public class validate extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

	}

 //因為使用POST傳值，所以要使用doPost進行接收
public void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {


 //此處必須加，如不，則客戶端獲取的返回值會是亂碼。
response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
//接受資料時，需要將傳過來的資料編碼轉換成utf-8;就可以接收資料，不會再出現亂碼。
String name = new String(request.getParameter("name").getBytes(

				"ISO-8859-1"), "utf-8");
		System.out.println(name);

		out.print(name);

	}

}

相關推薦

ajax與伺服器傳值有兩種方式：get 和post的區別

get是把引數資料佇列加到提交表單的ACTION屬性所指的URL中，值和表單內各個欄位一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。使用者看不到這個過程。get可以使用瀏覽器的快取機制，別

雜談——HTTP的兩種請求：GET和POST的作用、區別與本質

當面試的時候，考官問你：GET和POST的作用是什麼，它們又有什麼區別呢 這時候你該如何回答呢？ 且讓我們來理一理思緒~ 開始入手web專案的夥伴們基本上都開始使用GET和POST請求了，那這兩種請求到底是什麼東西呢，它又有什麼作用？ 今天我們來細細瞭解一下。GET和POST作

request獲得引數的兩種方式：get、post 共4中！

第一種：方法：String name = request.getParameter("name");傳遞引數的方式：get請求傳遞引數：1.直接在位址列給出引數：http://localhost:8080/httprequestdemo/hello3?name=1&a

SAP與金稅連線有兩種方式：元件介面及文字介面。

SAP與金稅連線有兩種方式：元件介面及文字介面。 文字介面為例： 1、SAP取發票資料，主要來自合同，銷售訂單，交貨單，發票，客戶供應商主資料等 2、SAP處理：合併，拆分，折扣等 3、匯出TXT文字 4、金稅開票機讀取文字：通過引數傳遞資料，注意1分錢誤差問題（引數傳遞導致） 5、回寫

Java 多執行緒傳值有三種方式，以及另類的第四種方式

現在博主的需求是：有可能在同一個執行緒類執行不一樣的程式。上邊兩個紅框中的cron4j排程器使用的是一個，根據引數不同來執行的。如果我點選後邊的手動執行一次，按照我上邊給出的java程式碼是無法實現的。看下邊的新的程式碼： (adsbygoogle = window.adsbygoo

ajax的data傳參的兩種方式

1./** * 訂單取消 * @return {Boolean} 處理是否成功 */ function orderCancel(orderId, commant){ var flag = false; $.ajax({ type: "POST",

springmvc 前臺向後臺傳值的兩種方式

<web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://xmlns.jcp.org/xml/ns/javaee"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/j

ASP.NET MVC 下拉框的傳值的兩種方式

        以前使用WebForm變成時，下拉框傳值只需直接在後臺繫結程式碼就可以了。現在我們來看看在MVC中DropDownList是如果和接受從Controller傳過來的值的。 第一種：使用DropDownList     控制器程式碼： p

細談 C++ 返回傳值的三種方式：按值返回、按常量引用返回以及按引用返回

一、引言 停滯了很久，最近又開始細細品味起《Data Structure And Algorithm Analysis In C++》這本書了。這本書的第一章即為非常好的 C++11 統領介紹的教材範文，可能對於 C++11 新手來說，作者這樣短篇幅的介紹或許有些蒼白晦澀，但是對於我

實現Comet(伺服器推送)的兩種方式：長輪詢和http流

Comet 是一種高階的Ajax技術，實現了伺服器向頁面實時推送資料的技術，應用場景有體育比賽比分和股票報價等。實現Comet有兩種方式：長輪詢與http流長輪詢是短輪詢的翻版，短輪詢的方式是：頁面定時向伺服器傳送請求，看有沒有更新的資料。而長輪詢的方式是，頁面向伺服器發起一

Http兩種請求方式：Get 和Post的區別

什麼是HTTP? 超文字傳輸協議(HyperText Transfer Protocol – HTTP)是一個設計來使客戶端和伺服器順利進行通訊的協議。 HTTP在客戶端和伺服器之間以request-response protocol（請求-回覆協議）工作。 get：從指定的伺服器中獲取

分散式理論基礎（一）一致性及解決一致性的兩種方式：2PC和3PC （轉載 不錯）

分散式理論基礎（一）一致性及解決一致性的兩種方式：2PC和3PC 1 一致性 1.1 簡述 一致性，是指對每個節點一個數據的更新，整個叢集都知道更新，並且是一致的 假設一個具有N個節點的分散式系統，當其滿足以下條件時，我們說這個系統滿足一致性： 全認同: 所有N個節點都認同一個結果 值合法: 該結果必須

測試redis叢集的兩種方式：分片和哨兵

import java.util.ArrayList; import java.util.HashSet; import java.util.List; import java.util.Set; import redis.clients.jedis.Jedi

Django請求處理的兩種方式：FBV 和 CBV

django中請求處理方式有2種：FBV 和 CBV 一、FBV FBV（function base views） 就是在視圖裡使用函式處理請求。 看程式碼： urls.py from django.conf.urls import url, include from myt

圖片引用的兩種方式background-image和的區別

發現問題的地方： 在模擬百度首頁進行製作的時候，在百度的搜尋文字框中有一個小照相機，這個照相機是一個圖片的一部分，在滑鼠移動到這個地方的時候它自動換到圖片的下半部分進行變色，而這個圖片的引用就是使用的background-image引用的，但是使用im

使用 HTTP 協議訪問網路的兩種方式：HttpURLConnection 和 HttpClient

安卓中進行基於HTTP協議的網路訪問 說明： HttpClient (apache開發） HttpURLConnection（google在釋出安卓時在Java基礎上修改得到的） 使用HC(HttpClient)/UC(HttpURLConnect

MFC操作XML配置檔案的兩種方式：DOM 和 MSXML

這幾天做VC專案涉及到了建立xml配置檔案這方面的問題，糾結了好多天，嘗試了N種方法，終於完成了工作任務，現在和大家分享下：  我參考瞭如下的資料: XML DOM 例項:http://www.w3school.com.cn/example/xdom_examples.as

前臺向後臺傳值的兩種方法 以及 從後臺獲取數據的方法

list 獲取數據 data border asc req rip attr 訂單 1、前臺向後臺傳值方法一： 表單提交的方式： 1 <form action="${path }/manage/logon.do" method="post" id="logonFo

查詢一個對象的屬性值有兩種方法

查詢 復制 方法 spa 自動 span blog 字符 class 　查詢一個對象的屬性值有兩種方法 　　 var obj = { name: ‘lyl‘ }; // 第一種方法 console.log(obj[‘name‘]);

通過ajax向伺服器傳值

前端程式碼： function chuanzhi() { //通過id獲取值 var number= $("#id").val(); $.ajax({ //提