1. get請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul></ul>
<script type="text/javascript">
// 獲取數據並顯示
var ul = document.getElementsByTagName('ul');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'users.php');
xhr.send();
xhr.onreadystatechange = function() {
if(this.readyState != 4) return;
var data = JSON.parse(this.responseText);
for(var i = 0; i < data.length; i++) {
var li = document.createElement('li');
li.innerHTML = data[i].name;
li.id = data[i].id; // 賦予id，方便點擊事件的觸發
ul[0].appendChild(li); // 通過TagName獲取的是一個數組
li.addEventListener('click', function(){ // li添加點擊事件
var xhr1 = new XMLHttpRequest();
xhr1.open('GET', 'users.php?id=' + this.id);
xhr1.send();
xhr1.onreadystatechange = function() {
if(this.readyState != 4)return;
var obj = JSON.parse(this.responseText);
alert(obj.age);
}
})
}
}
</script>
</body>
</html>
users.php
<?php
$data = array(
array(
'id' => 1,
'name' => 'Karry',
'age' => 21
),
array(
'id' => 2,
'name' => 'Roy',
'age' => 20
),
array(
'id' => 3,
'name' => 'Yee',
'age' => 20
)
);
if(empty($_GET['id'])) {
// 沒有ID則獲取全部
$json = json_encode($data); // => [{"id":1, "name":"Karry"},{...}]
echo $json;
} else {
// 傳遞了ID則只獲取一條
foreach ($data as $item) {
if($item['id'] != $_GET['id']) continue;
$json = json_encode($item);
echo $json;
}
}
2. post請求（postman測試服務端）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555;
opacity: .5;
text-align: center;
line-height: 300px;
}
#loading::after {
content: 'loading...';
color: #fff;
}
</style>
</head>
<body>
<div id="loading"></div>
<table>
<tr>
<td>用戶名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td></td>
<td><button id="btn">登錄</button></td>
</tr>
</table>
<script type="text/javascript">
var btn = document.getElementById('btn');
var txtUsername = document.getElementById('username');
var txtPassword = document.getElementById('password');
var loading = document.getElementById('loading');
btn.onclick = function() {
loading.style.display = 'block';
var username = txtUsername.value;
var password = txtPassword.value;
console.log(username);
console.log(password);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'login.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // urlencoded格式必須設置請求頭格式
// xhr.send('username=' + username + '&password=' + password);
xhr.send(`username=${username}&password=${password}`); // 轉義引號
xhr.onreadystatechange = function(){
if(this.readyState != 4)return;
console.log(this.responseText);
loading.style.display = 'none';
}
}
</script>
</body>
</html>
login.php
<?php
if(empty($_POST['username']) || empty($_POST['password'])) {
// echo '用戶名或密碼爲空，請重新提交';
exit('用戶名或密碼爲空，請重新提交');
}
$username = $_POST['username'];
$password = $_POST['password'];
if($username == 'admin' && $password == '123') {
exit('登錄成功');
}
exit('用戶名或密碼錯誤');
3. 同步與異步
同步Synchronous：在同一個時刻只能做一件事情，在執行一些耗時的操作（不需要看管）時不去做別的事情，只是等待。
異步asynchronous：在執行一些耗時的操作（不需要看管）去做別的事情，而不是等待。
xhr.open()方法第三個參數要求傳入一個bool值，其作用就是設置此次請求是否採用異步方式執行，默認爲異步true，如果需要同步執行可以通過傳遞false實現，同步耗時主要是在xhr.send()這一步，若是在xhr.send()之後調用onreadystatechange，則不會執行，因爲狀態已經爲4，不會再發生改變。