AJAX 테이블 업데이트 스크립트

Question

온라인 타일 기반의 게임을 만들고 있습니다. 서있는 위치의 좌표를 사용하고 주위의 타일 (타일)을 만드는 코드 조각을 스크립팅을 마쳤습니다 (게임은 타일을 고정하는 많은 셀이있는 테이블).

내 테이블을 새로 고칠 수있는 AJAX 비트를 만드는 데 도움이 필요합니다 (이 질문을 위해 매 2 초마다 앉을 수 있음). 나는 AJAX에 대한 경험이 없으며, 비록 내가이 게임의 작은 부분을 위해서만 사용할 것이며, 시간이 없다는 점을 모두 배웠다.

이 내 게임 설정 방법은 다음과 같습니다.

PHP 문자에 대한 정보를 얻을 수 일부 PHP * PHP

HTML 의 데이터를 표시하는 일부 HTML 그래픽 형식. html

그래서 내가 필요로하는 것은 몇 초마다 PHP를 리프레시하는 AJAX입니다.

Answer 1

jQuery 또는 Prototype JS을 사용해야합니다. 이 라이브러리들은 모두 'some ajax'를 할 수 있습니다. 당신이 개발을 처음 접했을 때 이것이 일회성 프로젝트라면 Prototype을 사용할 것을 제안합니다.

프로토 타입에는 ajax 작업을 수행하는 함수와 프로토 타입의 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); 
    } 

PeriodicUpdate와 동일한 작업을 수행하는 jQuery 플러그인 기능이 있습니다. 나는 그것을 시도하지 않은하지만 강력한 같습니다

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

Answer 2

당신이 AJAX의 모든 복잡한을 배울 필요 자바 스크립트 프레임 워크를 사용하는 자신에게 시간을 절약하려면 좋은 지름길 (그들이있어 대단한 시간 절약). YUI과 같은 것을 사용하면 단 몇 줄의 코드로 애플리케이션에 AJAX 기능을 구현할 수 있습니다.

특히 YUI Connection Manager Component을 사용하려고합니다. 유이는 훌륭한 문서를 가지고 있으므로 자신을 이해하기 란 쉽지 않습니다. 그렇지 않은 경우 초보자 용 here's a short tutorial입니다. 당신의 HTML 프런트 엔드 내부

이 같은이 있어야합니다

<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 백엔드 내부

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

을, 당신은 단지 같은 형식으로 XML 데이터를 생성해야

그리고 그것은 그것의 요지입니다. 서버 측 PHP 스크립트에 인수를 전달해야하는 경우 encodeURI()을 사용하여 URL에 추가하고 $ _GET [] super 글로벌을 사용하여 액세스하십시오.