基于Ajax的长连接

JS代码:

<script>
 function longPolling() {
        $.ajax({
            url: "testlp",
            data: { "time": 2, "timeout": 3 },//time:假设传输数据时间,timenout:最大延迟
            dataType:'JSON',
            success: function (data) {
                //输出data
                longPolling();
            }
        });
    }
</script>

服务器代码:

 public string testlp(int time, int timeout)
        {
             // 死循环 查询有无数据变化
            while (true) {
                System.Threading.Thread.Sleep(1000);// 休眠1000毫秒
                int i = 1;
                if (i > timeout) { break; }//最大延迟
                else {
                    i++;
                    int compl = 1; //模拟数据库时间
                    if (compl != time)//对比数据库中时间变化,此处一直进入if
                    { 
                        string data= 数据库中数据
                        // 返回数据信息,请求时间、返回数据时间、耗时
                        //writer.print("result: " + i + ", response time: " + responseTime + ", request time: " + timed + ", use time: " + (responseTime - timed));
                        return data;
                        break; // 跳出循环,返回数据
                    }
                }
            }
            return "false";//不会执行
        }


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个基于 AJAX 的简单项目可以是一个 To-Do List 应用程序。以下是一个示例: HTML 文件: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>To-Do List</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </head> <body> <h1>To-Do List</h1> <input type="text" id="newTask"> <button id="addTask">Add Task</button> <ul id="taskList"></ul> </body> </html> ``` JavaScript 文件(script.js): ```javascript $(document).ready(function() { // 加载任务列表 loadTasks(); // 添加新任务 $('#addTask').click(function() { var task = $('#newTask').val(); addTask(task); }); // 删除任务 $(document).on('click', '.deleteTask', function() { var taskId = $(this).data('id'); deleteTask(taskId); }); }); function loadTasks() { $.ajax({ url: 'api.php?action=getTasks', type: 'GET', dataType: 'json', success: function(response) { $.each(response, function(index, task) { $('#taskList').append('<li>' + task.task + ' <button class="deleteTask" data-id="' + task.id + '">Delete</button></li>'); }); } }); } function addTask(task) { $.ajax({ url: 'api.php?action=addTask', type: 'POST', dataType: 'json', data: {task: task}, success: function(response) { $('#taskList').append('<li>' + task + ' <button class="deleteTask" data-id="' + response.id + '">Delete</button></li>'); $('#newTask').val(''); } }); } function deleteTask(taskId) { $.ajax({ url: 'api.php?action=deleteTask', type: 'POST', dataType: 'json', data: {id: taskId}, success: function(response) { $('button[data-id="' + taskId + '"]').parent().remove(); } }); } ``` PHP 文件(api.php): ```php <?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "database"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接是否成功 if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } // 处理 GET 请求 if ($_SERVER["REQUEST_METHOD"] == "GET") { if ($_GET["action"] == "getTasks") { // 获取任务列表 $sql = "SELECT * FROM tasks"; $result = $conn->query($sql); $tasks = array(); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $tasks[] = array('id' => $row["id"], 'task' => $row["task"]); } } echo json_encode($tasks); } } // 处理 POST 请求 if ($_SERVER["REQUEST_METHOD"] == "POST") { if ($_POST["action"] == "addTask") { // 添加新任务 $task = $_POST["task"]; $sql = "INSERT INTO tasks (task) VALUES ('$task')"; if ($conn->query($sql) === TRUE) { $id = mysqli_insert_id($conn); echo json_encode(array('id' => $id)); } else { echo json_encode(array('error' => $conn->error)); } } else if ($_POST["action"] == "deleteTask") { // 删除任务 $id = $_POST["id"]; $sql = "DELETE FROM tasks WHERE id=$id"; if ($conn->query($sql) === TRUE) { echo json_encode(array('success' => true)); } else { echo json_encode(array('error' => $conn->error)); } } } $conn->close(); ?> ``` 该项目使用 AJAX 与后端 PHP 文件进行通信。当用户在文本框中输入新任务并单击“添加任务”按钮时,JavaScript 函数 `addTask()` 发送一个 POST 请求到服务器,并将新任务添加到数据库中。当用户单击“删除”按钮时,JavaScript 函数 `deleteTask()` 发送一个 POST 请求到服务器,并从数据库中删除相应的任务。当页面加载时,JavaScript 函数 `loadTasks()` 发送一个 GET 请求到服务器,获取任务列表,并将每个任务添加到 HTML 中的无序列表中。 请注意,此示例仅供演示目的。在实际应用程序中,应考虑安全性和数据验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值