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>