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事件处理函数处理。