一、实例化 XMLHttpRequest 对象
使用 Ajax API 的第一件事情就是实例化 XMLHttpRequest 对象。
var xhr = new XMLHttpRequest();
二、初始化请求
使用 XMLHttpRequest 对象时，要调用的第一个方法就是 open()。它不会真正发送请求，而只是初始化一个请求准备发送。
open() 方法接受三个参数：请求的类型（“GET”、“POST”等）、请求的资源地址和表示是否发送异步请求的布尔值（默认为 true）。
xhr.open(\'GET\', \'example.php\', false);
启动一个同步 GET 请求，请求的资源地址为 example.php。
三、发送请求
xhr.send(null);
send() 方法接受一个参数，表示发送的请求主体数据。如果不需要发送请求主体数据，则必须输入 null，因为这个参数对有些浏览器来说是必需的。
四、GET 请求
HTML 代码：
<div class="content"></div>
JavaScript 脚本：
var xhr = new XMLHttpRequest();
function addURLParam(url, name, value) {
url += (url.indexOf(\'?\') == -1 ? \'?\' : \'&\');
url += encodeURIComponent(name) + \'=\' + encodeURIComponent(value);
return url;
}
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.querySelector(\'.content\').innerHTML = xhr.responseText;
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
var url = \'server.php\';
url = addURLParam(url, \'author\', \'张宝\');
url = addURLParam(url, \'article\', \'XMLHttpRequest API 使用指南\');
xhr.open(\'GET\', url, true);
xhr.send(null);
PHP 处理脚本：
if (isset($_GET["author"]) && isset($_GET["article"])) {
echo "GET:《" . $_GET["article"] . "》 by " . $_GET["author"];
}
五、POST 请求
POST 请求把数据作为请求主体提交。
5.1 使用序列化数据
HTML 代码：
<div class="content"></div>
JavaScript 脚本：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.querySelector(\'.content\').innerHTML = xhr.responseText;
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
var url = \'../asset/source/server.php\';
xhr.open(\'POST\', url);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("foo=bar&lorem=ipsum");
PHP 处理脚本：
if (isset($_POST["foo"]) && isset($_POST["lorem"])) {
echo "POST: foo=" . $_POST["foo"] . "&lorem=" . $_POST["lorem"];
}
5.2 使用序列化后的表单数据
HTML 代码：
<div class="content">
<form id="postForm">
<input type="text" value="bar" name="foo"><input type="text" value="ipsum" name="lorem">
</form>
</div>
JavaScript 脚本：
var xhr = new XMLHttpRequest();
function serialize(form) {
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for (i = 0, len = form.elements.length; i < len; i++) {
field = form.elements[i];
switch (field.type) {
case \'select-one\':
case \'select-multiple\':
if (field.name.length) {
for (j = 0, optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if (option.selected) {
optValue = \'\';
if (option.hasAttribute) {
optValue = (option.hasAttribute(\'value\') ?
option.value : option.text);
} else {
optValue = (option.attributes[\'value\'].specified ?
option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + \'=\' +
encodeURIComponent(optValue));
}
}
}
break;
case undefined:
case \'file\':
case \'submit\':
case \'reset\':
case \'button\':
break;
case \'radio\':
case \'checkbox\':
if (field.checked) {
break;
}
default:
if (field.name.length) {
parts.push(encodeURIComponent(field.name) + \'=\' +
encodeURIComponent(field.value));
}
}
}
return parts.join(\'&\');
}
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.querySelector(\'.content\').innerHTML = xhr.responseText;
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
var url = \'server.php\';
xhr.open(\'POST\', url);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(serialize(document.getElementById(\'postForm\')));
PHP 处理脚本：
if (isset($_POST["foo"]) && isset($_POST["lorem"])) {
echo "POST: foo=" . $_POST["foo"] . "&lorem=" . $_POST["lorem"];
}
六、FormData 类型
FormData 类型可以用于构造表单数据。
var formData = new FormData();
formData.append(\'username\', \'张三\');
formData.append(\'email\', \'zhangsan@example.com\');
formData.append(\'birthDate\', 1940);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.querySelector(\'.content\').innerHTML = xhr.responseText;
} else {
console.error(xhr.statusText);
}
}
};
xhr.open("POST", "server.php");
xhr.send(formData);
PHP 处理脚本：
if (isset($_POST["username"]) && isset($_POST["email"]) && isset($_POST["birthDate"])) {
echo "POST: username=" . $_POST["username"] . "&email=" . $_POST["email"] . "&birthDate=" . $_POST["birthDate"];
}
七、上传文件
HTML 代码：
<form action="uploadFiles.php" method="post" enctype="multipart/form-data">
<label for="file">文件名：</label>
<input type="file" name="images[]" multiple>
</form><hr>
<div class="content"></div>
JavaScript 代码：
function uploadFiles(url, files) {
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
formData.append(\'images[]\', file); // 有可选的第三个参数，指定上传文件的文件名
}
var xhr = new XMLHttpRequest();
xhr.open(\'POST\', url, true);
xhr.onload = function(e) {
document.querySelector(\'.content\').innerHTML = xhr.responseText;
};
xhr.send(formData);
}
document.querySelector(\'input[type="file"]\').addEventListener(\'change\', function(e) {
uploadFiles(\'../asset/source/uploadFiles.php\', this.files);
}, false);
PHP 服务器处理脚本（在与脚本同级的目录下，新建文件夹 uploads，作为保存上传文件的地方）：
for($i = 0; $i< count($_FILES[\'images\'][\'name\']); $i++) {
if ($_FILES[\'images\']["error"][$i] > 0) {
switch($_FILES[\'images\']["error"][$i]) {
case 1:
$err_info="上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
break;
case 2:
$err_info="上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;
case 3:
$err_info="文件只有部分被上传";
break;
case 4:
$err_info="没有文件被上传";
break;
case 6:
$err_info="找不到临时文件夹";
break;
case 7:
$err_info="文件写入失败";
break;
default:
$err_info="未知的上传错误";
break;
}
echo "错误：" . $err_info . "<hr>";
continue;
}
echo "上传文件名: " . $_FILES[\'images\']["name"][$i] . "<br>";
echo "文件类型: " . $_FILES[\'images\']["type"][$i] . "<br>";
echo "文件大小: " . ($_FILES[\'images\']["size"][$i] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES[\'images\']["tmp_name"][$i];
echo "<hr>";
$tmpFilePath = $_FILES[\'images\'][\'tmp_name\'][$i];
if ($tmpFilePath != "") {
$newFilePath = "./uploads/" . $_FILES[\'images\'][\'name\'][$i];
move_uploaded_file($tmpFilePath, $newFilePath);
}
}
（完）