简单的ajax聊天网页 socket

最新推荐文章于 2021-08-05 13:10:01 发布

mirkerson

最新推荐文章于 2021-08-05 13:10:01 发布

阅读量5.9k

点赞数

分类专栏： THML/JavaScript 文章标签：聊天 ajax string xmlhttprequest function table

THML/JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简单的ajax聊天网页

下载源代码

〖作者：良葛格〗〖大小：3k 〗〖发布日期：2007-06-28 〗〖浏览：2 〗

    网页聊天的基本原理很简单，在使用者发送信息给服务器端时，同时取回新的聊天信息，在使用者沒有发送信息时，同时查询服务端是否有新的信息，並显示在页面中。

  不过重点就在于取得信息或重新取得信息的方式，过去，是在让浏览器定时重新刷新网页，每一次除了新的信息之外，往往伴随着大量重复的HTML标记等內容。

  如果使用非同步請求，取得XML回应信息，并动态更新页面中显示聊天信息的部分，这么一来，就可以节省掉下载重复页面內容的带宽，使用者的画面也会更稳定，不会因为重新整理而发生闪烁的感觉。

例如，您可以写一个简单的聊天页面： index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>聊天室</title>
<script type="text/javascript" src="ChatRoomEx-1.js"></script>
</head><body>
<p>输入信息：
  <input id="text"/>
  <input type="button" value="发送" οnclick="sendMessage()"/>
</p>
<p>聊天室信息：</p>
  <table align="left">
    <tbody id="dynamicUpdateArea"></tbody>
  </table>
</body></html>
    您可以在这个网页中的文本框中输入文字，而下方会有个显示信息的区域，每次的新信息將只在该区域更新，页面中其余的部分不用变动，所以不用重复下载。

来看一下JavaScript的部分：ChatRoomEx-1.js

var xmlHttp;
function createXMLHttpRequest() {
     if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     }else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest(); 
     }
}
function sendMessage() {
    var msg = document.getElementById("text").value;   
    // 使用者只是随意按下发送按钮，但文本框中沒有文字
    if(msg === "") {
        // 那就重新整理信息区好了
	refreshMessage();
	return;  
    } 
     // 发送信息
    var param = "task=send&msg=" + msg; 
 
    // ajax请求
    ajaxRequest(param); 
    // 清空文本框
    document.getElementById("text").value = "";
 }
    // 定时查询用这个
    function queryMessage() { 
     var param = "task=query"; 
     ajaxRequest(param);
    }
    function ajaxRequest(param) { 
      var url = "ChatRoomServlet?timeStamp=" + new Date().getTime(); 
      createXMLHttpRequest(); 
      xmlHttp.onreadystatechange = refreshMessage; 
      xmlHttp.open("POST", url);  
      xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
      xmlHttp.send(param);
     }
     function refreshMessage() {
       if(xmlHttp.readyState == 4) { 
          if(xmlHttp.status == 200) {  
          // 处理显示信息的表格区域
            var table_body = document.getElementById("dynamicUpdateArea");
	    var length = table_body.childNodes.length;
            var i;
            for (i = 0; i < length; i++) { 
               // 先移除原有的列（row） 
               table_body.removeChild(table_body.childNodes[0]); 
           }  
          // 处理取回的信息
            var messages = xmlHttp.responseXML.getElementsByTagName("message");	 
            length = messages.length;
	    for(i = length - 1; i >= 0 ; i--) {	
             var message = messages[i].firstChild.data;  
              // 在表格中新增一列来排列信息
	        var row = createRow(message);	
                table_body.appendChild(row); 
             }  
            // 下次2秒后会再查询一下有无新信息
 	    setTimeout(queryMessage, 2000); 
        } 
    }
 }
   function createRow(message) { 
      var row = document.createElement("tr");
      var cell = document.createElement("td"); 
      var cell_data = document.createTextNode(message); 
      cell.appendChild(cell_data);
      row.appendChild(cell);  
      return row;
   }
服务器端必须传回以下的XML格式，表示目前服务器端所管理的聊天室中可取得的信息：

<messages>
   <message>聊天信息一</message>
  <message>聊天信息二</message>
  <message>聊天信息三</message>
</messages>

以下是这个简单的聊天室的Servlet：ChatRoomServlet.java

package onlyfun.caterpillar;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements
    javax.servlet.Servlet {
      private static LinkedList messages = new LinkedList(); 
      private List addMessage(String text) {
        if (text != null && text.trim().length() > 0) {  
          messages.addFirst(new Message(text)); 
          while (messages.size() > 10) { 
               messages.removeLast();  
          }  
        }  
        return messages;  
     } 
     private List getMessages() {
        return messages; 
     }  
      protected void doPost(HttpServletRequest request, HttpServletResponse response)  
         throws ServletException, IOException { 
           List list = null; 
              if("send".equals(request.getParameter("task"))) { 
               String msg = request.getParameter("msg");  
               // 中文处理
               msg = new String(msg.getBytes("ISO-8859-1"), "UTF8"); 
               list = addMessage(msg); 
              } else if("query".equals(request.getParameter("task"))){ 
               list = getMessages();
              }   
              response.setContentType("text/xml");
              response.setHeader("Cache-Control", "no-cache"); 
              response.setCharacterEncoding("UTF8");  
              PrintWriter out = response.getWriter(); 
              out.println("< messages>");  
              for(int i = 0; i < list.size(); i++) { 
                String msg = list.get(i).getText(); 
                out.println("< message>" + msg + "< /message>");  
              } 
       
              out.println(" "); 
            out.close();  
        }  
   }
Message.java 

package onlyfun.caterpillar;
public class Message {
   private String text;
   public Message(String newtext) { 
       text = newtext; 
       if (text.length() > 256) { 
           text = text.substring(0, 256);  
       }  
       text = text.replace('<', '['); 
       text = text.replace('&', '_'); 
    }  
     public String getText() { 
       return text; 
   }
}

mirkerson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
简单的ajax聊天网页 socket

<br />简单的ajax聊天网页<br /> <br />下载源代码<br />〖作者：良葛格〗〖大小：3k 〗〖发布日期：2007-06-28 〗〖浏览：2 〗<br /> <br /> 网页聊天的基本原理很简单，在使用者发送信息给服务器端时，同时取回新的聊天信息，在使用者沒有发送信息时，同时查询服务端是否有新的信息，並显
复制链接

扫一扫

专栏目录