I'm trying to create a very simple message board (author, text, and date written) that will auto-update every few moments to see if a new message has arrived, and if it has, auto load the latest message(s).
我正在尝试创建一个非常简单的留言板(作者,文本和日期写入),它将每隔几分钟自动更新,以查看是否有新消息到达,如果有,则自动加载最新消息。
I'm proficient in PHP, but my knowledge in AJAX is lacking.
我精通PHP,但我缺乏AJAX的知识。
The way I see it, I would have to create a PHP file called get_messages.php
that would connect to a database and get through a $_GET
variable return all posts beyond date X
, and then I would somehow through jquery call this PHP file every few minutes with $_GET=current time
? Does this sound correct?
我看到它的方式,我将不得不创建一个名为get_messages.php的PHP文件,该文件将连接到数据库并通过$ _GET变量返回超过日期X的所有帖子,然后我会以某种方式通过jquery每次调用此PHP文件$ _GET =当前时间几分钟?这听起来不错吗?
How would I got about requesting and returning the data to the web page asynchronously?
我如何异步请求并将数据返回到网页?
3 个解决方案
#1
You're pretty close, you'll need a PHP script that can query the database for your results. Next, you'll want to transfigure those results into an array, and json_encode() them:
你非常接近,你需要一个可以在数据库中查询结果的PHP脚本。接下来,您将要将这些结果转换为数组,并将它们转换为json_encode():
$results = getMyResults();
/* Assume this produce the following Array:
Array(
"id" => "128","authorid" => "12","posttime" => "12:53pm",
"comment" => "I completely agree! * FTW!"
);
*/
print json_encode($results);
/* We'll end up with the following JSON:
{
{"id":"128"},{"authorid":"12"},{"posttime":"12:53pm"},
{"comment":"I completely agree! * FTW!"}
}
*/
Once these results are in JSON format, you can better handle them with javascript. Using jQuery's ajax functionality, we can do the following:
一旦这些结果采用JSON格式,您就可以使用javascript更好地处理它们。使用jQuery的ajax功能,我们可以执行以下操作:
setInterval("update()", 10000); /* Call server every 10 seconds */
function update() {
$.get("serverScript.php", {}, function (response) {
/* 'response' is our JSON */
alert(response.comment);
}, "json");
}
Now that you've got your data within javascript ('response'), you are free to use the information from the server.
现在您已经在javascript('response')中获得了数据,您可以*使用服务器中的信息。
#2
Ignore the ASP.NET stuff, this link is a good start:
忽略ASP.NET的东西,这个链接是一个好的开始:
http://www.aspcode.net/Timed-Ajax-calls-with-JQuery-and-ASPNET.aspx
What you're going to use is a javascript function called setTimeout, which asynchronously calls a javascript function on an interval. From there, jQuery has a fancy function called "load" that will load the results of an AJAX call into a DIV or whatever element you're looking for. There are also numerous other ways to get jQuery to do alter the DOM the way you'd like.
你将要使用的是一个名为setTimeout的javascript函数,它在一个时间间隔内异步调用javascript函数。从那里开始,jQuery有一个名为“load”的奇特函数,它将AJAX调用的结果加载到DIV或你正在寻找的任何元素中。还有许多其他方法可以让jQuery以你想要的方式改变DOM。
There are a hundred ways to do this, but I'd say avoid writing plain Javascript to save yourself the headache of cross-browser functionality when you can.
有一百种方法可以做到这一点,但我会说尽量避免编写简单的Javascript来避免跨浏览器功能的麻烦。
#3
I suggest you go for the Simple AJAX Code-Kit (SACK) available on Google code.
我建议您使用Google代码上提供的Simple AJAX Code-Kit(SACK)。
I've been using it since before it was on Google code. It's very light and straightforward. It's one js file that you have to include. I've seen it being used in online browser games as well.
我之前一直在使用谷歌代码。它非常简单明了。这是你必须包含的一个js文件。我已经看到它也被用于在线浏览器游戏中。
http://code.google.com/p/tw-sack/
Example for loading page contents from get_messages.php
in a div (if you don't care about the page contents from get_messages.php
, and simply want to call the php file, simple remove the ajax.element
line):
从div中的get_messages.php加载页面内容的示例(如果你不关心get_messages.php中的页面内容,只想调用php文件,只需删除ajax.element行):
<script type="text/javascript" src="tw-sack.js"></script>
<script>
var ajax = new sack();
ajax.method = "GET"; // Can also be set to POST
ajax.element = 'my_messages'; // Remove to make a simple "ping" type of request
ajax.requestFile = "get_messages.php";
ajax.setVar("user_name","bobby");
ajax.setVar("other_variables","hello world");
ajax.setVar("time",dateObject.getTime());
ajax.onCompleted = whenCompleted;
ajax.runAJAX();
function whenCompleted(){
alert('completed');
}
</script>
<div id="my_messages">Loading...</div>
You don't need to specify an "ajax.element" if you want to do a simple "ping" type of request and ignore the output of the php file. All you have to do to implement your requirements now is to use a "setTimeout" making the ajax calls.
如果要执行简单的“ping”类型的请求并忽略php文件的输出,则无需指定“ajax.element”。现在,您只需使用“setTimeout”进行ajax调用即可。
There are also many other options like:
还有许多其他选项,如:
//ajax.onLoading = whenLoading;
//ajax.onLoaded = whenLoaded;
//ajax.onInteractive = whenInteractive;
No need to learn or include huge frameworks. And you'll get started in no time with tw-sack.
无需学习或包含庞大的框架。而且你很快就会开始玩耍。
#1
You're pretty close, you'll need a PHP script that can query the database for your results. Next, you'll want to transfigure those results into an array, and json_encode() them:
你非常接近,你需要一个可以在数据库中查询结果的PHP脚本。接下来,您将要将这些结果转换为数组,并将它们转换为json_encode():
$results = getMyResults();
/* Assume this produce the following Array:
Array(
"id" => "128","authorid" => "12","posttime" => "12:53pm",
"comment" => "I completely agree! * FTW!"
);
*/
print json_encode($results);
/* We'll end up with the following JSON:
{
{"id":"128"},{"authorid":"12"},{"posttime":"12:53pm"},
{"comment":"I completely agree! * FTW!"}
}
*/
Once these results are in JSON format, you can better handle them with javascript. Using jQuery's ajax functionality, we can do the following:
一旦这些结果采用JSON格式,您就可以使用javascript更好地处理它们。使用jQuery的ajax功能,我们可以执行以下操作:
setInterval("update()", 10000); /* Call server every 10 seconds */
function update() {
$.get("serverScript.php", {}, function (response) {
/* 'response' is our JSON */
alert(response.comment);
}, "json");
}
Now that you've got your data within javascript ('response'), you are free to use the information from the server.
现在您已经在javascript('response')中获得了数据,您可以*使用服务器中的信息。
#2
Ignore the ASP.NET stuff, this link is a good start:
忽略ASP.NET的东西,这个链接是一个好的开始:
http://www.aspcode.net/Timed-Ajax-calls-with-JQuery-and-ASPNET.aspx
What you're going to use is a javascript function called setTimeout, which asynchronously calls a javascript function on an interval. From there, jQuery has a fancy function called "load" that will load the results of an AJAX call into a DIV or whatever element you're looking for. There are also numerous other ways to get jQuery to do alter the DOM the way you'd like.
你将要使用的是一个名为setTimeout的javascript函数,它在一个时间间隔内异步调用javascript函数。从那里开始,jQuery有一个名为“load”的奇特函数,它将AJAX调用的结果加载到DIV或你正在寻找的任何元素中。还有许多其他方法可以让jQuery以你想要的方式改变DOM。
There are a hundred ways to do this, but I'd say avoid writing plain Javascript to save yourself the headache of cross-browser functionality when you can.
有一百种方法可以做到这一点,但我会说尽量避免编写简单的Javascript来避免跨浏览器功能的麻烦。
#3
I suggest you go for the Simple AJAX Code-Kit (SACK) available on Google code.
我建议您使用Google代码上提供的Simple AJAX Code-Kit(SACK)。
I've been using it since before it was on Google code. It's very light and straightforward. It's one js file that you have to include. I've seen it being used in online browser games as well.
我之前一直在使用谷歌代码。它非常简单明了。这是你必须包含的一个js文件。我已经看到它也被用于在线浏览器游戏中。
http://code.google.com/p/tw-sack/
Example for loading page contents from get_messages.php
in a div (if you don't care about the page contents from get_messages.php
, and simply want to call the php file, simple remove the ajax.element
line):
从div中的get_messages.php加载页面内容的示例(如果你不关心get_messages.php中的页面内容,只想调用php文件,只需删除ajax.element行):
<script type="text/javascript" src="tw-sack.js"></script>
<script>
var ajax = new sack();
ajax.method = "GET"; // Can also be set to POST
ajax.element = 'my_messages'; // Remove to make a simple "ping" type of request
ajax.requestFile = "get_messages.php";
ajax.setVar("user_name","bobby");
ajax.setVar("other_variables","hello world");
ajax.setVar("time",dateObject.getTime());
ajax.onCompleted = whenCompleted;
ajax.runAJAX();
function whenCompleted(){
alert('completed');
}
</script>
<div id="my_messages">Loading...</div>
You don't need to specify an "ajax.element" if you want to do a simple "ping" type of request and ignore the output of the php file. All you have to do to implement your requirements now is to use a "setTimeout" making the ajax calls.
如果要执行简单的“ping”类型的请求并忽略php文件的输出,则无需指定“ajax.element”。现在,您只需使用“setTimeout”进行ajax调用即可。
There are also many other options like:
还有许多其他选项,如:
//ajax.onLoading = whenLoading;
//ajax.onLoaded = whenLoaded;
//ajax.onInteractive = whenInteractive;
No need to learn or include huge frameworks. And you'll get started in no time with tw-sack.
无需学习或包含庞大的框架。而且你很快就会开始玩耍。