原生Ajax
阿新 • • 發佈：2021-01-03
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步的Javascript和XML”。即使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（當然，傳輸的資料不只是XML）。
AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。（這一特點給使用者的感受是在不知不覺中完成請求和響應過程）
AJAX 不需要任何瀏覽器外掛，但需要使用者允許JavaScript在瀏覽器上執行。
- 同步互動：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
- 非同步互動：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求（預設）。
AJAX的優缺點
優點：
- AJAX使用JavaScript技術向伺服器傳送非同步請求；
- AJAX請求無須重新整理整個頁面；
- 因為伺服器響應內容不再是整個頁面，而是頁面中的部分內容，所以AJAX效能高；
Ajax呼叫本地json檔案示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 2 - json</title>
</head>
<body>
<button id='btn-1'>單個使用者</button>
<button id='btn-2'>所有使用者</button>
<br><br>
<h1>單個數據</h1>
<p id="user"></p>
<h1>多個數據</h1>
<p id="users"></p>
</body>
<script>
let userBtn = document.getElementById('btn-1');
let user = document.getElementById('user');
let usersBtn = document.getElementById('btn-2');
let users = document.getElementById('users');
// 回撥函式不要加括號，否則會變成立即執行函式
userBtn.addEventListener('click',loadUser);
usersBtn.addEventListener('click',loadUsers);
function loadUser(){
let xhr = new XMLHttpRequest();
xhr.open('GET','user.json', true);
xhr.onload = function(){
if(user.innerHTML.length>0){
user.innerHTML = '';
return;
}
if((xhr.status >= 200 && xhr.status <= 300)||xhr.status==304){
let userInfo = JSON.parse(this.responseText);
//console.log(user);
let output = '';
output += `
<ul>
<li>id: ${userInfo.id}</li>
<li>name: ${userInfo.name}</li>
</ul>
`
user.innerHTML = output;
}
}
xhr.send();
}
function loadUsers(){
let xhr = new XMLHttpRequest();
xhr.open('GET','users.json', true);
xhr.onload = function(){
if(users.innerHTML.length>0){
users.innerHTML = '';
return;
}
if((xhr.status >= 200 && xhr.status <= 300)||xhr.status==304){
let usersInfo = JSON.parse(this.responseText);
//console.log(users);
let output = '';
for(const e in usersInfo){
output += `
<ul>
<li>id: ${usersInfo[e].id}</li>
<li>name: ${usersInfo[e].name}</li>
</ul>
`
}
users.innerHTML = output;
}
}
xhr.send();
}
</script>
</html>Ajax呼叫API示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 3 - API</title>
</head>
<body>
<button id='btn'>顯示</button>
<br><br>
<h1>所有github的使用者資訊</h1>
<div id="users"></div>
</body>
<script>
let users;
function loadInfo(){
if(document.getElementById('users').innerHTML.length>0){
users = '';
document.getElementById('users').innerHTML='';
document.getElementById('btn').innerText = '顯示';
return;
}
document.getElementById('btn').innerText = '隱藏';
let xhr = new XMLHttpRequest();
xhr.open('GET','https://api.github.com/users',true);
xhr.onload = ()=>{
if (xhr.status==304) return;
if((xhr.status>=200 && xhr.status<=300)){
users = JSON.parse(xhr.responseText);
//console.log(JSON.stringify(users));
for(const e in users){
let output = `
<div style="width: 300px; margin: 10px; padding: 5px; background: lightblue; text-align: center;">
<img src='${users[e].avatar_url}' width=300 height=300>
<p>${users[e].login}<p>
<a href='${users[e].html_url}'>homepage</a>
</div>
`;
document.getElementById('users').innerHTML += output;
}
}
}
xhr.send();
}
document.getElementById('btn').addEventListener('click',loadInfo);
</script>
</html>
fetch方法
fetch是ES的新api，可以簡化手寫ajax。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch - API</title>
</head>
<body>
<button id='btn'>顯示</button>
<br><br>
<h1>所有github的使用者資訊</h1>
<div id="users"></div>
</body>
<script>
let usersInfo = document.getElementById('users');
let btn = document.getElementById('btn');
async function getData(){
const response = await fetch('https://api.github.com/users');
users = await response.json();
users.forEach(user=>{
let output = `
<div style="width: 300px; margin: 10px; padding: 5px; background: lightblue; text-align: center;">
<img src='${user.avatar_url}' width=300 height=300>
<p>${user.login}<p>
<a href='${user.html_url}'>homepage</a>
</div>
`;
usersInfo.innerHTML += output;
});
}
btn.addEventListener('click',getData);
</script>
</html>