AJAX简单测试代码实例

AJAX概述

AJAX（Asynchronous JavaScript And XML）即异步的JavaScript与XML技术。它允许web页面异步地更新部分内容，从而避免了页面全部刷新，提升了用户体验。

AJAX原理

AJAX是通过XMLHttpRequest对象实现的。该对象是由浏览器提供的，可以通过JavaScript对它进行操作，向服务端发送数据请求，然后异步地接收服务端响应数据。通过这种方式，前端页面与后端服务之间实现异步通信。

AJAX测试代码

以下是一个简单的AJAX测试代码实例，该代码通过AJAX请求获取后台数据并将结果展示在页面上。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX测试页面</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        function ajaxTest() {
            $.ajax({
                type: "POST",
                url: "/getData",
                dataType: "json",
                success: function (data) {
                    $("#result").text(data.message);
                },
                error: function (jqXHR) {
                    alert("发生错误：" + jqXHR.status);
                }
            });
        }
    </script>
</head>
<body>
    <button onclick="ajaxTest()">点击获取数据</button>
    <div id="result"></div>
</body>
</html>

// server.js
const express = require("express");
const app = express();

app.use(express.static("public"));

app.post("/getData", (req, res) => {
    let result = {
        "statusCode": 200,
        "message": "Hello, AJAX!"
    };
    res.send(result);
});

app.listen(8080, () => {
    console.log("Server started on port 8080.");
});

代码解释：

index.html中script标签引入jQuery库；
定义名为ajaxTest的函数，使用jQuery的ajax方法向URI为/getData的路由发送POST请求，dataType为JSON，请求成功后将返回的数据展示在id为result的DIV标签中；
server.js为后台Node.js代码，使用express框架搭建服务端，设置相关路由；
/getData路由处理函数返回JSON类型数据。

示例说明

示例1

在index.html中添加以下代码：

<div id="notice"></div>

<script type="text/javascript">
    <?php
    $notice = "重要通知：即日起起点数据平台将采用新的接口协议，旧版API将不再支持。";
    ?>
    $("#notice").text(<?php echo json_encode($notice); ?>);
</script>

该示例展示了如何在页面加载时通过AJAX获取后端PHP代码生成的通知信息。在该示例中，PHP代码生成通知信息$notice，然后通过json_encode函数对其进行JSON编码，最终将结果通过AJAX发送给前端页面。

示例2

在index.html中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX测试页面</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        function ajaxTest() {
            $.ajax({
                type: "POST",
                url: "/search",
                data: {
                    keyword: $("#keyword").val()
                },
                dataType: "json",
                success: function (data) {
                    $("#result").text(data.message);
                },
                error: function (jqXHR) {
                    alert("发生错误：" + jqXHR.status);
                }
            });
        }
    </script>
</head>
<body>
    <input type="text" id="keyword">
    <button onclick="ajaxTest()">搜索</button>
    <div id="result"></div>
</body>
</html>

// server.js
const express = require("express");
const app = express();

app.use(express.static("public"));

app.post("/search", (req, res) => {
    let keyword = req.body.keyword;
    let result = {
        "statusCode": 200,
        "message": `您正在搜索${keyword}相关信息。`
    };
    res.send(result);
});

app.listen(8080, () => {
    console.log("Server started on port 8080.");
});

该示例展示了如何实现带参数的AJAX请求。在该示例中，用户可以在文本框中输入要搜索的关键字，然后通过AJAX发送给后台服务，后台服务处理该请求并返回相关信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AJAX简单测试代码实例 - Python技术站