javascript基础从小白到高手系列六百五十九：GET 请求-CSDN博客

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/138270057

最常用的请求方法是GET 请求，用于向服务器查询某些信息。必要时，需要在GET 请求的URL
后面添加查询字符串参数。对XHR 而言，查询字符串必须正确编码后添加到URL 后面，然后再传给
open()方法。
发送GET 请求最常见的一个错误是查询字符串格式不对。查询字符串中的每个名和值都必须使用
encodeURIComponent()编码，所有名/值对必须以和号（&）分隔，如下面的例子所示：
xhr.open(“get”, “example.php?name1=value1&name2=value2”, true);
可以使用以下函数将查询字符串参数添加到现有的URL 末尾：
function addURLParam(url, name, value) {
url += (url.indexOf(“?”) == -1 ? “?” : “&”);
url += encodeURIComponent(name) + “=” + encodeURIComponent(value);
return url;
}
这里定义了一个addURLParam()函数，它接收3 个参数：要添加查询字符串的URL、查询参数和
参数值。首先，这个函数会检查URL 中是否已经包含问号（以确定是否已经存在其他参数）。如果没有，
则加上一个问号；否则就加上一个和号。然后，分别对参数名和参数值进行编码，并添加到URL 末尾。
最后一步是返回更新后的URL。
可以使用这个函数构建请求URL，如下面的例子所示：
let url = “example.php”;
// 添加参数
url = addURLParam(url, “name”, “Nicholas”);
url = addURLParam(url, “book”, “Professional JavaScript”);
// 初始化请求
xhr.open(“get”, url, false);
这里使用addURLParam()函数可以保证通过XHR 发送请求的URL 格式正确。
POST 请求
第二个最常用的请求是POST 请求，用于向服务器发送应该保存的数据。每个POST 请求都应该在
请求体中携带提交的数据，而GET 请求则不然。POST 请求的请求体可以包含非常多的数据，而且数据
可以是任意格式。要初始化POST 请求，open()方法的第一个参数要传"post"，比如：
xhr.open(“post”, “example.php”, true);
接下来就是要给send()方法传入要发送的数据。因为XHR 最初主要设计用于发送XML，所以可
以传入序列化之后的XML DOM文档作为请求体。当然，也可以传入任意字符串。
默认情况下，对服务器而言，POST 请求与提交表单是不一样的。服务器逻辑需要读取原始POST
数据才能取得浏览器发送的数据。不过，可以使用XHR 模拟表单提交。为此，第一步需要把Content-
Type 头部设置为"application/x-www-formurlencoded"，这是提交表单时使用的内容类型。第二
步是创建对应格式的字符串。POST 数据此时使用与查询字符串相同的格式。如果网页中确实有一个表
单需要序列化并通过XHR 发送到服务器，则可以使用第14 章的serialize()函数来创建相应的字符
串，如下所示：
function submitData() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open(“post”, “postexample.php”, true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
let form = document.getElementById(“user-info”);
xhr.send(serialize(form));
}
在这个函数中，来自ID 为"user-info"的表单中的数据被序列化之后发送给了服务器。PHP 文件
postexample.php 随后可以通过$_POST 取得POST 的数据。比如：