Jquery 用于用户端数据的Ajax请求侦听器
我正在创建一个聊天程序。这个聊天程序有两个方面（客户端和用户）。所有数据都将进入数据库（mysql）。目前，聊天功能正常。每端类型和我都有一个侦听器函数，它使用ajax每隔一两秒钟将数据库文件加载到窗口中 问题是，这占用了太多的带宽 我想在设定的持续时间后终止聊天，或者我想有一种方法可以只在事件发生时更新 在我看来，理想情况下，这样做效果最好： 如果用户输入新数据，则会在客户端检测到该数据，然后激活该功能，仅在此时更新聊天窗口 在ajax/jquery/javascript中是否存在类似这样的监听功能 以下是我当前用于侦听的代码：Jquery 用于用户端数据的Ajax请求侦听器,jquery,mysql,ajax,listener,Jquery,Mysql,Ajax,Listener,我正在创建一个聊天程序。这个聊天程序有两个方面（客户端和用户）。所有数据都将进入数据库（mysql）。目前，聊天功能正常。每端类型和我都有一个侦听器函数，它使用ajax每隔一两秒钟将数据库文件加载到窗口中 问题是，这占用了太多的带宽 我想在设定的持续时间后终止聊天，或者我想有一种方法可以只在事件发生时更新 在我看来，理想情况下，这样做效果最好： 如果用户输入新数据，则会在客户端检测到该数据，然后激活该功能，仅在此时更新聊天窗口 在ajax/jquery/javascript中是否存在类似这样的监
/* set interval of listener */
setInterval(function() {
listen()
}, 2500);
/* actual listener */
function listen(){
/* send listen via post ajax */
$.post("listenuser.php", {
chatsession: $('#chatsession').val(),
/* Do some other things after response and then update the chat window with response content from database window */
}, function(response){
$('#loadingchat').hide();
$('#chatcontent').show();
$('#messagewindow').show();
setTimeout("finishAjax('messagewindow', '"+escape(response)+"')", 450);
});
return false;
}
有很多方法可以做到这一点，但从您的设计来看，我建议使用一种称为Comet的技术，基本上是一种让web服务器向客户端“发送”数据的方法，而无需客户端进行任何请求。按照我的观点，如果你阅读代码，这是一种黑客行为。 但这里有一个例子，我发现了如何实现这一点，使用一个简单的文本文件： 服务器
<?php
$filename = dirname(__FILE__).'/data.txt';
// store new message in the file
$msg = isset($_GET['msg']) ? $_GET['msg'] : '';
if ($msg != '')
{
file_put_contents($filename,$msg);
die();
}
// infinite loop until the data file is not modified
$lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
$currentmodif = filemtime($filename);
while ($currentmodif <= $lastmodif) // check if the data file has been modified
{
usleep(10000); // sleep 10ms to unload the CPU
clearstatcache();
$currentmodif = filemtime($filename);
}
// return a json array
$response = array();
$response['msg'] = file_get_contents($filename);
$response['timestamp'] = $currentmodif;
echo json_encode($response);
flush();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Comet demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div id="content">
</div>
<p>
<form action="" method="get" onsubmit="comet.doRequest($('word').value);$('word').value='';return false;">
<input type="text" name="word" id="word" value="" />
<input type="submit" name="submit" value="Send" />
</form>
</p>
<script type="text/javascript">
var Comet = Class.create();
Comet.prototype = {
timestamp: 0,
url: './backend.php',
noerror: true,
initialize: function() { },
connect: function()
{
this.ajax = new Ajax.Request(this.url, {
method: 'get',
parameters: { 'timestamp' : this.timestamp },
onSuccess: function(transport) {
// handle the server response
var response = transport.responseText.evalJSON();
this.comet.timestamp = response['timestamp'];
this.comet.handleResponse(response);
this.comet.noerror = true;
},
onComplete: function(transport) {
// send a new ajax request when this request is finished
if (!this.comet.noerror)
// if a connection problem occurs, try to reconnect each 5 seconds
setTimeout(function(){ comet.connect() }, 5000);
else
this.comet.connect();
this.comet.noerror = false;
}
});
this.ajax.comet = this;
},
disconnect: function()
{
},
handleResponse: function(response)
{
$('content').innerHTML += '<div>' + response['msg'] + '</div>';
},
doRequest: function(request)
{
new Ajax.Request(this.url, {
method: 'get',
parameters: { 'msg' : request
});
}
}
var comet = new Comet();
comet.connect();
</script>
</body>
</html>
彗星演示
var Comet=Class.create（）；
Comet.prototype={
时间戳：0，
url:“./backend.php”，
诺尔：没错，
初始化：函数（）{}，
connect:function（）
{
this.ajax=new ajax.Request（this.url{
方法：“get”，
参数：{'timestamp'：this.timestamp}，
onSuccess:功能（传输）{
//处理服务器响应
var response=transport.responseText.evalJSON（）；
this.comet.timestamp=响应['timestamp']；
this.comet.handleResponse（response）；
this.comet.noerror=true；
},
未完成：功能（传输）{
//此请求完成后发送新的ajax请求
如果（！this.comet.noerror）
//如果出现连接问题，请尝试每5秒钟重新连接一次
setTimeout（函数（）{comet.connect（）}，5000）；
其他的
this.comet.connect（）；
this.comet.noerror=false；
}
});
this.ajax.comet=this；
},
断开连接：函数（）
{
},
HandlerResponse:功能（响应）
{
$（'content'）。innerHTML+=''+响应['msg']+''；
},
doRequest：功能（请求）
{
新的Ajax.Request（this.url{
方法：“get”，
参数：{'msg'：请求
});
}
}
var comet=新comet（）；
comet.connect（）；
客户端和用户不是一回事吗？你是说客户端和服务器吗？