ajax(Asynchronous Javascript And XML)
異步 JavaScript 和 XML
xml
json
瀏覽器-------服務器
瀏覽器------ajax------服務器
ajax 實現頁面無刷新更新數據
注意 ajax運行在網絡環境下
基本使用
服務端
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const path = require('path');
// 解析json數據
app.use(bodyParser.json());
// 解析字符串數據
//app.use(bodyParser.urlencoded());
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.send('welcome');
});
app.get('/get', (req, res) => {
res.send(req.query);
});
app.post('/post', (req, res) => {
res.send(req.body);
});
// 接口
app.get('/jsonData', (req, res) => {
res.send({ "age": 20 });
});
app.listen(7788);
靜態頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1></h1>
<script>
// 1 創建ajax
var xhr = new XMLHttpRequest();
// 2 配置 請求方式和請求地址
xhr.open('get', 'http://localhost:7788/jsonData');
// 3 發送請求
xhr.send();
// 4 監聽事件 onload 接受完整的服務器響應數據 觸發
xhr.onload = function() {
// console.log(typeof xhr.responseText); // 服務器相應的結果都是字符串
//document.getElementsByTagName('h1')[0].innerHTML = xhr.responseText;
// json字符串->json對象
var resText = JSON.parse(xhr.responseText); // xhr.responseText 通過這個拿到數據 json字符串轉json對象
document.getElementsByTagName('h1')[0].innerHTML = resText.age;
}
</script>
</body>
</html>
ajax處理get請求參數和post請求參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="uname" id="uname"><br />
<input type="password" name="pwd" id="pwd"><br />
<input type="button" value="提交" id="btn" />
<script>
var btn = document.getElementById('btn');
var uname = document.getElementById('uname');
var pwd = document.getElementById('pwd');
btn.onclick = function() {
/* get請求參數
var xhr = new XMLHttpRequest();
var params = 'uname=' + uname.value + "&pwd=" + pwd.value;
xhr.open('get', 'http://localhost:7788/get?' + params);
xhr.send();
xhr.onload = function() {
console.log(xhr.responseText);
}
*/
// post請求參數
var params = 'uname=' + uname.value + "&pwd=" + pwd.value;
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:7788/post');
// 設置請求參數格式類型
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.send(params);
// 第二種方法，給予json格式內容
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
"uname": uname.value,
"pwd": pwd.value
}));
xhr.onload = function() {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>