如果您想节省学习 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 脚本,您只需使用encodeURI()将它们附加到 URL 并使用$_GET[]超全局访问它们。