C语言Socket动态ajax网页,简单的ajax聊天网页 socket

聊天室

输入信息:

聊天室信息:

您可以在这个网页中的文本框中输入文字,而下方会有个显示信息的区域,每次的新信息將只在该区域更新,页面中其余的部分不用变动,所以不用重复下载。

0818b9ca8b590ca3270a3433284dd417.png

来看一下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格式,表示目前服务器端所管理的聊天室中可取得的信息:

聊天信息一

聊天信息二

聊天信息三

以下是这个简单的聊天室的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;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值