javascript和jQuery实现网页实时聊天的ajax长轮询

重塑后的文章：

构建简单聊天室程序：利用原生JS和AJAX实现长轮询

介绍

HTTP协议，作为应用层的面向对象协议，以其简单、快速、灵活的特性广泛应用于网页交互。在实现网页实时聊天时，HTTP的无连接和无状态特性带来了一定的挑战。为了保证与服务器之间的长时间联系并源源不断地获取信息，我们引入了长轮询技术。

在解决网页实时交互的问题时，有多种方式可以与服务器保持长连接或频繁查询，包括长连接、Flash socket、轮询、长轮询和WebSocket等。其中，长轮询是一种有效的解决方案，它需要服务器端的配合，与传统的轮询相比，它在没有返回信息时会进入等待状态，减少了无数次的空回复。可以认为，长轮询使服务器每次的返回更有目的性。

本文将使用JS和AJAX来实现长轮询，建立一个简单的聊天室程序。让我们深入了解长轮询的思想和实现方法。

长轮询的思想

长轮询基于AJAX技术，通过发送异步请求与服务器进行通信。当客户端向服务器发送询问信息时，服务器在没有信息要返回的情况下进入无限等待状态。由于AJAX的异步特性，PHP在服务器端执行等待不会影响到页面的正常处理。一旦服务器查询到返回信息，迅速发送一个请求等待服务器处理。这样，服务器每次的响应都更有针对性，减少了盲目返回的情况。

数据库设计

为了实现聊天功能，我们需要设计数据库来存储聊天信息。数据库表包括信息ID、发送人、接收人、信息内容以及是否已读的标记。通过改变这些标记，我们可以区分哪些信息已经被读取。

SQL创建表语句：

```sql

CREATE TABLE msg (

msgid INT NOT NULL PRIMARY KEY AUTO_INCREMENT,

sender CHAR(16) NOT NULL,

receiver CHAR(16) NOT NULL,

content TEXT, -- 信息内容用text类型，存储量可达65535字符

senderRead TINYINT ENUM(0,1) DEFAULT 0,

receiverRead TINYINT ENUM(0,1) DEFAULT 0 -- 设置是否已读的flag标记

);

```

PHP脚本实现

服务器端实现（PHP）

```php

// 创建数据库连接

$mysqli = new mysqli("host", "user", "password", "database");

// 定义查询语句，获取未读消息

$query = "SELECT sender, receiver, content FROM msg WHERE receiverRead = 0 LIMIT 1";

// 无限循环，等待获取未读消息

while (true) {

// 执行查询

$result = $mysqli->query($query);

// 如果有未读消息，处理并返回给客户端

if ($result->num_rows > 0) {

// 更新消息的已读状态

$mysqli->query("UPDATE chat SET receiverRead = 1 WHERE receiverRead = 0 LIMIT 1");

// 获取消息内容并将其编码为JSON格式

$message = $result->fetch_assoc();

$jsonMessage = json_encode($message);

// 输出JSON消息并结束循环

echo $jsonMessage;

break;

}

// 如果没有未读消息，等待一段时间再查询

usleep(1000);

}

?>

```

客户端实现（JavaScript）

使用原生JavaScript实现轮询：

```javascript

function pollForMessages() {

var xhr = new XMLHttpRequest();

xhr.open('GET', 'serviceback.php', true); // 异步请求，不阻塞页面执行

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) { // 检查响应状态是否成功且服务器已响应完毕

var response = xhr.responseText; // 获取服务器返回的数据

我们来深入一下如何实现这一功能。你需要在ajax对象中设置HTTP头，以确保数据能够正确发送。这里有一种常见的方式，那就是使用 `xhr.setRequestHeader` 方法来设置头部信息。比如，"Content-type" 被设置为 "application/x--form-urlencoded"，这表示你正在发送表单编码的数据。

接下来，我们转向一个实际应用场景——聊天室消息处理。在构建一个聊天室应用时，我们经常面临一个问题：如何避免每次查询都获取到全部信息。一个有效的解决方案是更改数据库查询操作的方式。具体来说，我们可以设置一个叫做 "idflag" 的参数。当值为0时，表示我们还没有开始查询；每次查询后，将 "idflag" 设置为查询到的数据的ID。这样，在下一次查询时，我们只需查询 "idflag" 以上的ID，也就是新添加进去的信息。这种设计大大提高了查询效率，降低了服务器压力。

现在，让我们总结一下本文的主要内容。通过利用这些技术，你可以轻松地实现一个功能强大的聊天室程序。这只是一个简单的示例，你可以在此基础上进行更多的拓展和创新。如果你对实现这样的程序感兴趣，那就赶快动手实践吧！也许你的下一个创新项目就从这里开始。

关于代码的实现部分，本文并未给出具体的代码示例。但相信凭借你对上述内容的理解，你已经掌握了实现聊天室程序的基本思路和方法。在此基础上，你可以根据自己的需求和想法进行具体的编码工作。如果你需要进一步的帮助或指导，欢迎随时向我提问。记得保持对技术的热情和精神，祝你编程之路顺利！