日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

巧用Ajax和RSS做個(gè)人門戶網(wǎng)站_AJAX教程

編輯Tag賺U幣
教程Tag:暫無Tag,歡迎添加,賺取U幣!

推薦:怎樣使用AJAX進(jìn)行WEB應(yīng)用程序開發(fā)
  閱讀提要 AJAX,一個(gè)異步javascript和XML的縮略詞,是當(dāng)今快速發(fā)展的Web開發(fā)界十分熱門的技術(shù)。在這項(xiàng)新技術(shù)提供巨大能力的同時(shí),它也燃發(fā)了在Back按鈕問題上的不容置疑的爭(zhēng)論。本

  為了排遣這段時(shí)間的無聊也順便做個(gè) RSS 應(yīng)用的練習(xí),決定給自己維護(hù)的一個(gè)小網(wǎng)站加個(gè)首頁(yè)新聞,瀏覽器用 Ajax 或者 Ajah 從服務(wù)器取新聞異步的顯示出來,同時(shí)提供 RSS 源供聚合器訂閱。

  XMLHTTPRequest 從上次做過一個(gè)手機(jī)模擬器后就再?zèng)]碰過,這次在網(wǎng)上搜尋了一番居然發(fā)現(xiàn)了一個(gè)好東西:http://www.scss.com.au/family/andrew/webdesign/xmlhttprequest/,一個(gè) Cross-Browser 的 XMLHttpRequest 實(shí)現(xiàn),作者在創(chuàng)作共用條款(Creative Commons License)下發(fā)布這個(gè)庫(kù),只要你不移除腳本中作者的姓名和網(wǎng)址就可以自由使用,就用它了!下載 xmlhttprequest.js 以備后用。

  數(shù)據(jù)可以保存在數(shù)據(jù)庫(kù)中也可以簡(jiǎn)單的寫入到服務(wù)器的一個(gè)文件中,為了靈活起見我就在 MySQL 中新建一個(gè)表放站內(nèi)新聞了,就這么幾個(gè)字段:id、title、content、time。新聞錄入和從數(shù)據(jù)庫(kù)中取數(shù)據(jù)提供給 Ajax/Ajah 請(qǐng)求這種垃圾代碼我就不貼了:-)

  下面是客戶端 XMLHTTPRequest 的代碼:


  
    首頁(yè)新聞測(cè)試
    
    
  
  
    新聞讀取中……
    
  

  這里唯一值得說明的就是 XMLHTTPRequest 默認(rèn)是用 UTF-8 傳遞數(shù)據(jù)的,所以你的數(shù)據(jù)源最好也用 UTF-8 否則(因?yàn)槲覀冞@里客戶端已經(jīng)指定了要用 GB2312 了)得到的會(huì)是亂碼,這在 IE 下會(huì)引發(fā) javascript 錯(cuò)誤,在 FireFox 下卻沒問題,所以我用 try 和 catch 把上面的代碼包住了,免得測(cè)試的時(shí)候出現(xiàn)錯(cuò)誤。如果想試試的話可以用下面的代碼作為 news.php:

echo iconv( "GB2312", "UTF-8", "這就是新聞" );
//echo "這就是新聞";
?>

  如果注釋掉第一句而開放第二句的話不僅看到的是亂碼,在 IE 下還會(huì)出現(xiàn) -1072896748 錯(cuò)誤。有意思的是 IE 好像還會(huì)緩存由 XMLHTTPRequest 收到的內(nèi)容,而 FireFox 則不會(huì),所以在測(cè)試中會(huì)出現(xiàn)刷新 IE 很多次看到的還是舊數(shù)據(jù)的問題,可以在程序里加上下面 4 句話解決這個(gè)問題:

header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );

  要將首頁(yè)新聞提供給聚合器訂閱就要將后臺(tái)輸入的新聞生成 RSS feed,RSS 2.0 的規(guī)范可以參考 http://feedvalidator.org/docs/rss2.html,相應(yīng)的中文翻譯版本可以在 http://www.cpcwedu.com/Document/WEBOfficial/095447158.htm 找到。

  RSS 格式其實(shí)也是 XML 眾多方言中的一種,所以也要以 開頭,根節(jié)點(diǎn)的名稱必須是 rss,符合 RSS 2.0 規(guī)范的 RSS 中這個(gè) rss 節(jié)點(diǎn)要有一個(gè) version="2.0" 的屬性。rss 節(jié)點(diǎn)有一個(gè)名為 channel 的子節(jié)點(diǎn),channel 就是一個(gè)頻道。channel 有 3 個(gè)必要的子節(jié)點(diǎn),分別為 title、link 和 description。以 Blog 為例,title 就是 Blog 的名字,link 是 Blog 的 URL 地址,而 description 是 Blog 的描述。

  channel 可以包含若干個(gè) item 子節(jié)點(diǎn),在 Blog 中每一個(gè) item 就對(duì)應(yīng)一篇 post,我們這里每一個(gè) item 就是一篇新聞。item 的所有子節(jié)點(diǎn)均為可選,但至少要包含 title 和 description,由于新聞要有時(shí)間,所以我們?cè)俳o它加上一個(gè) pubDate 節(jié)點(diǎn),下面就是一個(gè)符合 RSS 2.0 規(guī)范的 RSS 文件內(nèi)容:



  
    The name of my site
    http://www.mysite.com
    Just for testing
    
      About
      Hi, I'm 2ndboy. Welcome to my site!
      

Sat, 07 Sep 2005 0:00:01 GMT
    
    
      New service is out!
      It's great for using.
      

Sat, 21 Sep 2005 1:23:45 GMT
    
  

  從數(shù)據(jù)庫(kù)中讀取最新的新聞內(nèi)容生成 RSS 的代碼這里就不貼了,無非是一些字符串的拼接,當(dāng)然了,你也可以用 PHP 的 XML DOM 接口來生成這個(gè) RSS 內(nèi)容。這樣一來在網(wǎng)站上提供 RSS 訂閱就搞定了。

  在做完 RSS 部分后我突然有了一個(gè)想法,為了給使用 Ajax 取數(shù)據(jù)的瀏覽器提供信息,服務(wù)器要針對(duì) Ajax 的請(qǐng)求單獨(dú)作些響應(yīng)處理,那何不就讓瀏覽器把我們前面已經(jīng)生成了的 RSS 當(dāng)作數(shù)據(jù)源來顯示首頁(yè)新聞呢?這似乎是個(gè)不錯(cuò)的想法,但 RSS 是個(gè) XML 格式的文件,很顯然,想達(dá)到這樣的目的就要讓客戶端用 javascript 來解析 XML 文件并加以顯示。

  為了用 javascript 來操控 XML,我決定使用 Google 的一個(gè)開源項(xiàng)目——AjaXSLT(http://goog-ajaxslt.sourceforge.net/),更多 Google 開源項(xiàng)目可以訪問 http://code.google.com/。Google 提供的這個(gè) AjaXSLT 項(xiàng)目用 JS 實(shí)現(xiàn)了一個(gè) XML 的 DOM 接口和一個(gè) XSLT 實(shí)現(xiàn),下面把里面的幾個(gè)主要文件做個(gè)簡(jiǎn)單介紹:

  misc.js:一些常量定義和 helper 函數(shù),還有 log 的實(shí)現(xiàn)。

  dom.js:XML DOM 接口的 JS 實(shí)現(xiàn),主要的函數(shù)是 xmlParse( XMLString ),調(diào)用成功后就可以用標(biāo)準(zhǔn) DOM 方式來操控返回的 XDocument 了。

  xpath.js:XPath 的 JS 實(shí)現(xiàn)。

  xslt.js:XSLT 的 JS 實(shí)現(xiàn),要用到里面的 xsltProcess( XML, XSLT ),給定 XML 和 XSLT 得到轉(zhuǎn)換的結(jié)果。

  你可以只使用其中的 DOM 實(shí)現(xiàn)部分,而 dom.js 又依賴于 misc.js,所以要先載入 misc.js 再載入 dom.js。為了在首頁(yè)上顯示好看的新聞,我們要用 CSS 來打扮一下新聞的外觀,所以要對(duì)新聞的數(shù)據(jù)組織方式有些要求,比如說要把得到的新聞最終組織成下面這個(gè)樣子:


  
    title
    time
    content
  

  這樣之后我們就可以事先寫一些針對(duì) #News 和 div.News 等等的規(guī)則來裝扮首頁(yè)新聞了。好了,下面看看用 JS 解析 RSS 的代碼怎么寫(當(dāng)然,之前我們先要用 Ajax 取到 RSS 數(shù)據(jù)):

var News = "";
var doc = xmlParse( rss );
items = doc.getElementsByTagName( "item" );
for( var i = 0; i < items.length; i )
{
  News = "";
  title = items[i].getElementsByTagName( "title" );
  News = ( "" title[0].firstChild.nodeValue "<\/span>" );
  time = items[i].getElementsByTagName( "pubDate" );
  News = ( "" time[0].firstChild.nodeValue "<\/span>" );
  description = items[i].getElementsByTagName( "description" );
  News = ( "" description[0].firstChild.nodeValue "<\/span>" );
  News = "<\/div>";
}
document.getElementById('News').innerHTML = News;

  好了,到現(xiàn)在為止我們的首頁(yè)新聞就算完工了,但是……,等等,既然 AjaXSLT 提供了 XSLT 的 JS 實(shí)現(xiàn),我們何不拿來試試呢?!好,先照著《XML 高級(jí)編程》寫個(gè) XSLT:



  
    
  

  
    
      
      
      
    
  

  
    
  

  
    
  

  
    
  

  我們上面的 javascript 代碼還要把這個(gè) XSLT 從服務(wù)器上取下來,之后一句話就可以搞定上面一堆 JS 代碼才能完成的工作:

document.getElementById('News').innerHTML = xsltProcess( xmlParse( rss ), xmlParse( xslt ) );

  怎么樣,用 XSLT 方便吧!好了,大功告成!對(duì)了,由于 XSLT 在轉(zhuǎn)換時(shí)使用了 XPath,所以要先包含 xpath.js 再引用 xslt.js。

  連續(xù)幾天,用三個(gè) post 的篇幅寫完了這個(gè)東西,其中省略了很多很簡(jiǎn)單的,用不著廢話去描述的細(xì)節(jié),各位感興趣的看客不知看明白了沒有。呵呵,不管怎么樣,發(fā)在這里記錄一下我這幾天的實(shí)踐過程吧。

分享:用AJAX編寫用戶注冊(cè)實(shí)例及技術(shù)小結(jié)
  我所舉的這個(gè)例子是一個(gè)企業(yè)用戶注冊(cè)時(shí)的一個(gè)應(yīng)用,當(dāng)用戶注冊(cè)時(shí)檢查用戶名和企業(yè)名是否可用,以前的做法是在旁邊加一個(gè)按鈕,點(diǎn)擊“檢查”,就向服務(wù)器發(fā)出請(qǐng)求,然后等待……服務(wù)器返

來源:模板無憂//所屬分類:AJAX教程/更新時(shí)間:2008-08-22
相關(guān)AJAX教程