基于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请求，后端则进行相应的查看。如果有数据就返回，否则就一直处于等待状态。