如何使聊天室发言时屏幕不闪？
日期：2014-01-06 浏览次数：21126 次
最近，有好多人来信询问在开发聊天室程序的时候屏幕总是不停的刷新，该怎么办？
编聊天室程序时，有两种把服务器的数据传到浏览器的方式。一种就是在服务器端有信息后，把信息推到客户端,这种方式使服务器的负载比较重；另一种就是在客户端用refresh命令进行刷新，大多数的聊天室都采用这种方式，这就使得我们在浏览器上看到屏幕在不断的刷新，非常影响浏览，在网速慢的时候这种情况更为严重。
有没有办法能够解决这种问题呢？答案是肯定的。下面我就给大家介绍一种用javacript来解决这种问题的方法。首先，我们把网页分成三桢（飞鹰只想用最简单的例子来说明原理，如果大家想建更复杂的聊天室，可根据具体情况而分。）。上面一桢为：main.htm,这一桢用来显示聊天的内容；下面一桢为：bottom.htm,用来输入聊天内容。再增加一个隐藏桢:list.asp,这桢的作用就是使的输入的话能够在main.htm桢中显示出来。
frame.htm---聊天室框架
<html>
<head>
<title>ASP酷聊天室</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset rows="1,403,92" cols="*">
<frame src="list.asp" name="list">
<frame src="main.htm" name="main1">
<frame src="bottom.htm">
</frameset>
<noframes><body bgcolor="#FFFFFF">
</body></noframes>
</html>
----------------------------------
main.htm
<html>
<head>
<title>聊天内容显示区</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
---------------------------------
bottom.htm
<html>
<head>
<title>聊天内容录入区</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<form name="form1" method="POST"
action="list.asp" target="list">
<div align="center">
<input type="text" name="comment">
<input type="submit" name="Submit" value="写写看">
</div>
</form>
</body>
</html>
----------------------------------------------
list.asp
<cript language="javacript">
function scrollon(){
top.main1.scroll(0, 65000);
}
top.main1.document.write('<=request("comment")>')
top.main1.document.write('<br>')
</cript>
用上面的方法大家就可以看到，在输入聊天内容时，在聊天室显示区中，就可以看到内容一行一行向下写去，而没有出现屏幕不断刷新的情况。下来大家把list.asp改变一下，我相信就可以得到从数据库中或者从application对象中得到的聊天内容了。只是有可能list.asp需要刷新，但是对于在聊天室中聊天的人来说，聊天内容是一行一行向下移动的。
相信用这中方法你就可以做出不在刷新屏幕的聊天室。
编聊天室程序时，有两种把服务器的数据传到浏览器的方式。一种就是在服务器端有信息后，把信息推到客户端,这种方式使服务器的负载比较重；另一种就是在客户端用refresh命令进行刷新，大多数的聊天室都采用这种方式，这就使得我们在浏览器上看到屏幕在不断的刷新，非常影响浏览，在网速慢的时候这种情况更为严重。
有没有办法能够解决这种问题呢？答案是肯定的。下面我就给大家介绍一种用javacript来解决这种问题的方法。首先，我们把网页分成三桢（飞鹰只想用最简单的例子来说明原理，如果大家想建更复杂的聊天室，可根据具体情况而分。）。上面一桢为：main.htm,这一桢用来显示聊天的内容；下面一桢为：bottom.htm,用来输入聊天内容。再增加一个隐藏桢:list.asp,这桢的作用就是使的输入的话能够在main.htm桢中显示出来。
frame.htm---聊天室框架
<html>
<head>
<title>ASP酷聊天室</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset rows="1,403,92" cols="*">
<frame src="list.asp" name="list">
<frame src="main.htm" name="main1">
<frame src="bottom.htm">
</frameset>
<noframes><body bgcolor="#FFFFFF">
</body></noframes>
</html>
----------------------------------
main.htm
<html>
<head>
<title>聊天内容显示区</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
---------------------------------
bottom.htm
<html>
<head>
<title>聊天内容录入区</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<form name="form1" method="POST"
action="list.asp" target="list">
<div align="center">
<input type="text" name="comment">
<input type="submit" name="Submit" value="写写看">
</div>
</form>
</body>
</html>
----------------------------------------------
list.asp
<cript language="javacript">
function scrollon(){
top.main1.scroll(0, 65000);
}
top.main1.document.write('<=request("comment")>')
top.main1.document.write('<br>')
</cript>
用上面的方法大家就可以看到，在输入聊天内容时，在聊天室显示区中，就可以看到内容一行一行向下写去，而没有出现屏幕不断刷新的情况。下来大家把list.asp改变一下，我相信就可以得到从数据库中或者从application对象中得到的聊天内容了。只是有可能list.asp需要刷新，但是对于在聊天室中聊天的人来说，聊天内容是一行一行向下移动的。
相信用这中方法你就可以做出不在刷新屏幕的聊天室。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
