jquery实现ajax_使用jQuery轻松实现Ajax

最新推荐文章于 2024-09-14 19:55:29 发布

dingshi7798

最新推荐文章于 2024-09-14 19:55:29 发布

阅读量116

点赞数

文章标签：数据库 python mysql java php

原文链接：https://www.sitepoint.com/ajax-jquery-2/

版权

jquery实现ajax

示例2 –与jQuery聊天

为了演示jQuery的真正功能，我们将制作一个功能齐全的Ajax聊天应用程序。这将允许用户发布消息并自动更新自身-所有这些都无需刷新页面。由于我们现在正在处理一个稍微复杂的应用程序，因此我还将带您更深入地了解jQuery，演示其他方便的功能。

首先，我们将计划应用程序。这个应用程序不需要太多的东西-前端，后端和jQuery库。但是，应用程序的后端和前端都有相当多的代码，因此我们的基本计划将使您知道对系统的期望。

规划服务器端

我们应用程序的后端需要处理消息提交并输出消息。考虑到这一点，让我们对后端代码进行粗略的概述：

连接数据库
如果消息已提交

将消息插入数据库
删除旧邮件

从数据库中获取消息并显示为XML

如您所见，这一切都非常简单明了。如果您必须用另一种语言编写后端，则可以将此计划用作指导。

规划客户端

前端必须使用Ajax调用后端，这与我们在第一个示例中使用的方法类似。它必须处理消息发布表单的提交，并定期更新包含新提交消息的聊天窗口。但是，我们将在此处添加另一个功能-我们将使用当前的UNIX时间戳来确定哪些消息已下载，并且仅提取新消息，从而减少了带宽使用和服务器负载。这是前端代码的粗略概述：

页面加载

将当前时间戳设置为0（此后将发布所有消息，即将获取所有消息）
调用函数以获取新消息

功能：获取新消息

使用POST向服务器发送请求
调用函数以解析XML响应
添加一秒钟以调用此函数的计时器（如果服务器负载过高，则增加频率）

功能：解析新消息的XML

设置XML中指定的当前时间戳
如果返回的状态码为“ 2”，则没有新消息，因此结束函数调用
否则，对于响应中的每条消息，以以下格式将其添加到消息窗口的顶部：

作者：留言

在表格上提交：

使用POST向服务器发送请求，并指定：

作者姓名（用户指定）
消息文本（用户指定）
注意到这是一个发布请求的操作
对服务器的最后一个请求的时间戳

消息输入框的内容为空，以便用户可以开始键入其他消息
调用函数以解析XML响应（以便立即可见发布的消息）

这个计划似乎比后端要复杂得多，但是由于有了jQuery，所涉及的代码非常短。

规划数据库

我们将使用一个MySQL数据库来存储消息（尽管任何SQL数据库都可以使用，但对代码进行了一些调整）。我们需要一个包含四列的表：用于显示每个消息的ID的列，用于存储消息的作者和消息本身的两个文本列以及用于UNIX时间戳的数字时间戳列。这是创建表的查询：

CREATE TABLE `messages` (  `id` int(7) NOT NULL auto_increment,  `user` varchar(255) NOT NULL,  `msg` text NOT NULL,  `time` int(9) NOT NULL,  PRIMARY KEY  (`id`) );

由于我们无法确定消息的长度，因此我们现在使用文本字段。

服务器端代码（XML）

在构建后端时，我们首先确定后端应该输出什么（以确定后端和前端之间的接口），然后从那里向后工作。这是一个简单的XML结构：

<?xml version="1.0"?> <response>  <status>1</status>  <time>1170323512</time>  <message>    <author>John Citizen</author>    <text>Hello world!</text>  </message>  <message>    <author>John Citizen</author>    <text>Hello world again!</text>  </message> </response>

注意，我已经添加了标签'status' ，其值为'1' 。正如我上面提到，状态码1将表示与新邮件，成功的请求2为成功没有新的消息。消息标签的每个实例都包括作者及其消息。

服务器端代码（PHP）

现在，到后端。我将不得不在PHP中执行此操作，但是由于输出为XML，因此您可以使用任何语言（Perl，ASP和任何您喜欢的语言）编写后端。让我们从逻辑上开始，定义一些配置值，以便以后可以轻松更改它们。我们需要数据库连接详细信息，我们要存储在数据库中的消息数（数据库可以处理数千行，因此该数字可以设置得很高），以及用户进入聊天时要显示的消息数。这是代码：

$dbhost = "localhost"; $dbuser = "root"; $dbpass = ""; $dbname = "chat"; $store_num = 10; $display_num = 10;

现在我们需要了解后端本身的基础知识。需要数据库连接，但是我们还需要确保Internet Explorer不缓存请求，并且将输出视为XML。为了确保我们能够识别代码中的任何错误，我们将错误报告设置为“所有错误”。为了轻松处理请求数据，我们将为请求中的每个参数设置一个变量；每个变量都将请求参数的值作为其值。这几行就可以了：

