在Web開發中，經常會遇到需要同時處理JSON數據和文件流的情況。用傳統的方式來實現這個需求可能會比較繁瑣，但是借助AJAX技術，我們可以輕松地同時接收JSON數據和文件流。本文將通過舉例說明，詳細介紹如何使用AJAX來實現這一功能。

假設我們有一個需求，需要實現一個圖片上傳的功能。用戶可以選擇一張圖片并上傳到服務器，同時還需要返回一個包含圖片信息的JSON對象。首先，我們需要編寫前端部分的代碼來處理文件上傳和AJAX請求。

// HTML部分
<form id="upload-form">
<input type="file" name="image" id="image-input">
<input type="submit" value="上傳">
</form>
// JavaScript部分
document.getElementById("upload-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var fileInput = document.getElementById("image-input");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
// 對返回的JSON數據進行處理
}
};
xhr.send(formData);
});

在上述代碼中，我們首先監聽表單的提交事件，并阻止了默認的表單提交行為。然后，我們獲取到用戶選擇的文件，并將其添加到FormData對象中。接下來，我們創建一個XMLHttpRequest對象，設置請求方法和URL，并設置請求的回調函數。最后，通過調用xhr.send方法，將FormData對象發送給服務器。

在后端部分的代碼中，我們需要使用相應的框架來處理AJAX請求并同時接收JSON數據和文件流。以下是使用Node.js和Express框架的示例代碼：

const express = require("express");
const app = express();
app.post("/upload", function(req, res) {
// 處理上傳的文件流
req.pipe(req.busboy);
req.busboy.on("file", function(fieldname, file, filename) {
// 處理文件流
});
// 處理JSON數據
req.on("data", function(data) {
var json = JSON.parse(data);
// 對JSON數據進行處理
});
res.sendStatus(200);
});
app.listen(3000, function() {
console.log("Server is running on port 3000");
});

在上述代碼中，我們使用了`busboy`模塊來處理上傳的文件流。通過`req.busboy.on`方法，我們監聽了`file`事件，可以在事件處理函數中對文件流進行進一步處理。同時，我們也監聽了`data`事件，可以在事件處理函數中對JSON數據進行進一步處理。

總結起來，使用AJAX同時接收JSON數據和文件流并不復雜。通過FormData對象，我們可以將文件添加到請求中，并使用XMLHttpRequest對象將其發送給服務器。在服務器端，我們可以借助相應的框架和模塊來處理文件流和JSON數據。通過以上的例子，相信讀者可以更好地理解和掌握這個技術。