Get請求傳遞參數詳解

一、請求行參數

每個HTTP請求都由請求行、請求頭、請求體三部分組成，而get請求通過請求行傳遞參數。請求行由請求方法、請求資源路徑和HTTP協議版本三部分組成，如下面的例子：

GET /path/to/resource?id=123&name=test HTTP/1.1
Host: www.example.com

上面的請求行中，參數id的值為123，參數name的值為test，這兩個參數通過?符號接在資源路徑的後面，多個參數之間用&符號連接。

通過JavaScript可以輕鬆地從請求行中解析出參數：

function parseQueryString(queryString) {
  var params = {};
  queryString.replace(/([^=]+)=(\w+)/g, function(_, key, value) {
    params[key] = value;
  });
  return params;
}
var params = parseQueryString(location.search.slice(1));
console.log(params.id, params.name);

上面的代碼通過正則表達式從location.search中解析出參數，並將其存儲在params對象中。通過params.id和params.name可以分別獲取參數id和name的值。

二、請求頭參數

get請求還可以通過請求頭傳遞參數。請求頭由鍵值對組成，每個鍵值對通過冒號分隔，在每一行末尾加上換行符(\r\n)。一個常見的請求頭如下：

GET /path/to/resource HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept-Language: en-US,en;q=0.5
Cookie: name=value; name2=value2

在上面的請求頭中，最後一行包含了一個Cookie參數，該參數可以用於傳遞會話標識或其他需要在伺服器和客戶端之間共享的數據。

通過JavaScript可以輕鬆地從請求頭中讀取參數：

function getHeader(name) {
  var header = new RegExp(name + ":\\s*(.*)\\r", "i").exec(arguments.callee.caller.caller.toString());
  return header ? header[1] : null;
}
var cookie = getHeader("Cookie");
console.log(cookie);

上面的代碼利用了JavaScript中函數的arguments對象和caller屬性，從調用該函數的函數中獲取請求頭信息。

三、URL參數

在URL中傳遞參數是get請求最常見的方式之一。URL由協議名、主機名、埠號、路徑名和查詢部分五部分組成，其中查詢部分可以包含參數，如下面的例子：

https://www.example.com/path/to/resource?id=123&name=test

上面的URL中，參數id的值為123，參數name的值為test。參數的傳遞方式和請求行參數一樣，都是通過?符號接在資源路徑的後面，多個參數之間用&符號連接。

通過JavaScript可以輕鬆地從URL中解析出參數：

function parseQueryString(queryString) {
  var params = {};
  queryString.replace(/([^=]+)=(\w+)/g, function(_, key, value) {
    params[key] = value;
  });
  return params;
}
var params = parseQueryString(location.search.slice(1));
console.log(params.id, params.name);

上面的代碼與請求行參數中的代碼相同。

四、表單提交參數

在HTML中，表單提交是傳遞參數的一種常見方式。表單可以通過GET或POST方法提交，當使用GET方法提交時，參數會附加在action屬性的URL後面，如下面的例子：

<form action="path/to/resource" method="get">
  <input type="hidden" name="id" value="123">
  <input type="text" name="name" value="test">
  <input type="submit" value="Submit">
</form>

在上面的代碼中，id參數和name參數分別通過隱藏欄位和文本欄位提交。通過這種方式提交的參數，可以像URL參數一樣從請求行或URL中解析出。

通過JavaScript可以輕鬆地從表單中獲取參數：

var form = document.querySelector("form");
var params = {};
for (var i = 0; i < form.elements.length; i++) {
  var elem = form.elements[i];
  if (elem.tagName === "INPUT" || elem.tagName === "SELECT") {
    params[elem.name] = elem.value;
  }
}
console.log(params.id, params.name);

上面的代碼通過循環遍歷表單欄位，將其名稱和值存儲在params對象中。通過params.id和params.name可以分別獲取id參數和name參數的值。

五、AJAX請求參數

在AJAX請求中使用GET方法傳遞參數也很常見。可以使用XMLHttpRequest對象或fetch API來發送AJAX請求。下面是一個使用fetch API發送GET請求的示例：

fetch("path/to/resource?id=123&name=test", {
  method: "GET",
  headers: { "Content-Type": "application/json" }
}).then(response => {
  console.log(response.status, response.statusText);
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

上面的代碼使用fetch API發送GET請求，參數id和name通過URL附加在資源路徑後面。該請求還設置了Content-Type請求頭為application/json。響應數據為JSON格式，通過鏈式調用then方法解析。

通過XMLHttpRequest對象發送AJAX請求也很常見。下面是一個使用XMLHttpRequest對象發送GET請求的示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "path/to/resource?id=123&name=test");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function() {
  console.log(xhr.status, xhr.statusText);
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.error(xhr.statusText);
};
xhr.send();

上面的代碼使用XMLHttpRequest對象發送GET請求，參數id和name通過URL附加在資源路徑後面。該請求還設置了Content-Type請求頭為application/json。響應數據由onload和onerror事件處理函數處理。