问题描述不是很清晰，但我猜你可能想要实现一个通过Ajax实时从服务器获取数据，并在前端实时更新的功能。同时，你提到了STM32单片机，可能你想要将实时数据发送到STM32单片机并在其上显示。

以下是一个简单的示例，展示了如何使用JavaScript和Ajax从服务器获取数据，并在网页上实时更新。

前端JavaScript代码（使用jQuery）:

$(document).ready(function() {
    setInterval(function() {
        $.ajax({
            url: '/get_data',  // 假设这是你的服务器端路由
            type: 'GET',
            success: function(data) {
                // 假设服务器返回的是JSON数据
                // 更新页面上的元素
                $('#data_display').text(data.message);
            },
            error: function(error) {
                console.error('Error fetching data: ', error);
            }
        });
    }, 1000); // 每秒钟发送一次请求
});

服务器端代码（假设使用Node.js和Express）:

const express = require('express');
const app = express();
const port = 3000;
 
app.get('/get_data', (req, res) => {
    // 假设这是你想要发送到STM32的数据
    const data = { message: 'Hello from STM32' };
    res.json(data);
});
 
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

在这个例子中，前端每秒钟通过Ajax请求从服务器获取数据，服务器端每次收到请求后都会返回相同的数据。

如果你想要将数据发送到STM32，你需要在STM32上运行一个服务来监听来自外部的连接，并解析接收到的数据。这通常涉及到使用TCP/IP或者UDP协议，并在STM32上实现相应的网络栈。

由于你没有提到具体的STM32单片机型号和使用的操作系统，这里不能提供更详细的STM32相关代码。如果你具体到了型号和操作系统，我可以提供更针对性的帮助。

前端代码（jQuery+AJAX）：

$(document).ready(function() {
    $('#username').on('blur', function() {
        var username = $(this).val();
        if (username != '') {
            $.ajax({
                url: '/check-username', // 后端接口地址
                type: 'POST',
                data: { username: username },
                success: function(response) {
                    if (response.status === 'success') {
                        $('#username-message').text(response.message).css('color', 'green');
                    } else {
                        $('#username-message').text(response.message).css('color', 'red');
                    }
                },
                error: function() {
                    alert('Error occurred while checking username. Please try again later.');
                }
            });
        }
    });
});

后端代码（Node.js示例）：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
 
app.post('/check-username', (req, res) => {
    const username = req.body.username;
    // 假设检查用户名的逻辑
    const isUsernameTaken = false; // 假设用户名不重复
 
    if (isUsernameTaken) {
        res.json({ status: 'error', message: 'Username is already taken.' });
    } else {
        res.json({ status: 'success', message: 'Username is available.' });
    }
});
 
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

确保后端运行在3000端口，前端代码可以

在jQuery中，您可以使用$.ajax函数的beforeSend选项来设置Ajax请求头。以下是一个示例代码，展示了如何设置请求头：

$.ajax({
    url: 'your-endpoint-url',
    type: 'GET', // 或者 'POST', 'PUT' 等
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Your-Header-Name', 'Your-Value');
        // 可以设置多个请求头
        // xhr.setRequestHeader('Another-Header-Name', 'Another-Value');
    },
    success: function (data) {
        // 请求成功时的回调函数
    },
    error: function (jqXHR, textStatus, errorThrown) {
        // 请求失败时的回调函数
    }
});

在这个例子中，beforeSend 函数接收一个XMLHttpRequest对象作为参数，然后您可以使用setRequestHeader方法来添加或修改请求头。您需要替换 'Your-Header-Name' 和 'Your-Value' 为您想要设置的头部名称和值。

在服务器端设置CORS（Cross-Origin Resource Sharing，跨域资源共享）响应头允许跨域请求，以下是一个示例，展示如何在Node.js的Express框架中设置CORS响应头：

const express = require('express');
const app = express();
 
// 设置CORS头部 - 允许所有源
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); // 或者指定特定的域名 "http://example.com"
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
 
app.get('/', function(req, res, next) {
  res.json({ message: 'Hello, cross-origin!' });
});
 
app.listen(3000, function() {
  console.log('CORS enabled server listening on port 3000');
});

在这个例子中，我们使用Express的中间件函数来设置CORS头部，允许任何源访问我们的服务。在实际应用中，出于安全考虑，你应该只允许必要的源访问你的API。

前端使用jQuery发起AJAX请求，后端使用Node.js和CORS中间件进行跨域处理的示例代码如下：

