如何理解ajax中的get和post

本篇文章為大家展示了如何理解ajax中的get和post，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一.談Ajax的Get和Post的區(qū)別

   Get方式:
   用get方式可傳送簡單數(shù)據(jù)，但大小一般限制在1KB下，數(shù)據(jù)追加到url中發(fā)送（http的header傳送），也就是說，瀏覽器將各個表單字段元素及其數(shù)據(jù)按照URL參數(shù)的格式附加在請求行中的資源路徑后面。另外最重要的一點是，它會被客戶端的瀏覽器緩存起來，那么，別人就可以從瀏覽器的歷史記錄中，讀取到此客戶的數(shù)據(jù)，比如帳號和密碼等。因此，在某些情況下，get方法會帶來嚴重的安全性問題。

   Post方式:
   當使用POST方式時，瀏覽器把各表單字段元素及其數(shù)據(jù)作為HTTP消息的實體內(nèi)容發(fā)送給Web服務器，而不是作為URL地址的參數(shù)進行傳遞，使用POST方式傳遞的數(shù)據(jù)量要比使用GET方式傳送的數(shù)據(jù)量大的多。

   總之，GET方式傳送數(shù)據(jù)量小，處理效率高，安全性低，會被緩存，而POST反之。

使用get方式需要注意：
1 對于get請求（或凡涉及到url傳遞參數(shù)的），被傳遞的參數(shù)都要先經(jīng)encodeURIComponent方法處理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent

(content)+"&id=1" ;

使用Post方式需注意：
1.設置header的Context-Type為application/x-www-form-urlencode確保服務器知道實體中有參數(shù)變量.通常使用XmlHttpRequest對象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.參數(shù)是名/值一一對應的鍵值對,每對值用&號隔開.如 var name=abc&sex=man&age=18，注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的寫法都是錯誤的;
3.參數(shù)在Send(參數(shù))方法中發(fā)送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);

4.服務器端請求參數(shù)區(qū)分Get與Post。如果是get方式則$username = $_GET["username"]; 如果是post方式，則$username = $_POST["username"];

 Post和Get 方法有如下區(qū)別: 
1.Post傳輸數(shù)據(jù)時，不需要在URL中顯示出來，而Get方法要在URL中顯示。 
2.Post傳輸?shù)臄?shù)據(jù)量大，可以達到2M，而Get方法由于受到URL長度的限制,只能傳遞大約1024字節(jié). 
3.Post顧名思義,就是為了將數(shù)據(jù)傳送到服務器段,Get就是為了從服務器段取得數(shù)據(jù).而Get之所以也能傳送數(shù)據(jù),只是用來設計告訴服務器,你到底需要什么樣的數(shù)據(jù).Post的信息作為http請求的內(nèi)容，而Get是在Http頭部傳輸?shù)摹?/p>

get 方法用Request.QueryString["strName"]接收
post 方法用Request.Form["strName"] 接收

注意：
      雖然兩種提交方式可以統(tǒng)一用Request("strName")來獲取提交數(shù)據(jù)，但是這樣對程序效率有影響，不推薦使用。
     一般來說，盡量避免使用Get方式提交表單，因為有可能會導致安全問題

AJAX亂碼問題

產(chǎn)生亂碼的原因:
1、xtmlhttp 返回的數(shù)據(jù)默認的字符編碼是utf-8，如果客戶端頁面是gb2312或者其它編碼數(shù)據(jù)就會產(chǎn)生亂碼
2、post方法提交數(shù)據(jù)默認的字符編碼是utf-8，如果服務器端是gb2312或其他編碼數(shù)據(jù)就會產(chǎn)生亂碼
解決辦法有：
1、若客戶端是gb2312編碼，則在服務器指定輸出流編碼
2、服務器端和客戶端都使用utf-8編碼

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

注意:如果你已經(jīng)按上面的方法做了，還是返回亂碼的話,檢查你的方式是否為get,對于get請求（或凡涉及到url傳遞參數(shù)的），被傳遞的參數(shù)都要先經(jīng)encodeURIComponent方法處理.如果沒有用encodeURIComponent處理的話,也會產(chǎn)生亂碼.

下邊是我找到的一個例子，因為寫的不錯就貼在這里了，自己寫的比較簡單，也不是很規(guī)范還是參考人家寫的好了，呵呵！

post.html:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849var http_request
 = false;   function makePOSTRequest(url,
 parameters) {      http_request
 = false;      if (window.XMLHttpRequest)
 { //
 Mozilla, Safari,...         http_request
 = new XMLHttpRequest();         if (http_request.overrideMimeType)
 {            //
 set type accordingly to anticipated content type            //http_request.overrideMimeType('text/xml');            http_request.overrideMimeType('text/html');         }      } else if (window.ActiveXObject)
 { //
 IE         try {            http_request
 = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e)
 {            try {               http_request
 = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e)
 {}         }      }      if (!http_request)
 {         alert('Cannot
 create XMLHTTP instance');         return false;      }             http_request.onreadystatechange
 = alertContents;      http_request.open('POST',
 url, true);      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");      http_request.setRequestHeader("Content-length",
 parameters.length);      http_request.setRequestHeader("Connection", "close");      http_request.send(parameters);   }    function alertContents()
 {      if (http_request.readyState
 == 4) {         if (http_request.status
 == 200) {            //alert(http_request.responseText);            result
 = http_request.responseText;            document.getElementById('myspan').innerHTML
 = result;                     } else {            alert('There
 was a problem with the request.');         }      }   }       function get(obj)
 {      var poststr
 = "mytextarea1=" +
 encodeURI( document.getElementById("mytextarea1").value
 ) +                    "&mytextarea2=" +
 encodeURI( document.getElementById("mytextarea2").value
 );      makePOSTRequest('post.php',
 poststr);   }

post.php

<?print_r($_POST);?>

一個超大文本框textarea里面有大量數(shù)據(jù)，ajax通過URL請求service返回結(jié)果，URL里面包含了各種參數(shù)，當然也包含之前的超大文本框的內(nèi)容。 

之前開發(fā)的時候一直用Firefox在調(diào)試，4000長度的字符串在textarea里面通過URL請求都是沒有問題。 
提交給測試的時候問題來了，測試人員在IE下面發(fā)現(xiàn)問題，textarea里面字符長度超過2000（大概數(shù)據(jù)）時，會報JS錯誤，ajax沒有返回值給前臺。 

看原先代碼：function getJsonData(url) 
{ 
  var ajax = Common.createXMLHttpRequest(); 
  ajax.open("GET",url,false); 
  ajax.send(null); 
  try 
  { 
   eval("var s = "+ajax.responseText); 
   return s; 
  } 
  catch(e) 
  { 
   return null; 
  } 
} 
function getData(){ 
var url="BlacklistService.do?datas="+datasvalue; 
var result = getJsonData(url); 
} 網(wǎng)上google發(fā)現(xiàn)解決辦法： 
修改使用的XMLHttp的請求為POST，并且把參數(shù)和URL分離出來提交。 修改后代碼如下：function getJsonData(url,para) 
{ 
  var ajax = Common.createXMLHttpRequest(); 
  ajax.open("POST",url,false); 
  ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
  ajax.send(para); 
  try 
  { 
   eval("var s = "+ajax.responseText); 
   return s; 
  } 
  catch(e) 
  { 
   return null; 
  } 
} 
function getData(){ 
var url="BlacklistService.do"; 
var para="datas="+datasvalue; 
var result = getJsonData(url,para);
} ================================Ajax中的get和post兩種請求方式的異同2008年10月04日 星期六 下午 02:37分析兩種提交方式的異同Ajax中我們經(jīng)常用到get和post請求.那么什么時候用get請求,什么時候用post方式請求呢? 在做回答前我們首先要了解get和post的區(qū)別.1、 get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。2、 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數(shù)據(jù)。兩種方式的參數(shù)都可以用Request來獲得。3、get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認為不受限制。但理論上，因服務器的不同而異.4、get安全性非常低，post安全性較高。5、 <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一樣的，也就是說，method為get時action頁面后邊帶的參數(shù)列表會被忽視；而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一樣的。另外 
Get請求有如下特性：它會將數(shù)據(jù)添加到URL中，通過這種方式傳遞到服務器，通常利用一個問號？代表URL地址的結(jié)尾與數(shù)據(jù)參數(shù)的開端，后面的參數(shù)每一個數(shù)據(jù)參數(shù)以“名稱=值”的形式出現(xiàn)，參數(shù)與參數(shù)之間利用一個連接符&來區(qū)分。 
Post請求有如下特性：數(shù)據(jù)是放在HTTP主體中的，其組織方式不只一種，有&連接方式，也有分割符方式，可隱藏參數(shù)，傳遞大批數(shù)據(jù)，比較方便。通過以上的說明,現(xiàn)在我們大致了解了什么時候用get什么時候用post方式了吧,對!當我們在提交表單的時候我們通常用post方式,當我們要傳送一個較大的數(shù)據(jù)文件時,需要用post。當傳遞的值只需用參數(shù)方式(這個值不大于2KB)的時候,用get方式即可。現(xiàn)在我們再看看通過URL發(fā)送請求時，get方式和post方式的區(qū)別。用下面的例子可以很容易的看到同樣的數(shù)據(jù)通過GET和POST來發(fā)送的區(qū)別, 發(fā)送的數(shù)據(jù)是 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-AlivePOST 方式: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-Aliveusername=%E5%BC%A0%E4%B8%89區(qū)別就是一個在 URL 請求里面附帶了表單參數(shù)和值, 一個是在 HTTP 請求的消息實體中。比較一下上面的兩段文字, 我們會發(fā)現(xiàn) GET 方式把表單內(nèi)容放在前面的請求頭中, 而 POST 則把這些內(nèi)容放在請求的主體中了, 同時 POST 中把請求的 Content-Type 頭設置為 application/x-www-form-urlencoded. 而發(fā)送的正文都是一樣的, 可以這樣來構(gòu)造一個表單提交正文: 
encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....注: encodeURIComponent 返回一個包含了 charstring 內(nèi)容的新的 String 對象（Unicode 格式）， 所有空格、標點、重音符號以及其他非 ASCII 字符都用 %xx 編碼代替，其中 xx 等于表示該字符的十六進制數(shù)。 例如，空格返回的是 "%20" 。 字符的值大于 255 的用 %uxxxx 格式存儲。參見 JavaScript 的 encodeURIComponent() 方法.在了解了上面的內(nèi)容后我們現(xiàn)在用ajax的XMLHttpRequest對象向服務器分別用GET和POST方式發(fā)送一些數(shù)據(jù)。GET 方式 
var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" + encodeURIComponent("xiaochengf_21@yahoo.com.cn"); 
xmlhttp.open("GET", "somepage" + "?" + postContent, true); 
xmlhttp.send(null);POST 方式var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" + encodeURIComponent("xiaochengf_21@yahoo.com.cn"); 
xmlhttp.open("POST", "somepage", true); 
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
//xmlhttp.setRequestHeader("Content-Type", "text/xml"); //如果發(fā)送的是一個xml文件 
xmlhttp.send(postContent);

Update from visitor "ar200r" - thank you very much

if we use "&" character it wont work...but if we use escape();var poststr = "mytextarea1=" + escape(encodeURI(document.getElementById("mytextarea1").value )) +"&mytextarea2=" +escape(encodeURI( document.getElementById("mytextarea2").value ));and next in php u use urldecode , it will work good.

上述內(nèi)容就是如何理解ajax中的get和post，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。