Скрипт обновления таблицы AJAX

Question

Я делаю онлайн-игру на основе плиток, и я только что закончил писать сценарий кода, который берет координаты того, где вы стоите, и строит окружение (плитки) вокруг вас (игра сделана с использованием таблицы со многими клетки, в которых находятся плитки).

Мне нужна помощь в создании небольшого количества AJAX, которое может время от времени обновлять мой стол (давайте посидим каждые 2 секунды ради этого вопроса). У меня нет опыта работы с AJAX, и не было бы никакого смысла изучать все это (хотя id мне тоже нравится), так как я буду использовать его только для этой небольшой части моей игры, плюс у меня нет времени.

Вот как настроена моя игра:

PHP Какой-то php, который получает информацию о персонаже. * PHP

HTML Некоторый HTML, который отображает данные в графической форме. HTML

Итак, мне нужен AJAX, который обновляет php, а затем HTML каждые 2 секунды.

Answer 1

Если вы хотите сэкономить время на изучение всех тонкостей AJAX, использование JavaScript-фреймворка является хорошим способом (в общем, он экономит время). Используя что-то вроде YUI , вы можете встроить функциональность AJAX в свое приложение с помощью всего нескольких строк кода.

В частности, вы захотите использовать YUI Connection Manager Component . У 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>

Внутри вашего 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-скрипт, вы просто добавляете их к URL-адресу с помощью encodeURI () и обращаетесь к ним с помощью $ _ GET [] superglobal.

Answer 2

Вам, вероятно, следует использовать jQuery или Prototype JS . Эти библиотеки могут выполнять «некоторый AJAX». Если вы новичок в разработке, и это разовый проект, я бы предложил использовать Prototype.

В Prototype у вас может быть функция, выполняющая ajax, и функция, которая вызывает periodicalExecuter в Prototype с именем рабочей функции в качестве параметра обратного вызова, как в примере ниже. Вам необходимо отправить некоторые параметры в скрипт 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