AJAX tablo güncelleme komut

2 Cevap php

Ben bir online çini tabanlı oyun yapıyorum ve ben sadece (oyun tutun birçok hücreleri ile bir tablo kullanılarak yapılır ayakta yerin koordinatlarını alır ve çevrenizdeki çevresi (fayans) oluşturur kod parçası scripting bitirdim fayans).

Ben (olanak sağlayan bu soru uğruna her 2 saniyede oturdu) her şimdi ve sonra benim masa yenileyebilirsiniz AJAX biraz oluştururken bazı yardıma ihtiyacım var. AJAX ile hiçbir deneyime sahip ve (id gibi çok olsa da) Ben sadece benim oyun bu küçük parçası için kullanıyor, artı olacak gibi ben vaktim yok hepsini öğrenmenin manası olmazdı.

Bu benim oyun kurmak nasıl:

php Some php that gets info on the character.* php

html Some html that displays the data in a graphical form. html

Yani ne gerek daha sonra php html her 2 saniyede bir yenilenir bazı AJAX.

Teşekkürler, B ekledi

2 Cevap

Muhtemelen jQuery kullanmak veya Prototype JS. Gerekir Bu kütüphaneler hem 'bazı ajax' yapabilirsiniz. Eğer geliştirme için yeni olan ve bu bir kerelik bir proje ise, ben prototip kullanarak öneririm.

Prototip olarak, ajax çalışır bir işlevi var ve geri arama parametre olduğu gibi aşağıdaki örnekte olduğu gibi, iş yapıyor işlev adı Prototype'ın periodicalExecuter çağıran bir işlev olabilir. Sen php script bazı parametreler gönderebilir ve sayfadaki bazı elemanı (ler) içine bir kez her x saniyede bir tepki koymak gerekir. Bu başlamak gerekir:

    <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);
    }

PeriodicUpdate gibi aynı işi yapan bir jQuery eklentisi işlevi var. Ben hiç denemedim ama zorlayıcı görünüyor:

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

Eğer bir JavaScript çerçevesini kullanarak, kendinizi AJAX tüm inceliklerini öğrenmek zorunda zaman kazanmak istiyorsanız iyi bir kısayol (bunlar genel olarak büyük bir zaman tasarrufu demektir) olduğunu. YUI gibi bir şey kullanarak, kod sadece birkaç satır ile uygulama içine AJAX işlevselliği inşa edebilirsiniz.

Özellikle, YUI Connection Manager Component kullanmak isteyeceksiniz. YUI mükemmel belgelerine sahiptir, bu nedenle kendinizi anlamaya zor olmamalı. Değilse, here's a short tutorial başlayanlar için.

HTML ön ucu içeride böyle bir şey olmalı:

<!-- 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 arka uç içine, sen gibi bir şey biçiminde XML verilerini oluşturmak gerekiyor:

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

Ve bu onun özü budur. Eğer sunucu tarafı komut dosyası PHP argüman geçmek gerekiyorsa, sadece encodeURI() kullanarak URL üzerine ekledim ve $_GET[] superglobal kullanarak erişebilirsiniz.

etiketler