劉國東　李文杰

摘要：隨著互聯(lián)網(wǎng)應(yīng)用的普及，社交網(wǎng)絡(luò)得到了迅猛發(fā)展。該文分析了設(shè)計校園社交網(wǎng)絡(luò)的必要性，描述了校園社交網(wǎng)絡(luò)系統(tǒng)的主要功能，并從Ajax開發(fā)技術(shù)、JSON數(shù)據(jù)格式、自動補全技術(shù)、CSS hack技術(shù)、提高瀏覽器加載速度等方面，論述了開發(fā)該系統(tǒng)的關(guān)鍵技術(shù)，同時介紹了該系統(tǒng)的實現(xiàn)方法。

關(guān)鍵詞：Javascript；校園社交網(wǎng)絡(luò)系統(tǒng)；開發(fā)

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2014）11-2689 -04

社交網(wǎng)絡(luò)是由互聯(lián)網(wǎng)技術(shù)構(gòu)建的人際交往信息平臺，實現(xiàn)了人與人之間的遠(yuǎn)距離、實時聯(lián)系。隨著互聯(lián)網(wǎng)的普及，社交網(wǎng)絡(luò)日益顯示出操作方便、信息快捷、不受時間和地域限制等優(yōu)點，已經(jīng)成為大學(xué)生在學(xué)習(xí)、生活中不可或缺的重要組成部分。

近年來，我國的社交網(wǎng)絡(luò)發(fā)展迅速，人人網(wǎng)、開心網(wǎng)等基本上占領(lǐng)了中國社交網(wǎng)絡(luò)的大部分市場，但是我國的這些社交網(wǎng)絡(luò)大都面向各類大眾人群，商業(yè)性、娛樂性很強，偶爾還傳播不良信息，尚不能完全滿足大學(xué)生特定的學(xué)習(xí)、生活和精神需要。我國還沒有一個真正意義上的純屬于校園的社交網(wǎng)絡(luò)。因此，有必要構(gòu)建一個專屬于大學(xué)生的校園社交網(wǎng)絡(luò)，為他們提供一個結(jié)交朋友、溝通交流、相互學(xué)習(xí)的信息平臺，幫助他們緩解學(xué)習(xí)、生活、人際交往的壓力，豐富他們的精神家園，傳遞正能量。

1.1.1 個人主頁

個人主頁是個人信息的展示頁面，可以展示頁面主人的個性簽名、個人資料和頭像等個性化的信息，還可以顯示頁面主人近期的詳細(xì)動態(tài)。通過個人主頁，可以展示頁面主人的愛好、才藝、思想動態(tài)和學(xué)習(xí)生活軌跡，充分顯現(xiàn)出大學(xué)生們鮮明的個性特色。

1.1.2 留言板、日志、說說

這幾個模塊是個人空間的主要功能模塊。與其他社交網(wǎng)不同的是，本系統(tǒng)能夠通過留言板、日志、說說等功能模塊進(jìn)行互動，即每名注冊用戶可以通過一個官方賬號以說說的形式發(fā)表一些校園里的趣事，其他的注冊用戶可以通過留言功能參與互動，并可以進(jìn)行評論和轉(zhuǎn)發(fā)。日志功能模塊則詳細(xì)記錄了交互過程。通過這種交互方式，可以抒發(fā)頁面主人的情感，增加個人主頁空間的人氣，讓網(wǎng)絡(luò)訪客了解頁面主人的思想，擴大交友圈。

為了保證留言的私秘性和信息的安全性，訪客可以在留言板中勾選“僅對主人可見”選項，不對其他訪客公開留言，頁面主人也可以在留言板批量刪除留言，快速清除不當(dāng)信息。日志和說說都采用了Ckeditor網(wǎng)頁編輯器，操作簡便、編輯功能強。

1.1.3 修改個人資料及訪問權(quán)限

通過該模塊，頁面主人可以修改個人的詳細(xì)資料。為了保證個人信息真實、有效，系統(tǒng)對修改信息功能設(shè)置了一定的限制，凡是個人確定的信息項目，一經(jīng)錄入就不可再次修改，如：性別、出生日期、學(xué)校、入校時間等信息，頁面主人在注冊用戶信息時，系統(tǒng)會提醒用戶確定這些信息項，用戶一旦確定后，就不能夠再次修改這些信息。

頁面主人還能設(shè)置頁面的訪問權(quán)限，通過該模塊，除了能夠設(shè)置像QQ空間一樣的某些人可看或者不能看的權(quán)限外，還可以設(shè)置哪些大學(xué)的同學(xué)可看或者不能看，體現(xiàn)出校園社交網(wǎng)絡(luò)的特色。

