j2ee建立在线聊天室详细教程（第三天加载消息，自动跳转）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第十三天，点击查看活动详情

----20220617

刚突然发现自己的文章，被别人转载了，我直接疑惑？？？这种事也能发生在我身上？麻了
哎，还是开始今天的内容吧，今天想给大家介绍一下我们聊天室的聊天部分。
让我们首先先进行一个登录，随便创建两个用户名，显示登录时间，名称与目前登录用户的个数

代码部分

今天我们讲的重点在于信息的加载与页面对于消息展示的滚动

<script type="text/javascript">
	var massageNumber=0;
	var massages="";
	var id;
	var isScroll=false;
	window.onload=function(){
		window.setInterval(function(){
			loadMassage();
			if(!isScroll){
			 	scroll();
			 }
		},1000);
	}
	function scroll(){
		isScroll=true;
		id = window.setInterval(function(){
			window.scrollTo(0,document.body.offsetHeight);
		},500);
	}
	window.onscroll=function(){
		isScroll=false;
		window.clearInterval(id);
	}
	
	function loadMassage(){
			ajax({
				data: "num="+massageNumber,
				url: "loadData.do",
				Success: function(msg){
					eval("res="+msg);
					massageNumber=parseInt(res.massageNumber);
					massages+=res.massage;
					document.body.innerHTML=massages;
				}
			});
	}
</script>
复制代码

代码讲解

首先定义以下变量：
信息总数：var massageNumber=0;
信息的基本信息：var massages="";var id;var isScroll=false;
当你发送完信息之后，什么很重要呢，那就是对于信息的加载，服务器需要对于信息进行一个加载，以此确保信息能够及时的展现在用户的页面上，这边我直接调用的window.onload方法

window.onload

window.onload()方法用于在网页加载完毕后立刻执行的操作
某些JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。因此我们需要调用这个方法。这边通过window.onload=function()语句来加载信息，定义入口函数。

现在我们直接跳到源码中的function loadMassage()函数，这样对于源码更容易理解
这个函数的作用是发起异步请求，加载相应数据，对于这类异步请求，统一使用ajax，关于ajax的介绍，我在之前的文章中介绍过，就不再介绍了. 函数中重要部分有：
//为当前信息总数： massageNumber=parseInt(res.massageNumber);
//当前信息massages+=res.massage;

自动滚动

现在大家思考一个问题，我们现在的页面，每次接受加载一个消息的时候，由于我们页面大小的问题，开始是不会影响我们的观看的，正如现在由于页面无法完全显示，所以不需要旁边进行滑动来转换数据的操作

那等信息发送变多时，我们要如何及时查看信息呢？

这边就要用到滚动条以及自动滚动了
这边其实很简单，我用到了前端必备自定义滚动库——iScroll，一切都变得简单了起来

iScroll

很多场景，如果使用body的滚动会很不方便，这时候，就会使用某个元素的局部滚动，有时不利于实现一些个性化需求，例如加载，刷新，贴合滚动等，那么对于我们这个聊天室的代码而言，大家都知道我们前面对于消息，有一个加载，便于消息的战术与更新，而iScroll解决了这些问题！并且大家要记得技术刷新Iscroll，因为滚动内容可能是异步获取并加载dom，如果不刷新iscroll，那么滚动功能可能会受到影响，所以当异步内容加载后，需要调用刷新方法，刷新iscroll。

那么我这边是通过定位id来进行实现跳转滚动的，定义id= window.setInterval语句，定义跳转时间，通过Window.scrollTo()，定义跳转位置，鼠标移至聊天框时，取消自动跳转。总的来说，难度较小，大家一定要学会调用前人写好的库与语句，代码编写能力会快很多。今天的内容就到此结束啦