`
lujar
  • 浏览: 515312 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

实现一个无刷新的基于ajax的简易聊天室

阅读更多

实现一个基于ajax的简易聊天室

1 程序主页面

<html>
<head>
<title>在线交流对话</title>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<?php
 include_once("server1.server.php"); #servidor para XAJAX
 $xajax->printJavascript();
?>

</head>
<body>
<div id=display>
 
</div>

<script language=javascript>
function reloaddisplay()
{
xajax_reloaddisplay();
}
setInterval(reloaddisplay,5000); //五秒钟自动读取最新的留言15条
</script>

<script language=javascript>
    function onSubmit() {
      xajax_speak(xajax.getFormValues("speakForm"));
    }
</script>

<div id=speak>
<form id="speakForm" action="javascript:void(null);" onsubmit="onSubmit();">
  <fieldset>
  <legend>Please into your words here!</legend>
  <label>Speak:</label>
  <input type="text" name="words" id="words" size="40" maxlength="150" />
  <input type="submit" value="enter"> //点击按钮时提交
  <input type="hidden" name="nick" id="nick" value="guest" />
  </fieldset>
</form>
</div>

</body>
</html>

2 脚本

-- 聊天室
CREATE TABLE TBL_CHAT (
  nick varchar(10) NOT NULL default '',
  words varchar(150) NOT NULL default '',
  chattime bigint(20) unsigned NOT NULL default '0'
) TYPE=MyISAM;

3 服务器端

<?php
include 'include.php';
require("xajax.inc.php");

//extend response
class myXajaxResponse extends xajaxResponse

  function addAddOption($sSelectId, $sOptionText, $sOptionValue) 
  { 
    $sScript  = "var objOption = new Option('".$sOptionText."','".$sOptionValue."');";
    $sScript .= "document.getElementById('".$sSelectId."').options.add(objOption);";
    $this->addScript($sScript);
  }
 
  function addClearSelect($sSelectId) 
  { 
    $sScript .= "document.getElementById('".$sSelectId."').options.length = 0;";
    $sScript .= "document.getElementById('".$sSelectId."').options.selectedIndex = 0;";
    $this->addScript($sScript);
  }
}

//显示留言的函数

function reloaddisplay(){
  global $db,$now;
 
 $objResponse = new xajaxResponse();
 $tmp="";
 
  $chats = $db->getAll($db->modifyLimitQuery("select * from ".TBL_CHAT." order by chattime desc", 0, 15));
  for ($i = 0, $count = count($chats); $i < $count; $i++) {
   $tmp.= $chats[$i]['nick'].":".$chats[$i]['words']."<br>";
  }
 
  //Delete old data 只保留15条信息
  $nr = $db->getOne("select count(*) from ".TBL_CHAT);
  if($nr > 15) {
   $delnr = $nr - 15;
    $db->query("delete from TBL_CHAT order by chattime asc limit $delnr)");
  } 

 $objResponse->addAssign("display","innerHTML",$tmp);
 return $objResponse->getXML();

}

//无提交表单程序,特别注意这里需要用iconv还原url的编码

function speak($formData){
 global $db,$now;
  $objResponse = new xajaxResponse();
 
  $words = iconv("UTF-8","GBK",$formData['words']);
  $nick = iconv("UTF-8","GBK",$formData['nick']);
 
  if(strlen($words) > 0 && strlen($nick) > 0) {
   $db->query("insert into ".TBL_CHAT." (nick, words,chattime) values ("
                  .$db->quote(stripslashes($nick)).", "
                  .$db->quote(stripslashes($words))
                  .", '$now')");                 
  }
  $objResponse->addClear("words","value");

  return $objResponse->getXML();
}


$xajax = new xajax("server1.server.php","xajax_",false);
$xajax->registerFunction("reloaddisplay");
$xajax->registerFunction("speak");
$xajax->processRequests();
?>

分享到:
评论

相关推荐

    基于AJAX的简易聊天室

    【基于AJAX的简易聊天室】是一个利用现代Web技术实现的实时交互平台,它整合了AJAX、JSP、Servlet和MySQL数据库等关键技术,旨在提供一个简洁高效的在线沟通环境。AJAX(Asynchronous JavaScript and XML)是核心,...

    Ajax简易聊天室,ASP+Ajax简易聊天室

    Ajax简易聊天室,运行于ASP环境,用Access存储聊天记录,本程序纯属为了学习,请不要当成功能强大的聊天室来用,呵呵,只是想研究一下Ajax练手的,实现了聊天室的基本雏形,可以无刷新发送消息,数据库定时更新,...

    Ajax简易在线聊天室

    这个"Ajax简易在线聊天室"项目是一个很好的学习实例,它将帮助我们深入理解如何利用Ajax实现动态交互的网页应用。 ### 1. 基本原理 Ajax的核心是通过JavaScript异步与服务器交换数据并局部更新页面。它使用了...

    AJAX实现无刷新简易聊天室

    【标题】"AJAX实现无刷新简易聊天室"揭示了一个基于AJAX技术构建的实时通信应用,它允许用户在不刷新整个网页的情况下进行聊天。AJAX(Asynchronous JavaScript and XML)是一种在后台与服务器交换数据并更新部分...

    ajax简易聊天室

    【Ajax简易聊天室】是一个基于JSP、Ajax和Java技术实现的在线实时交流平台,它允许用户无需刷新页面即可发送和接收消息,提供了一种轻松、便捷的沟通体验。在这个项目中,Ajax起到了关键作用,它是一种在不重新加载...

    一个基于.Net 3.5+LINQ+AJAX实现的JChat简易聊天室源码

    基于.Net 3.5框架、结合LINQ(Language Integrated Query)查询语言和AJAX(Asynchronous JavaScript and XML)异步技术的JChat简易聊天室源码,为我们提供了一个高效、实时的在线交流平台。本文将深入探讨这些技术...

    简易无刷新聊天室

    【简易无刷新聊天室】是一种基于Web技术实现的实时通讯应用,主要针对初学者设计,旨在帮助他们理解和掌握实时交互式网页的开发技术。在这个小案例中,用户可以在不刷新页面的情况下发送和接收消息,提高了用户体验...

    自个写的PHP+MySQL+Ajax无刷新文字聊天室

    自个写的PHP+MySQL+Ajax无刷新文字聊天室 《PHP+MYSQL+Ajax无刷文字聊天室》 ***************************************** 功能 :1) 不需要刷新,可实时获取最新信息显示在聊天窗口中 2) 支持回车直接发送...

    PHP+Ajax 超简易聊天工具(无刷新提交,仅供学习)

    【PHP+Ajax 超简易聊天工具】是一个用于学习目的的简单在线聊天系统,它结合了PHP和Ajax技术,实现了用户无需刷新页面即可实时发送和接收消息的功能。这个项目对于初学者来说,是一个很好的实践案例,可以深入理解...

    一个简单的jsp聊天室(ajax技术)

    在这个项目中,我们探索了一个基于JSP和AJAX技术实现的简单聊天室。JSP(JavaServer Pages)是用于创建动态网页的技术,它允许开发者在HTML代码中嵌入Java代码,从而实现服务器端的数据处理。而AJAX(Asynchronous ...

    基于C#语言的简易聊天室

    "还有一个聊天的页面"是用户实际进行交流的地方,它可能通过Ajax技术实现无刷新更新,提供流畅的用户体验。同时,为了保证聊天的安全性,开发者可能还对用户输入的数据进行了过滤和编码,防止XSS(跨站脚本攻击)等...

    简易聊天室(asp.net实现)

    【简易聊天室(asp.net实现)】 在信息技术领域,构建一个在线聊天室是常见的实践项目,它可以帮助开发者熟练掌握Web应用程序的设计与实现。本项目基于ASP.NET和C#语言,旨在提供一个简单、实用的实时通信平台。ASP...

    基于web的简易聊天室

    综上所述,构建一个基于Web的简易聊天室是一个涉及多方面技术的综合性项目,需要开发者具备扎实的Web基础知识,以及对实时通信和音视频处理的深入理解。通过这个项目,开发者可以提升自己的全栈开发能力,并在实践中...

    最简单无刷新聊天室_网站在线聊天留言源码.rar

    【标题】"最简单无刷新聊天室_网站在线聊天留言源码" 提供的是一个实现网页实时通信的示例,这种技术通常基于Ajax(异步JavaScript和XML)或者WebSockets等技术,允许用户在不刷新整个页面的情况下进行实时交互。...

    简单的ajax聊天室

    在“简单的Ajax聊天室”项目中,我们看到开发者运用Ajax技术构建了一个无需刷新页面即可实现实时聊天的环境。用户可以在聊天室中输入消息并发送,其他在线用户可以即时看到新消息,整个过程不会中断当前页面的显示。...

    PHPAJAX实现无刷新下载文件实例(MySQL)

    PHP AJAX实现一款无刷新下载文件的实例,同时与MySQL数据库连接,前端配合CSS与JavaScript技术,完成了一个漂亮的下载页面,这个页面是网页前端编程的综合展现。鼠标在下载列表移动的时候,会适时出现下载提示,抛去...

    简易聊天室(PHP+MySQL

    【简易聊天室(PHP+MySQL】是一个基于Web的实时交流平台,主要利用PHP作为服务器端脚本语言,配合MySQL数据库来存储用户信息和聊天记录。这个项目实现了几个关键功能,包括用户注册、发言、查看聊天记录、用户注销...

    基于 visual studio开发的在线聊天室

    Ajax技术可以实现页面无刷新更新,保持用户体验流畅。 7. **数据库管理** 用户信息、聊天记录等数据通常存储在数据库中。Visual Studio集成了对SQL Server的支持,可以方便地创建数据库模型、执行SQL语句以及管理...

    javaweb简易聊天室程序

    总的来说,"javaweb简易聊天室程序"是一个涵盖了JavaWeb基础技术的实战项目,包括Servlet、JSP、JavaBean、数据库连接以及可能的AJAX技术。通过学习和实践这个项目,初学者可以深入理解Web开发的流程,提升自己的...

    jsp+ajax聊天室

    【jsp+ajax聊天室】是一个基于JavaServer Pages (JSP) 和 Asynchronous JavaScript and XML (AJAX) 技术构建的简易在线交流平台。在这个项目中,开发者利用JSP作为后端服务器端脚本语言,处理用户交互和数据管理,而...

Global site tag (gtag.js) - Google Analytics