Ajax访问本地服务器案例

作者：System 时间：2024年08月14日分类：所有,ajax 字数：1515

在本地服务器上使用Ajax进行请求，可以通过HTTP服务器（如Apache, Nginx, 或Node.js）来实现。以下是一个使用JavaScript的Ajax请求示例，假设你已经有一个本地服务器运行在http://localhost:8080。

HTML文件（index.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("response").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "http://localhost:8080/data", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="response"></div>
</body>
</html>

服务器端代码（使用Node.js的简单HTTP服务器）:




// 确保你已经安装了Node.js环境
// 假设你的Node.js版本是10.x或更高
 
// server.js
const http = require('http');
const hostname = '127.0.0.1';
const port = 8080;
 
const server = http.createServer((req, res) => {
    if (req.url == '/data') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('This is the data you requested\n');
    } else {
        res.statusCode = 404;
        res.end('Not found\n');
    }
});
 
server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

确保你的本地服务器正在运行，并且有一个监听8080端口的服务。然后，在浏览器中打开index.html文件，点击按钮，你将会看到从本地服务器获取到的数据。

Ajax访问本地服务器案例

评论已关闭

推荐阅读