基于Javascript的校园社交网络系统的研究与开发

刘国东　李文杰

摘要：随着互联网应用的普及，社交网络得到了迅猛发展。该文分析了设计校园社交网络的必要性，描述了校园社交网络系统的主要功能，并从Ajax开发技术、JSON数据格式、自动补全技术、CSS hack技术、提高浏览器加载速度等方面，论述了开发该系统的关键技术，同时介绍了该系统的实现方法。

关键词：Javascript；校园社交网络系统；开发

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2014）11-2689 -04

社交网络是由互联网技术构建的人际交往信息平台，实现了人与人之间的远距离、实时联系。随着互联网的普及，社交网络日益显示出操作方便、信息快捷、不受时间和地域限制等优点，已经成为大学生在学习、生活中不可或缺的重要组成部分。

近年来，我国的社交网络发展迅速，人人网、开心网等基本上占领了中国社交网络的大部分市场，但是我国的这些社交网络大都面向各类大众人群，商业性、娱乐性很强，偶尔还传播不良信息，尚不能完全满足大学生特定的学习、生活和精神需要。我国还没有一个真正意义上的纯属于校园的社交网络。因此，有必要构建一个专属于大学生的校园社交网络，为他们提供一个结交朋友、沟通交流、相互学习的信息平台，帮助他们缓解学习、生活、人际交往的压力，丰富他们的精神家园，传递正能量。

1.1.1 个人主页

个人主页是个人信息的展示页面，可以展示页面主人的个性签名、个人资料和头像等个性化的信息，还可以显示页面主人近期的详细动态。通过个人主页，可以展示页面主人的爱好、才艺、思想动态和学习生活轨迹，充分显现出大学生们鲜明的个性特色。

1.1.2 留言板、日志、说说

这几个模块是个人空间的主要功能模块。与其他社交网不同的是，本系统能够通过留言板、日志、说说等功能模块进行互动，即每名注册用户可以通过一个官方账号以说说的形式发表一些校园里的趣事，其他的注册用户可以通过留言功能参与互动，并可以进行评论和转发。日志功能模块则详细记录了交互过程。通过这种交互方式，可以抒发页面主人的情感，增加个人主页空间的人气，让网络访客了解页面主人的思想，扩大交友圈。

为了保证留言的私秘性和信息的安全性，访客可以在留言板中勾选“仅对主人可见”选项，不对其他访客公开留言，页面主人也可以在留言板批量删除留言，快速清除不当信息。日志和说说都采用了Ckeditor网页编辑器，操作简便、编辑功能强。

1.1.3 修改个人资料及访问权限

通过该模块，页面主人可以修改个人的详细资料。为了保证个人信息真实、有效，系统对修改信息功能设置了一定的限制，凡是个人确定的信息项目，一经录入就不可再次修改，如：性别、出生日期、学校、入校时间等信息，页面主人在注册用户信息时，系统会提醒用户确定这些信息项，用户一旦确定后，就不能够再次修改这些信息。

页面主人还能设置页面的访问权限，通过该模块，除了能够设置像QQ空间一样的某些人可看或者不能看的权限外，还可以设置哪些大学的同学可看或者不能看，体现出校园社交网络的特色。

其中添加某些特定的用户可以观看，是使用一个弹出框的形式实现的。用户在框中输入账号，则会动态查询此人，如果没有查到此人，则提示用户输入错误。页面会显示好友信息，可以直接点击好友后面的按钮，将其加入，如果想去除，亦可点击已经加入人后面的删除按钮。

1.1.4 在线聊天模块

页面主人可以通过在线聊天模块与好友进行实时交流。在网页的右侧有个好友列表，按好友分组进行展示。当有有好友的消息来时，好友头像后面会显示到达的信息条数。点击一下，好友头像会变大。双击则会打开聊天窗口。

系统每隔相同的时间会检测发来的消息，如果有未读消息，则会在好友头像后面用红色字体显示未读的消息数。

1.2 好友管理模块

通过该模块，页面主人可以查看、管理自己的好友信息。页面主人可以创建分组，分类管理好友信息，进入每个分组可以查看该组的好友信息。页面主人也可以移动好友分组，或者删除好友。

好友管理模块能够显示好友所在的学校、家乡、现居地等信息，供页面主人在添加好友时进行筛选。

1.3 好友搜索模块

好友搜索模块具有在线寻找好友的功能。可以按性别、年龄、学校等方式寻找好友。每次添加一个条件后，都会在显示搜索结果里面添加一小块条件显示，让页面主人知道自己寻找好友的条件，并且每个条件都是可删除的，删除某个条件后，将会自动再次搜寻所匹配的好友。可以选择将此人加入自己的哪个分组。

在显示的人中，可以点击其所在大学、家乡、现居地、现在正从事的工作等项目，可以自动添加相应的条件。

2 本系统的关键技术

2.1 AJAX 与 JSON数据格式

在本系统的设计中，主要运用了AJAX开发技术，这是开发本系统的关键技术。

①采用JAVA平台提供的jquery框架技术设计AJAX程序。

在开发本系统时，如果按照传统的程序设计方法，需要编写具体的AJAX程序，但是这就要考虑浏览器的不同，还要考虑其他各种因素，比如HTTP返回码，并且返回来的数据格式一般都是字符串，还需要解析成json数据，所以，开发工作十分复杂。jquery框架提供了完美的封装技术，代码简洁高效，简化了编程过程。因此，在开发本系统过程中，采用jquery框架技术设计AJAX程序，大大降低了系统开发的复杂度，较好地解决了开发AJAX程序较为复杂的难题。

③采用AJAX技术编程实现实时在线聊天的功能。

这一技术主要用在前端的开发。当一个聊天窗口打开后，前端马上发一个AJAX请求，后端则进行相应的查看。如果有数据就返回，否则就一直处于等待状态。endprint

前端如果收到后台的返回数据后就动态往聊天信息显示栏里面添加该数据，否则就一直处于等待状态。系统设置了一个超时时间，如果在设定的时间范围内没有返回数据，就进行下一步操作，一般为中断连接，再次请求。

④利用该技术实现在聊天记录中插入图片。

这个过程是：将需插入的图片保存在一个文件夹下，为每个图片编号（从1开始），形成图片库，用户选中相应的图片后，在输入框中加入一个图片的编号，就能实现插入图片的功能。

如：选中第一张图片，则在信息框中 添加 [＼1].

在显示消息时，对字符串进行检测，检测到 [＼**] 这样的字符串后，就将其替换为标签。

2.2 自动补全技术

如何保证用户注册时输入的关键信息标准、可用，是本系统设计中的一个技术难点。

从系统的的功能中可以看出，本系统有很多页面涉及到学校，如注册时需要填写学校，按学校查看好友等，学校名称是本系统的关键信息。因此，不能让用户随意输入学校信息，因为用户很可能会随便输入一串字符，或者只是输入学校的简称，将导致学校信息不完整、不标准，在检索学校信息时，就会导致检索结果不可信。

在本系统的设计中，采用自动补全技术解决这个难题。

用户在选择了自己学校的省份后，在后面的文本框中只用输入自己学校名称中的少量文字，或者拼音的首字母，系统就能自动检索出符合条件的学校名称，供用户进一步选择。

如用户选择湖北省后，输入wh，那么页面就会自动出现一串列表，显示名字前两个字拼音的首字母为wh的学校，用户只需点击选中相应的学校名称即可，既方便了用户操作，又保证了学校名称的标准性。

自动补全技术的实现过程是：

①在关键信息输入文本框中注册一个keyup事件，该事件将在键盘上按键被释放时被触发。

②当用户在该文本框中通过键盘输入信息时，由于按键的释放将触发keyup事件，将用户输入的内容通过AJAX方式发送给后台服务器，后台从数据库中查询数据，返回给前端。

③前端收到数据后，在文本框下面构造一个选择列表，显示出查询的结果。

CSS hack的书写顺序没有特别要求，本系统是将使用范围广的浏览器的CSS写在前面，这样可更加容易被识别。

2.4 加快浏览器的加载速度

提高浏览器的加载速度非常重要。浏览器能够早一秒显示给用户，那么就可以带来更多的用户量，如果页面加载时间过长，那么用户很可能因用户体验较差而把网页关闭。本系统加快浏览器加载速度的主要技术如下。

3 结束语

本系统虽然加入了很多校园元素，但依然是每个人都可以注册的，不能够保证每个用户都是大学生。在系统开发完成后，下一步准备与各个大学合作，加入学号认证功能，保证每个在本网站注册上网的人都是大学生。另外，还可以加入贴吧及群聊功能，进一步扩大大学生的交流圈，活跃大学生社交网络平台的气氛。

参考文献：

[1] 曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.

[2] Alex MacCaw.基于MVC的Javascript Web富应用开发（中文版）[M].北京：电子工业出版社，2012.

[3] David Flanagan.JavaScript权威指南（中文版）[M].北京：机械工业出版社，2012.endprint

前端如果收到后台的返回数据后就动态往聊天信息显示栏里面添加该数据，否则就一直处于等待状态。系统设置了一个超时时间，如果在设定的时间范围内没有返回数据，就进行下一步操作，一般为中断连接，再次请求。

④利用该技术实现在聊天记录中插入图片。

这个过程是：将需插入的图片保存在一个文件夹下，为每个图片编号（从1开始），形成图片库，用户选中相应的图片后，在输入框中加入一个图片的编号，就能实现插入图片的功能。

如：选中第一张图片，则在信息框中 添加 [＼1].

在显示消息时，对字符串进行检测，检测到 [＼**] 这样的字符串后，就将其替换为标签。

2.2 自动补全技术

如何保证用户注册时输入的关键信息标准、可用，是本系统设计中的一个技术难点。

从系统的的功能中可以看出，本系统有很多页面涉及到学校，如注册时需要填写学校，按学校查看好友等，学校名称是本系统的关键信息。因此，不能让用户随意输入学校信息，因为用户很可能会随便输入一串字符，或者只是输入学校的简称，将导致学校信息不完整、不标准，在检索学校信息时，就会导致检索结果不可信。

在本系统的设计中，采用自动补全技术解决这个难题。

用户在选择了自己学校的省份后，在后面的文本框中只用输入自己学校名称中的少量文字，或者拼音的首字母，系统就能自动检索出符合条件的学校名称，供用户进一步选择。

如用户选择湖北省后，输入wh，那么页面就会自动出现一串列表，显示名字前两个字拼音的首字母为wh的学校，用户只需点击选中相应的学校名称即可，既方便了用户操作，又保证了学校名称的标准性。

自动补全技术的实现过程是：

①在关键信息输入文本框中注册一个keyup事件，该事件将在键盘上按键被释放时被触发。

②当用户在该文本框中通过键盘输入信息时，由于按键的释放将触发keyup事件，将用户输入的内容通过AJAX方式发送给后台服务器，后台从数据库中查询数据，返回给前端。

③前端收到数据后，在文本框下面构造一个选择列表，显示出查询的结果。

CSS hack的书写顺序没有特别要求，本系统是将使用范围广的浏览器的CSS写在前面，这样可更加容易被识别。

2.4 加快浏览器的加载速度

提高浏览器的加载速度非常重要。浏览器能够早一秒显示给用户，那么就可以带来更多的用户量，如果页面加载时间过长，那么用户很可能因用户体验较差而把网页关闭。本系统加快浏览器加载速度的主要技术如下。

3 结束语

本系统虽然加入了很多校园元素，但依然是每个人都可以注册的，不能够保证每个用户都是大学生。在系统开发完成后，下一步准备与各个大学合作，加入学号认证功能，保证每个在本网站注册上网的人都是大学生。另外，还可以加入贴吧及群聊功能，进一步扩大大学生的交流圈，活跃大学生社交网络平台的气氛。

参考文献：

[1] 曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.

[2] Alex MacCaw.基于MVC的Javascript Web富应用开发（中文版）[M].北京：电子工业出版社，2012.

[3] David Flanagan.JavaScript权威指南（中文版）[M].北京：机械工业出版社，2012.endprint

前端如果收到后台的返回数据后就动态往聊天信息显示栏里面添加该数据，否则就一直处于等待状态。系统设置了一个超时时间，如果在设定的时间范围内没有返回数据，就进行下一步操作，一般为中断连接，再次请求。

④利用该技术实现在聊天记录中插入图片。

这个过程是：将需插入的图片保存在一个文件夹下，为每个图片编号（从1开始），形成图片库，用户选中相应的图片后，在输入框中加入一个图片的编号，就能实现插入图片的功能。

如：选中第一张图片，则在信息框中 添加 [＼1].

在显示消息时，对字符串进行检测，检测到 [＼**] 这样的字符串后，就将其替换为标签。

2.2 自动补全技术

如何保证用户注册时输入的关键信息标准、可用，是本系统设计中的一个技术难点。

从系统的的功能中可以看出，本系统有很多页面涉及到学校，如注册时需要填写学校，按学校查看好友等，学校名称是本系统的关键信息。因此，不能让用户随意输入学校信息，因为用户很可能会随便输入一串字符，或者只是输入学校的简称，将导致学校信息不完整、不标准，在检索学校信息时，就会导致检索结果不可信。

在本系统的设计中，采用自动补全技术解决这个难题。

用户在选择了自己学校的省份后，在后面的文本框中只用输入自己学校名称中的少量文字，或者拼音的首字母，系统就能自动检索出符合条件的学校名称，供用户进一步选择。

如用户选择湖北省后，输入wh，那么页面就会自动出现一串列表，显示名字前两个字拼音的首字母为wh的学校，用户只需点击选中相应的学校名称即可，既方便了用户操作，又保证了学校名称的标准性。

自动补全技术的实现过程是：

①在关键信息输入文本框中注册一个keyup事件，该事件将在键盘上按键被释放时被触发。

②当用户在该文本框中通过键盘输入信息时，由于按键的释放将触发keyup事件，将用户输入的内容通过AJAX方式发送给后台服务器，后台从数据库中查询数据，返回给前端。

③前端收到数据后，在文本框下面构造一个选择列表，显示出查询的结果。

CSS hack的书写顺序没有特别要求，本系统是将使用范围广的浏览器的CSS写在前面，这样可更加容易被识别。

2.4 加快浏览器的加载速度

提高浏览器的加载速度非常重要。浏览器能够早一秒显示给用户，那么就可以带来更多的用户量，如果页面加载时间过长，那么用户很可能因用户体验较差而把网页关闭。本系统加快浏览器加载速度的主要技术如下。

3 结束语

本系统虽然加入了很多校园元素，但依然是每个人都可以注册的，不能够保证每个用户都是大学生。在系统开发完成后，下一步准备与各个大学合作，加入学号认证功能，保证每个在本网站注册上网的人都是大学生。另外，还可以加入贴吧及群聊功能，进一步扩大大学生的交流圈，活跃大学生社交网络平台的气氛。

参考文献：

[1] 曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.

[2] Alex MacCaw.基于MVC的Javascript Web富应用开发（中文版）[M].北京：电子工业出版社，2012.

[3] David Flanagan.JavaScript权威指南（中文版）[M].北京：机械工业出版社，2012.endprint