在Web開(kāi)發(fā)中，AJAX（Asynchronous JavaScript and XML）被廣泛應(yīng)用于網(wǎng)頁(yè)與服務(wù)器之間的異步數(shù)據(jù)交互。它通過(guò)在不重載整個(gè)頁(yè)面的情況下，與服務(wù)器進(jìn)行數(shù)據(jù)的交換與傳輸。那么在實(shí)際開(kāi)發(fā)中，當(dāng)我們使用AJAX傳送數(shù)據(jù)到后臺(tái)時(shí)，后臺(tái)又是如何接收這些數(shù)據(jù)的呢？
舉個(gè)例子，假設(shè)我們正在開(kāi)發(fā)一個(gè)登錄功能，用戶(hù)通過(guò)前端頁(yè)面輸入用戶(hù)名和密碼后，點(diǎn)擊"登錄"按鈕，將數(shù)據(jù)發(fā)送到后臺(tái)進(jìn)行驗(yàn)證。后臺(tái)驗(yàn)證成功后返回相應(yīng)的登錄狀態(tài)給前端。
首先，我們需要在前端通過(guò)AJAX發(fā)送數(shù)據(jù)到后臺(tái)。以下是一個(gè)基本的前端AJAX代碼示例：
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("登錄成功！");
} else {
alert("登錄失敗！" + response.message);
}
}
}
var data = JSON.stringify({username: username, password: password});
xhr.send(data);
}const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/login', (req, res) =>{
const username = req.body.username;
const password = req.body.password;
// 處理驗(yàn)證邏輯...
if (validationPassed) {
res.json({success: true});
} else {
res.json({success: false, message: "用戶(hù)名或密碼錯(cuò)誤"});
}
});
app.listen(3000, () =>{
console.log('服務(wù)器已啟動(dòng)');
});