比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集第2/3頁
更新時間:2007年11月30日 13:24:41 作者:
示例二: 使用jQuery建造聊天程序
為了展示jQuery的強大,我們將建立一個具有ajax功能的聊天程序.它允許用戶發(fā)布信息,并且可以實時的更新信息--但是沒有任何的頁面刷新.鑒于我們將要處理一個相對比較復(fù)雜的應(yīng)用,我將更加深入的講解jQuery的特性,向您展示她那些用起來很順手的函數(shù).
首先,我們來規(guī)劃一下這個應(yīng)用.我們不需要太多東西--一個前端,一個后端,一個jQuery的庫就夠了.但是,將會有一些代碼處理前端和后端的結(jié)合,所以我們首先應(yīng)該知道預(yù)期從系統(tǒng)里看到什么.
規(guī)劃服務(wù)器端
此應(yīng)用的后端需要處理信息的提交以及輸出.把這個銘記在心,這樣我們就可以為后端代碼構(gòu)建一個草圖:
鏈接數(shù)據(jù)庫
如果有信息提交
把信息插入到數(shù)據(jù)庫
刪除老的信息
從數(shù)據(jù)庫獲取信息并以XML顯示 正如你所看到的,它很簡單并且直白.如果你需要使用另外的語言來實現(xiàn)后端程序,你就可以使用這個規(guī)劃來指導(dǎo)你.
規(guī)劃客戶端
前端需要使用ajax處理反饋,就像我們在第一個例子中做的那樣.它需要處理信息的提交,并且用最新的消息不間斷的更新聊天窗體.然而,我們將要用到另一個特性--我們將使用the current UNIX timestamp來展示那個消息被加載了,并且只是抓取這個信息,由此減少貸款使用以及服務(wù)器負載.下面就是客戶端規(guī)劃的草圖:
頁面加載的時候
設(shè)置當前的timestamp為0 (所有的信息都在此之后提交, 比如,所有的信息都會被獲取)
調(diào)用函數(shù)獲取消息
function(函數(shù)): 獲取新消息
使用POST向服務(wù)其發(fā)送請求
調(diào)用函數(shù)處理XML響應(yīng)
增加一個定時器并且每秒鐘調(diào)用一次此函數(shù)(服務(wù)器的性能好的話可以提高此頻率)
function: 轉(zhuǎn)換新消息的XML
根據(jù)XML中的內(nèi)容設(shè)定當前的timestamp
如果狀態(tài)是 '2',則表示沒有新消息,終止函數(shù)調(diào)用
否則,對反饋回來的每個消息進行處理, 以下面的格式加到聊天窗口的最上端:
提交信息的時候:
使用 POST向服務(wù)器發(fā)送請求, 需要指定:
作者姓名(用戶指定)
消息體(用戶指定)
標識這是一個post請求
最后一次向服務(wù)器請求的timestamp
保持輸入文本框為空,便于用戶在此輸入信息
調(diào)用處理XML響應(yīng)的函數(shù) (以便讓信息實時呈現(xiàn)出來)
看上去比服務(wù)器端有點復(fù)雜了,但是慶幸有了jQuery,代碼不會很長.
規(guī)劃數(shù)據(jù)庫
我們將使用MySql數(shù)據(jù)庫來存儲信息(雖然任何sql數(shù)據(jù)庫都能勝任此工作,并且代碼相差也不是很大). 我們需要一個表,有四個列:消息id, 消息作者名,消息體,以及一個數(shù)字時間戳(timestamp). 下面使我們創(chuàng)建這個表的sql代碼:
CREATE TABLE `messages` (
`id` int(7) NOT NULL auto_increment,
`user` varchar(255) NOT NULL,
`msg` text NOT NULL,
`time` int(9) NOT NULL,
PRIMARY KEY (`id`)
);
由于我們不能判斷到底消息有多長,我們現(xiàn)在就只使用一個text字段.
服務(wù)器端代碼(XML)
要建立后端,我們首先應(yīng)該知道我們需要后端輸出什么(來決定前端和后端的接口),由此向后工作, 下面是一個簡單的XML結(jié)構(gòu):
<?xml version="1.0"?>
<response>
<status>1</status>
<time>1170323512</time>
<message>
<author>John Citizen</author>
<text>Hello world!</text>
</message>
<message>
<author>John Citizen</author>
<text>Hello world again!</text>
</message>
</response>
注意我們已經(jīng)增加一個標簽'status', 它的值為1. 就如我上面提到的,一個狀態(tài)值為1則標示新信息請求成功,2則表示請求成功但是沒有新信息. 每個消息的實例都包括作者以及其信息.
服務(wù)器端代碼(php)
現(xiàn)在,回到服務(wù)器端.我們將使用php來實現(xiàn),不過由于輸出的是xml,所以你可以使用你喜歡的任何語言來寫后段代碼,比如Perl或者asp.我們先定義一些配置信息這樣便于我們以后對其進行修改. 我們需要數(shù)據(jù)庫連接的具體信息,我們要存儲的消息的數(shù)目(數(shù)據(jù)庫可以處理成千上萬行數(shù)據(jù),所以這個可以適當?shù)脑O(shè)大點),以及用戶進到聊天室的時候消息顯示的數(shù)目. 代碼如下:
$dbhost = "localhot";
$dbuser = "root";
$dbpass = "";
$dbname = "chat";
$store_num = 10;
$display_num = 10;
現(xiàn)在言歸正傳,我們繼續(xù)看后端本身.數(shù)據(jù)庫連接自然是必須的, 但是我們同時需要確認不讓IE緩存請求數(shù)據(jù),并且需要確認輸出格式為XML.為了能夠監(jiān)視所有的錯誤,我們設(shè)置錯誤匯報為"所有錯誤"("all errors").為容易操作請求數(shù)據(jù),我們?yōu)檎埱笾械拿總€參數(shù)設(shè)置一個變量,每個變量將把請求中的參數(shù)值作為其自己的值. 代碼如下:
error_reporting(E_ALL);
header("Content-type: text/xml");
header("Cache-Control: no-cache");
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$dbconn);
foreach($_POST as $key => $value)
$$key = mysql_real_escape_string($value, $dbconn);
foreach語句遍歷所有的POST數(shù)據(jù),并且為每個參數(shù)創(chuàng)建一個變量,并且給它賦值(比如path/to/file.php?variable=value將給$variable 賦值為"value").這樣就簡化了處理請求數(shù)據(jù)的過程,無需我們手動設(shè)定.
下面,我們將進入主要函數(shù)部分.現(xiàn)在我們處理消息向數(shù)據(jù)庫的寫入,以及根據(jù)設(shè)定的顯示數(shù)目$display_num來從數(shù)據(jù)庫中獲取相應(yīng)數(shù)目的消息. 當我們規(guī)劃客戶端的時候我提到過當提交消息的時候我們需要設(shè)定一個響應(yīng)狀態(tài). 我們現(xiàn)在需要檢查這個響應(yīng)--我們給蠶食'action'賦值'postmsg',表示我們正在處理這個檢查并且插入新數(shù)據(jù)到數(shù)據(jù)庫.處理的時候我們需要插入新的unix時間戳( timestamp).
然而,我們?nèi)匀恍枰謇砦覀兊臄?shù)據(jù)庫.根據(jù)你的數(shù)據(jù)庫的限制,你可以設(shè)定存儲數(shù)據(jù)的數(shù)量.一般而言,不贊成使用消息日志,所以我這里設(shè)定默認存儲10條消息.我們將使用一個函數(shù)來獲取最新消息的id,并且決定是否刪除.舉例來說,如果我們增加第11個消息,我們使用11減去存儲量(10)就得到一個id閾值(現(xiàn)在是1),這樣的話我們就可以刪除小于等于這個閾值的所有消息,這個例子終究是刪除第一條消息.有了sql,我們可以只寫一條語句就處理這些.
下面的代碼片段檢查 'postmsg'響應(yīng),向數(shù)據(jù)庫添加數(shù)據(jù),以及清理數(shù)據(jù)庫.
if(@$action == "postmsg")
{
mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
VALUES ('$name','$message',".time().")");
mysql_query("DELETE FROM messages WHERE id <= ".
(mysql_insert_id($dbconn)-$store_num),$dbconn);
}
使用其他服務(wù)器端技術(shù)的開發(fā)者可以寫出等價的代碼.注意我們使用time函數(shù)來獲取unix時間戳.我們可以假設(shè)在sql執(zhí)行過程中這個時間不會改變(即便是很慢的服務(wù)器,這段代碼也可以每秒鐘執(zhí)行幾百次).所以當我們向客戶端返回一個時間戳的時候,我們可以簡單的再次調(diào)用time函數(shù),這個值也是可信的.
剩下的工作就是要處理從數(shù)據(jù)庫獲取最新的消息并且以XML的形式輸出.這里就要用到我上面寫的那段xml代碼了.然而,大部分代碼是sql,我們使用sql的強大來處理這個工作,代碼的執(zhí)行時間不受影響. 下面是sql查詢的要求:
它只是獲取作者以及信息
它只是獲取還沒有被下載的信息--客戶端有一個最后請求的時間戳,因此這個時間戳可以被插入到sql中
需要對消息進行排序一遍讓最新的消息排在最后,并且允許逆序顯示.
根據(jù)配置信息限制獲取的消息數(shù)量.
任何熟悉sql的人都不會反對這很簡單.剩下的就是這些代碼了.先看看查詢語句:
$messages = mysql_query("SELECT user,msg
FROM messages
WHERE time>$time
ORDER BY id ASC
LIMIT $display_num",$dbconn);
剩下的代碼就相當基礎(chǔ),如果沒有結(jié)果,就設(shè)置狀態(tài)代碼為0,否則,設(shè)置為1,輸出最初的xml,每個消息的xml以及最終的xml.就是這些了,代碼如下:
if(mysql_num_rows($messages) == 0) $status_code = 2;
else $status_code = 1;
echo "<?xml version="1.0"?>n";
echo "<response>n";
echo "t<status>$status_code</status>n";
echo "t<time>".time()."</time>n";
while($message = mysql_fetch_array($messages))
{
echo "t<message>n";
echo "tt<author>$message[user]</author>n";
echo "tt<text>$message[msg]</text>n";
echo "t</message>n";
}
echo "</response>";
最終的代碼在壓縮包里,所以不需要復(fù)制上面的代碼.現(xiàn)在后端程序完成了,下面我們就該更有趣的工作了--使用html和jQuery!
相關(guān)文章
jquery實現(xiàn)checkbox全選全不選的簡單實例
本篇文章主要是對jquery實現(xiàn)checkbox全選全不選的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12javascript(基于jQuery)實現(xiàn)鼠標獲取選中的文字示例【測試可用】
這篇文章主要介紹了javascript(基于jQuery)實現(xiàn)鼠標獲取選中的文字,涉及jQuery響應(yīng)鼠標事件及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-10-10jQuery擴展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的實例代碼
本文通過實例代碼給大家介紹了jQuery擴展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的相關(guān)知識,并給大家介紹了jquery兩種擴展方法,需要的朋友可以參考下2018-09-09jQuery contains過濾器實現(xiàn)精確匹配使用方法
contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本,或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用,來選擇指定的組中包含指定文本的元素2013-04-04jquery實現(xiàn)仿Flash的橫向滑動菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)仿Flash的橫向滑動菜單效果代碼,可實現(xiàn)滑塊跟隨鼠標滑動效果的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jquery中dom操作和事件的實例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
最近把jquery中的dom操作和jquery中的事件和動畫的方法都大體測了一下。本來想細細的把每個方法都寫出來介紹下2011-11-11