客戶端代碼(html)

在使用jQuery之前,我們先處理一下html的頁面.這樣的話,當我們必須確定使用那些元素來獲取或者更新使用jQuery返回的數(shù)據(jù)時,我們就知道怎么做了.我們不需要很多東西:一個外圍div,一個消息段落以及一個有用戶名和消息文本框的form,還有一個submit按鈕.最后還需要加一個加載信息時的提示--我們可以使用jQuery輕松的移除它.下面就是代碼:



客戶端代碼（jQuery）
現(xiàn)在，我們繼續(xù)看jQuery在客戶端的使用。首先，我們需要生命當前消息的時間戳為0，并且在服務器端調(diào)用函數(shù)來加載消息：
timestamp = 0; 
updateMsg();
然后，我們將完成表單提交的代碼。jQuery允許我們?yōu)楸韱蔚膕ubmit事件添加一個事件鉤子，就像在html代碼中直接寫onSubmit事件的效果一樣，但是不需要動任何html代碼。下面是submit事件：
$("form#chatform").submit(function(){ /* Code */ });
這里我們用CSS選擇符語法來引用到一個id為'chatform'的表單元素,一旦我們進入表單提交的代碼,我們可以使用jQuery的$.post來發(fā)送一個POST請求.在$.post的調(diào)用中,我們可以使用表單元素的id來選擇它的值,就像我們先前演示的那樣.知道了這些,讓我們看一下我們的ajax調(diào)用:
$.post("backend.php",{ message: $("#msg").val(), 
name: $("#author").val(), action: "postmsg", time: timestamp }, function(xml) {
注意這里傳過去的參數(shù)數(shù)組是以大括號括起來的.如果你有多個參數(shù)的話,可以簡單的以逗號分割,并且使用JSON格式,像上面演示的那樣.由還可以使用jquery的ajax函數(shù)發(fā)送一個get請求,會有一個json風格的響應,可以使用jQuery把反饋的文本轉(zhuǎn)換成更容易閱讀的形式.要記住,這種方式只有對get請求類型才起作用,對我們這里使用的post則無效.因此,我們這里將使用最簡單的XML.
現(xiàn)在,我們看一下XML響應.為代碼重用,我們在這里為處理xml創(chuàng)建一個函數(shù)并且調(diào)用它:
addMessages(xml);
我們將在后邊實現(xiàn)它,以便我們現(xiàn)在專注實現(xiàn)表單提交代碼.我們現(xiàn)在寫出來的代碼就是$.post需要的全部了,因此我們加個大括號以及一個返回false的提示(return false; ).這行將使標準瀏覽器提交表單錯誤代碼的時候失效.瀏覽器并不把請求發(fā)送到另一個頁面--因為我們已經(jīng)處理了事件提交,不需要由瀏覽器來處理了.這既是代碼的全部:

現(xiàn)在讓我們回頭看看addMessages()函數(shù),來處理xml響應信息.使用jQuery的DOM操作以及遍歷函數(shù)使它的實現(xiàn)變得很簡單. 記得我曾經(jīng)提到的狀態(tài)代碼么?現(xiàn)在我們該看看怎么處理它了:
if($("status",xml).text() == "2") return;
我還沒有提過jQuery的相關(guān)上下文.這里函數(shù)調(diào)用的xml告訴jQuery不要區(qū)在html文檔中找,而應在服務器端發(fā)送給我們的xml文件中.
這行代碼檢查狀態(tài)代碼為2,則表示完成了一次成功的請求但是沒有新信息添加到窗體中去.return關(guān)鍵字終止函數(shù)調(diào)用.然后我們設(shè)置為xml的時間戳設(shè)值.
timestamp = $("time",xml).text();
再次,我們從xml的time標簽獲得值.

現(xiàn)在,我們繼續(xù)看jQuery遍歷數(shù)組的函數(shù):each(); jQuery有一個遍歷數(shù)組的有趣方法.我們使用一個標準的選擇符聲明,并且each()函數(shù)傳遞一個參數(shù)--一個函數(shù)處理相匹配元素的每一個實例. 在我們的示例中,元素就是服務器端返回的每一個<message>標簽的實例.每個實例代表一條要顯示的消息.參數(shù)--實例的id被傳給函數(shù).我們可以使用jQuery的get()方法來獲取新內(nèi)容--其實就是<message>標簽的xml. 下面代碼展示我們?nèi)绾芜x擇它:
$("message",xml).each(function(id) { 
  message = $("message",xml).get(id);
我們?nèi)缓缶涂梢允褂胘Query的$函數(shù)來獲取message的值.既然我們得到了我們需要的所有數(shù)據(jù),我們就應該把它加到消息顯示區(qū)里面去.這個消息顯示窗體有一個叫做'messagewindow'的id,因此我們使用$("#messagewindow")來選擇到它并且使用prepend()來添加我們的數(shù)據(jù):
$("#messagewindow").prepend("<b>"+$("author",message).text()+ 
          "</b>: "+$("text",message).text()+ 
          "<br />");
就是這些了,把他們放在一起,現(xiàn)在我們的函數(shù)就是:
最后,我們需要來實現(xiàn)我們在代碼開始調(diào)用的函數(shù)updateMsg, 這個函數(shù)要到服務器查詢新信息,并且調(diào)用上面的addMessages來響應.同時需要設(shè)置一個超時時間,好讓聊天窗口自動更新. 要開始做這些,我們只需要向服務器提交一個時間戳,引起這個$.post調(diào)用如下:
$.post("backend.php",{ time: timestamp }, function(xml) { 
我上面提到,我們需要在這時移除我們的loading消息,因此,我們在這個span上調(diào)用remove函數(shù):

$("#loading").remove();

然后,我們在xml對象中收到xml響應,把它傳遞給我們的addMessages 函數(shù):

addMessages(xml);

最后我們調(diào)用javascript的setTimeOut()函數(shù),來間斷執(zhí)行代碼.這就是完整的代碼:

function updateMsg() { 
  $.post("backend.php",{ time: timestamp }, function(xml) { 
    $("#loading").remove(); 
    addMessages(xml); 
  }); 
  setTimeout('updateMsg()', 4000); 
}
整合代碼

現(xiàn)在我們把所有的代碼整合到一起.代碼可以在這里下載( this downloadable zip file).不過,請看這里,我們加了一些html和css到我們的程序中:

你看到了,僅僅使用22行javascript代碼,8行html以及大約50行php,我們就實現(xiàn)了一個完整的基于ajax的web聊天室應用程序.試一下吧,然后加入到你自己的網(wǎng)站上.創(chuàng)建你自己的ajax程序,使用這里的技術(shù),或者你有自己的好點子.用這里的代碼去做電信東西.如果你覺得使用xml很不爽,那你可以直接在你的應用程序中生成html,然后使用load來加載到客戶端.如果你想的話,可以試試用功能強大的xml標簽屬性以及jQuery的attr()函數(shù). 現(xiàn)在你應該已經(jīng)很驚訝于用jQuery實現(xiàn)ajax的簡單了吧!
[全文完]

最新評論