error_reporting(E_ALL); header("Content-type: text/xml"); header("Cache-Control: no-cache"); $dbconn = mysql_connect($dbhost,$dbuser,$dbpass); mysql_select_db($dbname,$dbconn); foreach($_POST as $key => $value)  $$key = mysql_real_escape_string($value, $dbconn);

foreach行会查看所有POST数据，并为每个参数创建一个变量并为其分配一个对应的值（例如path/to/file.php?variable=value会将$variable设置$variable "value" ）。这简化了获取请求数据的过程，因为我们不必手动指定它。

接下来，我们介绍主要功能。至此，我们将根据$display_num定义的内容，来处理将消息插入数据库以及根据要显示的消息数检索最新的几条消息。我在计划前端时提到，我们将指定一个操作，指出正在提交一条消息。现在，我们需要检查该操作-让我们为参数'action'分配一个值为'postmsg' 'action'的值，以指定我们正在执行此检查，并将数据作为新行插入数据库中；我们将在数据库中插入当前的UNIX时间戳。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

但是，我们还需要清理数据库。根据您的数据库空间限制，您可能需要限制存储的帖子数。通常，不希望记录消息，因此我决定默认存储10条消息。我们将使用一个函数来获取最后插入的行的ID，并根据该id的值确定要删除的行。例如，如果我们插入第11条消息，则将从最新消息（11）的id中减去已存储消息的数量（10），这将为我们提供id阈值（在这种情况下为1）。然后，我们可以删除id等于或小于该阈值的所有消息，这在本示例中将导致我们删除第一条消息。而且，借助SQL，我们可以在一个查询中完成所有这些操作。

以下是检查'postmsg'操作，将消息插入数据库并即时清除的代码段：

if(@$action == "postmsg") {  mysql_query("INSERT INTO messages (`user`,`msg`,`time`)        VALUES ('$name','$message',".time().")");  mysql_query("DELETE FROM messages WHERE id <= ".        (mysql_insert_id($dbconn)-$store_num),$dbconn); }

使用其他服务器端技术的开发人员应该能够足够容易地编写等效代码。注意，我们调用time函数来获取当前的UNIX时间戳。我们可以安全地假设，在脚本执行期间，时间返回的值可能不会改变（即使在速度较慢的服务器上，该脚本的执行时间也不到百分之一秒）。因此，当我们稍后将时间戳返回前端时，我们可以再次调用time函数，并且该值仍应可靠。

剩下的代码完成了从数据库中获取最新消息并将其输出为XML的工作。这就是我上面概述的XML发挥作用的地方。但是，大部分代码都位于MySQL查询中。我们利用SQL的功能来处理大多数处理任务，因此脚本执行时间不会受到影响。这是我们SQL查询的要求：

它应该仅获取每个消息的作者和文本。
它仅应提取以前未下载的消息-客户端具有最新请求的时间戳，因此可以将该时间戳插入SQL查询中。
它应该对消息进行排序，以使最新消息排在最后，从而允许以相反的顺序输出消息。
它应将提取的消息数限制为配置中定义的数目。

任何熟悉SQL的人都会同意，这都是相当简单的东西。对于我们其余的人，这是完成窍门的代码。一，查询：

$messages = mysql_query("SELECT user,msg             FROM messages             WHERE time>$time             ORDER BY id ASC             LIMIT $display_num",$dbconn);

其余代码是基本代码。如果未返回结果，则将状态代码设置为0；否则，将状态代码设置为0。否则，将其设置为1。输出初始XML，每个消息的XML和最终XML。就这样！这是代码：

if(mysql_num_rows($messages) == 0) $status_code = 2; else $status_code = 1;   echo "<?xml version="1.0"?>n"; echo "<response>n"; echo "t<status>$status_code</status>n"; echo "t<time>".time()."</time>n"; while($message = mysql_fetch_array($messages)) {  echo "t<message>n";  echo "tt<author>$message[user]</author>n";  echo "tt<text>$message[msg]</text>n";  echo "t</message>n"; } echo "</response>";

最终代码全部在附件的zip文件中，因此不必担心将其复制到文本编辑器中。到目前为止，后端已经完成，我们可以继续进行有趣的工作-HTML和jQuery！

客户端代码（HTML）

在使用jQuery之前，我们需要对页面HTML进行原型制作。这样，当我们必须确定要选择使用jQuery进行获取或更新的元素时，我们知道该怎么做。我们不需要太多：包装器div，消息的段落以及带有用户名和消息字段的表单以及“提交”按钮。简短显示的加载消息将增加最终的印象-我们可以在适当的时候使用jQuery删除它。这是HTML：

<div id="wrapper"> <p id="messagewindow"><span id="loading">Loading...</span></p> <form id="chatform"> Name: <input type="text" id="author" /> Message: <input type="text" id="msg" /> <input type="submit" value="ok" /><br /> </form> </div>

转到页面： 1 | 2 | 3