其中添加某些特定的用戶可以觀看，是使用一個彈出框的形式實現(xiàn)的。用戶在框中輸入賬號，則會動態(tài)查詢此人，如果沒有查到此人，則提示用戶輸入錯誤。頁面會顯示好友信息，可以直接點擊好友后面的按鈕，將其加入，如果想去除，亦可點擊已經(jīng)加入人后面的刪除按鈕。

1.1.4 在線聊天模塊

頁面主人可以通過在線聊天模塊與好友進(jìn)行實時交流。在網(wǎng)頁的右側(cè)有個好友列表，按好友分組進(jìn)行展示。當(dāng)有有好友的消息來時，好友頭像后面會顯示到達(dá)的信息條數(shù)。點擊一下，好友頭像會變大。雙擊則會打開聊天窗口。

系統(tǒng)每隔相同的時間會檢測發(fā)來的消息，如果有未讀消息，則會在好友頭像后面用紅色字體顯示未讀的消息數(shù)。

1.2 好友管理模塊

通過該模塊，頁面主人可以查看、管理自己的好友信息。頁面主人可以創(chuàng)建分組，分類管理好友信息，進(jìn)入每個分組可以查看該組的好友信息。頁面主人也可以移動好友分組，或者刪除好友。

好友管理模塊能夠顯示好友所在的學(xué)校、家鄉(xiāng)、現(xiàn)居地等信息，供頁面主人在添加好友時進(jìn)行篩選。

1.3 好友搜索模塊

好友搜索模塊具有在線尋找好友的功能?？梢园葱詣e、年齡、學(xué)校等方式尋找好友。每次添加一個條件后，都會在顯示搜索結(jié)果里面添加一小塊條件顯示，讓頁面主人知道自己尋找好友的條件，并且每個條件都是可刪除的，刪除某個條件后，將會自動再次搜尋所匹配的好友?？梢赃x擇將此人加入自己的哪個分組。

在顯示的人中，可以點擊其所在大學(xué)、家鄉(xiāng)、現(xiàn)居地、現(xiàn)在正從事的工作等項目，可以自動添加相應(yīng)的條件。

2 本系統(tǒng)的關(guān)鍵技術(shù)

2.1 AJAX 與 JSON數(shù)據(jù)格式

在本系統(tǒng)的設(shè)計中，主要運用了AJAX開發(fā)技術(shù)，這是開發(fā)本系統(tǒng)的關(guān)鍵技術(shù)。

①采用JAVA平臺提供的jquery框架技術(shù)設(shè)計AJAX程序。

在開發(fā)本系統(tǒng)時，如果按照傳統(tǒng)的程序設(shè)計方法，需要編寫具體的AJAX程序，但是這就要考慮瀏覽器的不同，還要考慮其他各種因素，比如HTTP返回碼，并且返回來的數(shù)據(jù)格式一般都是字符串，還需要解析成json數(shù)據(jù)，所以，開發(fā)工作十分復(fù)雜。jquery框架提供了完美的封裝技術(shù)，代碼簡潔高效，簡化了編程過程。因此，在開發(fā)本系統(tǒng)過程中，采用jquery框架技術(shù)設(shè)計AJAX程序，大大降低了系統(tǒng)開發(fā)的復(fù)雜度，較好地解決了開發(fā)AJAX程序較為復(fù)雜的難題。

③采用AJAX技術(shù)編程實現(xiàn)實時在線聊天的功能。

這一技術(shù)主要用在前端的開發(fā)。當(dāng)一個聊天窗口打開后，前端馬上發(fā)一個AJAX請求，后端則進(jìn)行相應(yīng)的查看。如果有數(shù)據(jù)就返回，否則就一直處于等待狀態(tài)。endprint

前端如果收到后臺的返回數(shù)據(jù)后就動態(tài)往聊天信息顯示欄里面添加該數(shù)據(jù)，否則就一直處于等待狀態(tài)。系統(tǒng)設(shè)置了一個超時時間，如果在設(shè)定的時間范圍內(nèi)沒有返回數(shù)據(jù)，就進(jìn)行下一步操作，一般為中斷連接，再次請求。

④利用該技術(shù)實現(xiàn)在聊天記錄中插入圖片。

這個過程是：將需插入的圖片保存在一個文件夾下，為每個圖片編號（從1開始），形成圖片庫，用戶選中相應(yīng)的圖片后，在輸入框中加入一個圖片的編號，就能實現(xiàn)插入圖片的功能。

如：選中第一張圖片，則在信息框中 添加 [＼1].

