Question

我从w3schools那里得到了这个代码。我已经编辑了它并且它连接到一个php文件，它会在选择一个人时显示所有消息。问题是，当我更改向数据库添加新消息时，除非我更改此人，或者再次选择同一个人，否则它不会显示。我想添加一个周期性函数，它会在每秒后自动向db.php发送请求并显示所有更新的消息。但由于我对AJAX知之甚少，我在这里。任何人都可以编辑代码并执行它。感谢

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","db.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

Answer 1

向select元素添加id。

<select name="users" id="users" onchange="showUser(this.value)">

在正文结束标记之前添加以下代码：

<script>    
setInterval(function(){
    var e = document.getElementById("users");
    var selectedId = e.options[e.selectedIndex].value;
    showUser(selectedId);
}, 3000);
</script>

它将在每3秒后发送一次请求并更新内容。

Answer 2

通过AJAX将您想要实现的目标称为polling - 更好的方法是Web-Realtime。此上下文中的技术是WebSockets或Server-Sent-Events，它们于2014年推出HTML5。

根据您的需求，基于Jquery的轮询javascript模块可能如下所示：

var Polling = (function ($scope) {
    var doPoll;

    var _callback = function (res) {
        console.log(res);
    };

    var start = function start(url, params, cb, period) {

        period = period || 5000;
        doPoll = true;

        if (cb && typeof cb == 'function') {
            _callback = cb;
        }

        _poll(url, params, period);

    };

    var stop = function () {
        doPoll = false;
    };

    function _poll(url, params, period) {
        Object.assign(params, {polling: true});
        $.post(url, params)
            .done(function (res) {

                _callback(res);

                if (!doPoll) return;

                setTimeout(function () {
                    _poll(url, params, period)
                }, period);
            });
    }

    return {
        start: start,
        stop: stop
    }
})();

包含jquery和上面的脚本以启动轮询行为（每隔5秒发送一个帖子请求）后，只需执行以下操作：

Polling.start("path-to-your-php-file.php",
    {"your": "param"},
    function (response) {
        // handle the response here
        console.log(response);
    }
);

要阻止它：

Polling.stop();

在这里试试：

Answer 3

我添加了userChanged()函数来处理onchange元素的<select>事件。在函数中，我检查是否已设置重复间隔，如果是，则清除它并设置一个新间隔。间隔设置为每1秒关闭一次，并将变量str传递给函数showUser(str)。

以下是代码：

<html>
<head>
<script>
var timer = false;

function userChanged(str)
{
    // if timer is not false it means it is set
    if(timer) 
    {
        clearInterval(timer);
        timer = false;
    }

    // When str is '' that means the user has selected 'Select a person:'
    if(str != '')
    {
       timer = setInterval(showUser, 1000, str);
    }
    else document.getElementById("txtHint").innerHTML = "";
}

function showUser(str)
{
    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
        {
           document.getElementById("txtHint").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET","db.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="userChanged(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>

如何定期从数据库发出Ajax请求

3 个答案: