AJAX 表更新脚本

Question

我正在制作一个基于图块的在线游戏，我刚刚完成了一段代码的脚本，该代码获取您站立位置的坐标并在您周围构建环境（图块）（该游戏是使用一张有许多保存瓷砖的单元格）。

我需要一些帮助来创建一些可以不时刷新我的表格的 AJAX（为了这个问题，让我们每 2 秒坐一次）。我没有使用 AJAX 的经验，学习它没有任何意义（即使我也喜欢），因为我只会在游戏的一小部分中使用它，而且我没有时间。

这就是我的游戏设置方式：

php 一些获取角色信息的 php。* php

html 一些以图形形式显示数据的 html。 html

所以我需要一些 AJAX，它每 2 秒刷新一次 php 然后刷新 html。

Answer 1

您可能应该使用jQuery 或Prototype JS。这些库都可以做“一些 ajax”。如果您是开发新手，并且这是一个一次性项目，我建议您使用 Prototype。

在 Prototype 中，您可以有一个执行 ajax 工作的函数，以及一个调用 Prototype 的 periodicalExecuter 的函数，其回调参数是工作函数名称，如下例所示。您需要向 php 脚本发送一些参数，并将响应放入页面上的某些元素中，每 x 秒一次。这应该可以帮助您开始：

    <script src="/js/Prototype.js">
    //calls renderResponse on completion of the AJAX post to the specified URL
    function sendRequest(parameters,URLEndpoint){
        var myAjax = new Ajax.Request
                     (
                         URLEndpoint,
                         {
                             method: 'post', 
                             postBody: parameters, 
                             onSuccess: renderResponse
                         }
                     );
    }

    //replace contents of 'character' div or whatever with output from PHP script
    function renderResponse(response){
       var el = $(characterTable); 
       elementId.innerHTML = resp.responseText;
    }

    //execute sendRequest every 2 seconds
    function periodicalUpdate() {
        new PeriodicalExecuter(sendRequest('monkeys=2&carrots=7','http://mywebsite.com/game.php'), 2);
    }

有一个 jQuery 插件函数可以完成与 PeriodicUpdate 相同的工作。我没有尝试过，但它看起来很有说服力：

http://groups.google.com/group/jquery-en/browse_thread/thread/e99f3bc0cfa12696?pli=1

Answer 2

如果您想节省学习 AJAX 的所有复杂性的时间，使用 JavaScript 框架是一个很好的捷径（总的来说，它们可以节省大量时间）。使用 YUI 之类的东西，您只需几行代码即可将 AJAX 功能构建到您的应用程序中。

具体来说，您需要使用YUI Connection Manager Component。 YUI 有很好的文档，所以自己弄清楚应该不难。如果没有，here's a short tutorial 适合初学者。

在你的 HTML 前端你应该有这样的东西：

<!-- YUI source files --> 
<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script> 
<script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script> 
<script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script>
var tiles = new Array();
function refreshTable() {
    var sUrl = "ajax/table.php";
    var responseSuccess = function(o) {
        var root = o.responseXML.documentElement;
        var rows = root.getElementsByTagName('row');
        for (i=0; i<rows.length; i++) {
            tiles[i] = new Array();
            for (j=0; j<rows[i].childNodes.length; j++) {
                tiles[i][j] = rows[i].childNodes[j].firstChild.nodeValue;
            }
        }

        /*
         Update your table using the tiles[][] 2D array.
        /*
    }
    var responseFailure = function(o) {
        // Failure handler
        alert(o.statusText);
    }
    var callback = {
        success:responseSuccess,
        failure:responseFailure,
        timeout:3000
    }
    var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}
setInterval(refreshTable(),2000);
</script>

在您的 PHP 后端中，您只需要生成以下格式的 XML 数据：

<table>
    <row>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
    </row>
</table>

这就是它的要点。如果您需要将参数传递给服务器端 PHP 脚本，您只需使用 encodeURI() 将它们附加到 URL 并使用 $_GET[] 超全局访问它们。