ajax的post或者get伺服器請求

admin發表於2018-10-18
伺服器
XMLHttpRequest 物件用於和伺服器交換資料。

如果想要將請求傳送到伺服器，需要使用XMLHttpRequest物件的open()和send()方法。

屬性            描述            
open(method,url,async)            規定請求的型別、URL 以及是否非同步處理請求。
（1）.method:請求的型別；GET或POST。
（2）.url:檔案在伺服器上的位置。
（3）.async:true（非同步）或 false（同步）。            
send(string)            將請求傳送到伺服器。
string:僅用於 POST 請求            

一.get和post區別:

get方式可能速度比較快，並且適用性也很強，但是很多時候還是需要用post。

推薦使用post方式的場景如下:

（1）.不期望使用快取檔案（更新伺服器上的檔案或資料庫）。

（2）.向伺服器傳送大量資料（POST沒有資料量限制）。

（3）.傳送包含未知字元的使用者輸入時，POST比GET更穩定也更可靠。

二.get方式:

先看一個get方式程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/demo.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</div>
</body>
</html>

在上面的程式碼中，點選按鈕可以獲取伺服器的當前日期時間，c#程式碼如下:

[C#] 純文字檢視 複製程式碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(System.DateTime.Now);
        }
    }
}

特別說明:上面的方式在IE瀏覽器可能會從快取中讀取資料，也就是說當第一點選按鈕正常獲取時間日期之後，以後的點選會沒有任何效果，在谷歌或者火狐等瀏覽器中並沒有此中問題，解決方案如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
   }
   else {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange = function () {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       document.getElementById("show").innerHTML = xmlhttp.responseText;
     }
   }
   xmlhttp.open("GET", "demo/ajax/net/demo.aspx?rnd=" + Math.random(), true);
   xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script> 
</head> 
<body> 
<div> 
  <div id="show"></div> 
  <input id="bt" type="button" value="檢視效果"/> 
</div> 
</body> 
</html>

解決方式非常的簡單，就是在url後面新增一個隨機數就可以了，這樣每次請求都被認為是一個新的url，於是就不會快取了。

也可以使用GET方式傳送資訊，可以通過url傳送資訊，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/demoPara.aspx?webName="+escape("螞蟻部落")+"&age=3", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</div>
</body>
</html>

點選按鈕可以獲取指定的內容，下面是c#程式碼:

[C#] 純文字檢視 複製程式碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class demoPara : System.Web.UI.Page
    {
        string webName;
        int age;
        protected void Page_Load(object sender, EventArgs e)
        {
            webName =Server.UrlDecode(Request.QueryString["webName"]);
            age = Convert.ToInt32(Request.QueryString["age"]);
            Response.Write("歡迎來到" + webName + "，本站已經成立" + age + "週年。");
        }
    }
}

三.POST 請求:

看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</div>
</body>
</html>

上面的程式碼利用post方式獲取伺服器的當前時間日期，不存在使用get方式的快取問題。

如果需要像HTML表單那樣POST資料，可以使用setRequestHeader()來新增HTTP頭，然後在send()方法中規定傳送的資料:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/net/postParam.aspx", true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("webName=螞蟻部落&age=3");
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</div>
</body>
</html>

setRequestHeader()相關內容可以參閱XMLHttpRequest setRequestHeader方法一章節。

相關文章