前端（HTML + jQuery）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#fetch-btn').click(function() {
                $.ajax({
                    url: 'http://your-node-server-url/endpoint',
                    type: 'GET',
                    success: function(response) {
                        console.log(response);
                        // 处理响应数据
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="fetch-btn">Fetch Data</button>
</body>
</html>

后端（Node.js + Express + CORS）:

const express = require('express');
const cors = require('cors');
const app = express();
 
// 使用CORS中间件
app.use(cors());
 
app.get('/endpoint', (req, res) => {
    // 响应数据
    res.json({ message: 'Success!', data: 'Your Data Here' });
});
 
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

确保替换http://your-node-server-url/endpoint为你的Node.js服务器的实际URL。以上代码实现了一个简单的GET请求，并通过CORS允许跨域请求。

// 发送短信验证码并验证的函数
function sendSMSAndVerify(phoneNumber, formData) {
    $.ajax({
        url: '/api/sms/send', // 发送短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 短信发送成功，缓存验证码
                sessionStorage.setItem('smsCode', response.code);
                // 开始验证短信验证码
                verifySMSCode(phoneNumber, response.code, formData);
            } else {
                alert('短信发送失败，请稍后重试。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 验证短信验证码的函数
function verifySMSCode(phoneNumber, code, formData) {
    $.ajax({
        url: '/api/sms/verify', // 验证短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber, code: code },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 验证成功，提交表单
                $('#yourForm').submit();
            } else {
                alert('验证码错误。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 假设你有一个表单的id为yourForm，电话号码字段为phone
// 当用户提交表单时，执行以下操作：
$('#yourForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var phoneNumber = $('#phone').val(); // 获取电话号码
    var formData = $(this).serialize(); // 序列化表单数据
    sendSMSAndVerify(phoneNumber, formData); // 发送短信并验证
});

这段代码首先定义了sendSMSAndVerify函数，该函数通过AJAX调用发送短信验证码的API接口，并在成功获取验证码后调用verifySMSCode函数进行验证。verifySMSCode函数则用于验证用户输入的验证码是否与缓存中的验证码一致，一致则提交表单，不一致则给出错误提示。最后，当用户尝试提交表单时，我们阻止了表单的默认提交行为，并调用sendSMSAndVerify函数进行操作。

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以使网页的更新不需要重新加载整个页面。

以下是一个使用原生JavaScript实现AJAX的例子：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们创建了一个新的 XMLHttpRequest 对象，并对其进行了配置，以发送一个GET请求到指定的API端点。我们还定义了一个回调函数，当请求的状态发生变化时会被调用，它会检查请求是否完成并且响应状态码为200，如果是，则处理响应数据。

这只是AJAX的简单使用示例，实际应用中可能需要处理更复杂的逻辑，例如处理POST请求、发送数据、处理JSON响应等。

在JavaScript中，可以通过创建一个函数来封装AJAX调用的常用模式。以下是一个简单的AJAX封装函数示例，使用了原生的JavaScript XMLHttpRequest 对象：

function ajax(method, url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  if (method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  }
  xhr.send(method === 'POST' ? data : null);
}
 
// 使用方法：
ajax('GET', 'https://api.example.com/data', null, function(response) {
  console.log('Response:', response);
});
 
ajax('POST', 'https://api.example.com/data', 'key1=value1&key2=value2', function(response) {
  console.log('Response:', response);
});

这个 ajax 函数接受四个参数：HTTP 请求方法（'GET' 或 'POST'），请求的URL，发送的数据（对于POST请求），以及一个回调函数，该函数在接收到响应时被调用。这个封装提供了一个简单易用的接口来进行AJAX请求。

报错解释：

HTTP 404 错误表示客户端能够与服务器通信，但服务器找不到请求的资源。在 JSP 页面上传图片后不显示且控制台报 404 错误，可能的原因通常有：

1. 图片上传成功，但没有正确地显示在页面上。可能是因为图片的路径不正确，或者图片标签的属性设置有误。
2. 上传的图片没有保存在预期的目录中，或者保存后的路径不正确。
3. 服务器配置问题，如 web.xml 中的servlet映射错误，或者servlet没有正确处理图片上传的请求。
4. 文件权限问题，上传的图片文件可能没有正确的读取权限。

解决方法：

1. 确认图片上传成功，检查图片是否已保存在预期目录。
2. 检查图片标签的路径是否正确，确保路径指向正确的文件夹和文件。
3. 检查服务器配置，包括 web.xml 中的servlet配置和相关的servlet代码。
4. 确认文件权限设置正确，确保服务器有权限访问上传的图片文件。
5. 如果使用框架（如Spring MVC），确保相关的controller方法能正确处理图片上传请求。

如果以上步骤无法解决问题，可以进一步检查服务器日志文件，查看更详细的错误信息，以便进行针对性的排查。

// 创建一个Ajax请求工具函数，支持超时和网络异常处理
function makeAjaxRequest(url, options) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        const timeout = options.timeout || 10000; // 设置默认超时时间为10秒
 
        xhr.open(options.method || 'GET', url, true);
 
        // 设置请求超时处理
        xhr.timeout = timeout;
        xhr.ontimeout = () => reject(new Error('请求超时'));
 
        // 设置网络异常处理
        xhr.onerror = () => reject(new Error('网络异常'));
 
        // 设置请求完成处理
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject(new Error('请求失败，状态码：' + xhr.status));
            }
        };
 
        // 设置请求头部
        if (options.headers) {
            Object.keys(options.headers).forEach(key => {
                xhr.setRequestHeader(key, options.headers[key]);
            });
        }
 
        // 发送请求
        xhr.send(options.data || null);
    });
}
 
// 使用示例
makeAjaxRequest('https://api.example.com/data', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
}).then(response => {
    console.log('请求成功：', response);
}).catch(error => {
    console.error('请求异常：', error.message);
});

这段代码定义了一个makeAjaxRequest函数，它接收一个URL和一个包含请求选项的对象。函数返回一个Promise对象，允许通过.then()和.catch()处理请求的成功和异常情况。代码中包含了对请求超时和网络异常的处理，并且可以通过传入的options设置请求方法、头部和数据。