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 [] 超全局访问它们。

AJAX表更新脚本

2 个答案: