客戶端代碼(html)

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



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

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

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

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

然后,我們?cè)趚ml對(duì)象中收到xml響應(yīng),把它傳遞給我們的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).不過,請(qǐng)看這里,我們加了一些html和css到我們的程序中:

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

最新評(píng)論