Php AJAX表更新脚本

我正在制作一个基于瓷砖的在线游戏，我刚刚完成了一段代码的脚本编写，该代码获取了你所处位置的坐标，并构建了你周围的环境（瓷砖）（游戏是使用一个包含许多瓷砖的单元格的表制作的）

我需要一些帮助来创建一个AJAX，它可以时不时地刷新我的表（为了这个问题，让我们每2秒钟进行一次sat）。我没有AJAX的经验，也没有必要全部学习它（尽管我也喜欢），因为我只会在游戏的这一小部分中使用它，而且我没有时间

以下是我的游戏设置方式：

php 一些php可以获取有关角色的信息* php

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

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

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

在Prototype中，您可以有一个执行ajax工作的函数，以及一个调用Prototype的periodicalExecuter的函数，该函数的回调参数为workdoing函数名，如下例所示。您需要向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);
    }

//在完成对指定URL的AJAX发布时调用renderResponse
函数sendRequest（参数，URLEndpoint）{
var myAjax=new Ajax.Request
(
URLEndpoint，
{
方法：“post”，
postBody:参数，
onSuccess:renderResponse
}
);
}
//用PHP脚本的输出替换“character”div或其他内容
函数renderResponse（响应）{
变量el=$（字符表）；
elementId.innerHTML=resp.responseText；
}
//每2秒执行一次sendRequest
函数periodicalUpdate（）{
新的PeriodicalExecuter（sendRequest（'monkeys=2&carrots=7'，'http://mywebsite.com/game.php'), 2);
}

有一个jQuery插件函数，它与PeriodicUpdate的作用相同。我没有试过，但它看起来很有吸引力：

---

如果您想节省学习AJAX所有复杂功能的时间，使用JavaScript框架是一个很好的捷径（一般来说，这是一个很好的省时方法）。使用类似的方法，只需几行代码就可以将AJAX功能构建到应用程序中

具体来说，您需要使用。YUI有很好的文档，所以自己弄清楚应该不难。如果没有，则适用于初学者

在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>

var tiles=新数组（）；
函数刷新表（）{
var sUrl=“ajax/table.php”；
var responseSuccess=函数（o）{
var root=o.responseXML.documentElement；
var rows=root.getElementsByTagName（'row'）；
对于（i=0；i
<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>