在顯示消息時，對字符串進(jìn)行檢測，檢測到 [＼**] 這樣的字符串后，就將其替換為標(biāo)簽。

2.2 自動補全技術(shù)

如何保證用戶注冊時輸入的關(guān)鍵信息標(biāo)準(zhǔn)、可用，是本系統(tǒng)設(shè)計中的一個技術(shù)難點。

從系統(tǒng)的的功能中可以看出，本系統(tǒng)有很多頁面涉及到學(xué)校，如注冊時需要填寫學(xué)校，按學(xué)校查看好友等，學(xué)校名稱是本系統(tǒng)的關(guān)鍵信息。因此，不能讓用戶隨意輸入學(xué)校信息，因為用戶很可能會隨便輸入一串字符，或者只是輸入學(xué)校的簡稱，將導(dǎo)致學(xué)校信息不完整、不標(biāo)準(zhǔn)，在檢索學(xué)校信息時，就會導(dǎo)致檢索結(jié)果不可信。

在本系統(tǒng)的設(shè)計中，采用自動補全技術(shù)解決這個難題。

用戶在選擇了自己學(xué)校的省份后，在后面的文本框中只用輸入自己學(xué)校名稱中的少量文字，或者拼音的首字母，系統(tǒng)就能自動檢索出符合條件的學(xué)校名稱，供用戶進(jìn)一步選擇。

如用戶選擇湖北省后，輸入wh，那么頁面就會自動出現(xiàn)一串列表，顯示名字前兩個字拼音的首字母為wh的學(xué)校，用戶只需點擊選中相應(yīng)的學(xué)校名稱即可，既方便了用戶操作，又保證了學(xué)校名稱的標(biāo)準(zhǔn)性。

自動補全技術(shù)的實現(xiàn)過程是：

①在關(guān)鍵信息輸入文本框中注冊一個keyup事件，該事件將在鍵盤上按鍵被釋放時被觸發(fā)。

②當(dāng)用戶在該文本框中通過鍵盤輸入信息時，由于按鍵的釋放將觸發(fā)keyup事件，將用戶輸入的內(nèi)容通過AJAX方式發(fā)送給后臺服務(wù)器，后臺從數(shù)據(jù)庫中查詢數(shù)據(jù)，返回給前端。

③前端收到數(shù)據(jù)后，在文本框下面構(gòu)造一個選擇列表，顯示出查詢的結(jié)果。

CSS hack的書寫順序沒有特別要求，本系統(tǒng)是將使用范圍廣的瀏覽器的CSS寫在前面，這樣可更加容易被識別。

2.4 加快瀏覽器的加載速度

提高瀏覽器的加載速度非常重要。瀏覽器能夠早一秒顯示給用戶，那么就可以帶來更多的用戶量，如果頁面加載時間過長，那么用戶很可能因用戶體驗較差而把網(wǎng)頁關(guān)閉。本系統(tǒng)加快瀏覽器加載速度的主要技術(shù)如下。

3 結(jié)束語

本系統(tǒng)雖然加入了很多校園元素，但依然是每個人都可以注冊的，不能夠保證每個用戶都是大學(xué)生。在系統(tǒng)開發(fā)完成后，下一步準(zhǔn)備與各個大學(xué)合作，加入學(xué)號認(rèn)證功能，保證每個在本網(wǎng)站注冊上網(wǎng)的人都是大學(xué)生。另外，還可以加入貼吧及群聊功能，進(jìn)一步擴大大學(xué)生的交流圈，活躍大學(xué)生社交網(wǎng)絡(luò)平臺的氣氛。

參考文獻(xiàn)：

[1] 曹劉陽.編寫高質(zhì)量代碼：Web前端開發(fā)修煉之道[M].北京：機械工業(yè)出版社，2010.

[2] Alex MacCaw.基于MVC的Javascript Web富應(yīng)用開發(fā)（中文版）[M].北京：電子工業(yè)出版社，2012.

[3] David Flanagan.JavaScript權(quán)威指南（中文版）[M].北京：機械工業(yè)出版社，2012.endprint

前端如果收到后臺的返回數(shù)據(jù)后就動態(tài)往聊天信息顯示欄里面添加該數(shù)據(jù)，否則就一直處于等待狀態(tài)。系統(tǒng)設(shè)置了一個超時時間，如果在設(shè)定的時間范圍內(nèi)沒有返回數(shù)據(jù)，就進(jìn)行下一步操作，一般為中斷連接，再次請求。

④利用該技術(shù)實現(xiàn)在聊天記錄中插入圖片。

這個過程是：將需插入的圖片保存在一個文件夾下，為每個圖片編號（從1開始），形成圖片庫，用戶選中相應(yīng)的圖片后，在輸入框中加入一個圖片的編號，就能實現(xiàn)插入圖片的功能。

如：選中第一張圖片，則在信息框中 添加 [＼1].

在顯示消息時，對字符串進(jìn)行檢測，檢測到 [＼**] 這樣的字符串后，就將其替換為標(biāo)簽。

2.2 自動補全技術(shù)

如何保證用戶注冊時輸入的關(guān)鍵信息標(biāo)準(zhǔn)、可用，是本系統(tǒng)設(shè)計中的一個技術(shù)難點。

從系統(tǒng)的的功能中可以看出，本系統(tǒng)有很多頁面涉及到學(xué)校，如注冊時需要填寫學(xué)校，按學(xué)校查看好友等，學(xué)校名稱是本系統(tǒng)的關(guān)鍵信息。因此，不能讓用戶隨意輸入學(xué)校信息，因為用戶很可能會隨便輸入一串字符，或者只是輸入學(xué)校的簡稱，將導(dǎo)致學(xué)校信息不完整、不標(biāo)準(zhǔn)，在檢索學(xué)校信息時，就會導(dǎo)致檢索結(jié)果不可信。

在本系統(tǒng)的設(shè)計中，采用自動補全技術(shù)解決這個難題。

用戶在選擇了自己學(xué)校的省份后，在后面的文本框中只用輸入自己學(xué)校名稱中的少量文字，或者拼音的首字母，系統(tǒng)就能自動檢索出符合條件的學(xué)校名稱，供用戶進(jìn)一步選擇。

如用戶選擇湖北省后，輸入wh，那么頁面就會自動出現(xiàn)一串列表，顯示名字前兩個字拼音的首字母為wh的學(xué)校，用戶只需點擊選中相應(yīng)的學(xué)校名稱即可，既方便了用戶操作，又保證了學(xué)校名稱的標(biāo)準(zhǔn)性。

自動補全技術(shù)的實現(xiàn)過程是：

①在關(guān)鍵信息輸入文本框中注冊一個keyup事件，該事件將在鍵盤上按鍵被釋放時被觸發(fā)。

②當(dāng)用戶在該文本框中通過鍵盤輸入信息時，由于按鍵的釋放將觸發(fā)keyup事件，將用戶輸入的內(nèi)容通過AJAX方式發(fā)送給后臺服務(wù)器，后臺從數(shù)據(jù)庫中查詢數(shù)據(jù)，返回給前端。

③前端收到數(shù)據(jù)后，在文本框下面構(gòu)造一個選擇列表，顯示出查詢的結(jié)果。

CSS hack的書寫順序沒有特別要求，本系統(tǒng)是將使用范圍廣的瀏覽器的CSS寫在前面，這樣可更加容易被識別。

2.4 加快瀏覽器的加載速度

提高瀏覽器的加載速度非常重要。瀏覽器能夠早一秒顯示給用戶，那么就可以帶來更多的用戶量，如果頁面加載時間過長，那么用戶很可能因用戶體驗較差而把網(wǎng)頁關(guān)閉。本系統(tǒng)加快瀏覽器加載速度的主要技術(shù)如下。

3 結(jié)束語

本系統(tǒng)雖然加入了很多校園元素，但依然是每個人都可以注冊的，不能夠保證每個用戶都是大學(xué)生。在系統(tǒng)開發(fā)完成后，下一步準(zhǔn)備與各個大學(xué)合作，加入學(xué)號認(rèn)證功能，保證每個在本網(wǎng)站注冊上網(wǎng)的人都是大學(xué)生。另外，還可以加入貼吧及群聊功能，進(jìn)一步擴大大學(xué)生的交流圈，活躍大學(xué)生社交網(wǎng)絡(luò)平臺的氣氛。

參考文獻(xiàn)：

[1] 曹劉陽.編寫高質(zhì)量代碼：Web前端開發(fā)修煉之道[M].北京：機械工業(yè)出版社，2010.

[2] Alex MacCaw.基于MVC的Javascript Web富應(yīng)用開發(fā)（中文版）[M].北京：電子工業(yè)出版社，2012.

[3] David Flanagan.JavaScript權(quán)威指南（中文版）[M].北京：機械工業(yè)出版社，2012.endprint

前端如果收到后臺的返回數(shù)據(jù)后就動態(tài)往聊天信息顯示欄里面添加該數(shù)據(jù)，否則就一直處于等待狀態(tài)。系統(tǒng)設(shè)置了一個超時時間，如果在設(shè)定的時間范圍內(nèi)沒有返回數(shù)據(jù)，就進(jìn)行下一步操作，一般為中斷連接，再次請求。

④利用該技術(shù)實現(xiàn)在聊天記錄中插入圖片。

這個過程是：將需插入的圖片保存在一個文件夾下，為每個圖片編號（從1開始），形成圖片庫，用戶選中相應(yīng)的圖片后，在輸入框中加入一個圖片的編號，就能實現(xiàn)插入圖片的功能。

如：選中第一張圖片，則在信息框中 添加 [＼1].

在顯示消息時，對字符串進(jìn)行檢測，檢測到 [＼**] 這樣的字符串后，就將其替換為標(biāo)簽。

2.2 自動補全技術(shù)

如何保證用戶注冊時輸入的關(guān)鍵信息標(biāo)準(zhǔn)、可用，是本系統(tǒng)設(shè)計中的一個技術(shù)難點。

從系統(tǒng)的的功能中可以看出，本系統(tǒng)有很多頁面涉及到學(xué)校，如注冊時需要填寫學(xué)校，按學(xué)校查看好友等，學(xué)校名稱是本系統(tǒng)的關(guān)鍵信息。因此，不能讓用戶隨意輸入學(xué)校信息，因為用戶很可能會隨便輸入一串字符，或者只是輸入學(xué)校的簡稱，將導(dǎo)致學(xué)校信息不完整、不標(biāo)準(zhǔn)，在檢索學(xué)校信息時，就會導(dǎo)致檢索結(jié)果不可信。

在本系統(tǒng)的設(shè)計中，采用自動補全技術(shù)解決這個難題。

用戶在選擇了自己學(xué)校的省份后，在后面的文本框中只用輸入自己學(xué)校名稱中的少量文字，或者拼音的首字母，系統(tǒng)就能自動檢索出符合條件的學(xué)校名稱，供用戶進(jìn)一步選擇。

如用戶選擇湖北省后，輸入wh，那么頁面就會自動出現(xiàn)一串列表，顯示名字前兩個字拼音的首字母為wh的學(xué)校，用戶只需點擊選中相應(yīng)的學(xué)校名稱即可，既方便了用戶操作，又保證了學(xué)校名稱的標(biāo)準(zhǔn)性。

自動補全技術(shù)的實現(xiàn)過程是：

①在關(guān)鍵信息輸入文本框中注冊一個keyup事件，該事件將在鍵盤上按鍵被釋放時被觸發(fā)。

②當(dāng)用戶在該文本框中通過鍵盤輸入信息時，由于按鍵的釋放將觸發(fā)keyup事件，將用戶輸入的內(nèi)容通過AJAX方式發(fā)送給后臺服務(wù)器，后臺從數(shù)據(jù)庫中查詢數(shù)據(jù)，返回給前端。

③前端收到數(shù)據(jù)后，在文本框下面構(gòu)造一個選擇列表，顯示出查詢的結(jié)果。

CSS hack的書寫順序沒有特別要求，本系統(tǒng)是將使用范圍廣的瀏覽器的CSS寫在前面，這樣可更加容易被識別。

2.4 加快瀏覽器的加載速度

提高瀏覽器的加載速度非常重要。瀏覽器能夠早一秒顯示給用戶，那么就可以帶來更多的用戶量，如果頁面加載時間過長，那么用戶很可能因用戶體驗較差而把網(wǎng)頁關(guān)閉。本系統(tǒng)加快瀏覽器加載速度的主要技術(shù)如下。

3 結(jié)束語

本系統(tǒng)雖然加入了很多校園元素，但依然是每個人都可以注冊的，不能夠保證每個用戶都是大學(xué)生。在系統(tǒng)開發(fā)完成后，下一步準(zhǔn)備與各個大學(xué)合作，加入學(xué)號認(rèn)證功能，保證每個在本網(wǎng)站注冊上網(wǎng)的人都是大學(xué)生。另外，還可以加入貼吧及群聊功能，進(jìn)一步擴大大學(xué)生的交流圈，活躍大學(xué)生社交網(wǎng)絡(luò)平臺的氣氛。

參考文獻(xiàn)：

[1] 曹劉陽.編寫高質(zhì)量代碼：Web前端開發(fā)修煉之道[M].北京：機械工業(yè)出版社，2010.

[2] Alex MacCaw.基于MVC的Javascript Web富應(yīng)用開發(fā)（中文版）[M].北京：電子工業(yè)出版社，2012.

[3] David Flanagan.JavaScript權(quán)威指南（中文版）[M].北京：機械工業(yè)出版社，2012.endprint