Bootstrap

javascript基础从小白到高手系列二百一十九:GET 请求

最常用的请求方法是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 的数据。比如:

<?php header("Content-Type: text/plain"); echo <<

假如没有发送Content-Type 头部,PHP 的全局$_POST 变量中就不会包含数据,而需要通过
$HTTP_RAW_POST_DATA 来获取。

;