如何利用ajax獲取博文列表

時(shí)間：2024-08-03 03:50:56 AJAX

如何利用ajax獲取博文列表

　　如何利用ajax獲取博文列表，通過(guò)yjbys小編提供的下文，展示了如下技術(shù)后，相信你一定會(huì)理解的。想了解更多相關(guān)資訊請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生培訓(xùn)網(wǎng)。

　　l AJAX的核心類XMLHttpRequest的使用。

　　l AJAX通過(guò)GET方式獲取服務(wù)端xml文件。

　　l 利用Javascript操作xml文件。

　　l 利用Javascript更新html界面。

　　Demo概要說(shuō)明：

　　index.html作為主頁(yè)，引用ajax.js腳本，在ajax.js腳本中利用AJAX技術(shù)請(qǐng)求同目錄下的rss.xml，請(qǐng)求成功后在index.html中顯示xml中的信息。

　　整個(gè)過(guò)程模擬了AJAX的局部刷新效果。

　　具體代碼：

　　Html代碼(index.html)：

　　代碼如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>獲取博客園博客rss列表</title>

　　</head>

　　<body>

　　</p>

　　</body>

　　</html>

　　AJAX腳本(ajax.js)：

　　代碼如下：

　　function getBlogTitle(){

　　//根據(jù)瀏覽器類型創(chuàng)建xmlHttpRequest對(duì)象

　　var xmlHttp;

　　if(window.XMLHttpRequest){

　　//ie7、火狐、谷歌等瀏覽器

　　xmlHttp = new XMLHttpRequest();

　　}else{

　　//ie5、ie6瀏覽器

　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

　　}

　　//設(shè)置異步交互完成后的回調(diào)函數(shù)

　　//function(){}為一個(gè)匿名函數(shù)，這個(gè)過(guò)程就是把函數(shù)的地址傳給XMLHttpRequest對(duì)象的onreadystatechange屬性

　　xmlHttp.onreadystatechange=function(){

　　//正常情況下status值應(yīng)該是200，但本地測(cè)試無(wú)論成功失敗返回的都是0

　　if(xmlHttp.readyState == 4 && xmlHttp.status == 0){

　　//接受xml格式的返回?cái)?shù)據(jù)，接收文本格式的數(shù)據(jù)為：xmlHttp.responseText();

　　var requestXML = xmlHttp.responseXML;

　　//獲取xml中的內(nèi)容部分

　　var blogContent = requestXML.getElementById("feedContent");

　　//獲取內(nèi)容中的h3標(biāo)題。注意blogTitles將是一個(gè)數(shù)組，由于javascript是弱類型語(yǔ)言，因此不必指明

　　var blogTitles = blogContent.getElementsByTagName("h3");

　　//獲取html頁(yè)面中的ul標(biāo)簽對(duì)象

　　var ulObj = document.getElementById("blogTitleList");

　　//用來(lái)臨時(shí)存放博客標(biāo)題

　　var tempTitle;

　　//遍歷blogTitles數(shù)組，獲取所有的博客標(biāo)題

　　for(i=0;i<blogTitles.length;i++){

　　//獲取title元素的值

　　tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;

　　//將title值插入到界面的ul標(biāo)簽中

　　ulObj.innerHTML += "<li>" + tempTitle + "</li>";

　　}

　　};

　　//構(gòu)造交互參數(shù)

　　//第一個(gè)參數(shù)是指GET方式提交還是POST方式

　　//第二個(gè)參數(shù)是提交的URL，它可以是一個(gè)文本文件(*.xml)、腳本文件(*.aspx)等。

　　//第三個(gè)參數(shù)表示是否異步通信，ture表示異步。

　　xmlHttp.open("GET","rss.xml",true);

　　//提交請(qǐng)求

　　xmlHttp.send();

　　}

　　博文列表rss(片段)(rss.xml)：

　　代碼如下：

　　<h3>

　　Socket傳輸文件時(shí)進(jìn)行校驗(yàn)(簡(jiǎn)單解決TCP粘包問(wèn)題)

　　</a>

　　2012年12月27日 12:57

　　</p>

　　</h3>

　　Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE ...

　　</p>

　　</p>

　　<h3>

　　C#(服務(wù)器)與Java(客戶端)通過(guò)Socket傳遞對(duì)象

　　</a>

　　2012年12月23日 8:44

　　</p>

　　</h3>

　　最近做項(xiàng)目，需要C#與java間的交互技術(shù)： n S

　　</p>

　　</p>

　　上邊的代碼注釋非常詳細(xì)，相信讀者能夠領(lǐng)會(huì)這個(gè)過(guò)程。

　　補(bǔ)充說(shuō)明：

　　l 注意本例中，在設(shè)置XMLHttpRequest對(duì)象的onreadystatechange屬性時(shí)，在回調(diào)函數(shù)中應(yīng)該判斷服務(wù)器是否響應(yīng)完成，其中readyState值為4表示響應(yīng)完成，status值為200表示請(qǐng)求成功，但由于本例是在本地演示的，并沒(méi)有搭建服務(wù)器環(huán)境，因此status的值總是0。

　　l 所謂跨域訪問(wèn)，即在某個(gè)服務(wù)器中通過(guò)javascript腳本請(qǐng)求其他服務(wù)器，所有類似這樣的請(qǐng)求都叫跨域。跨域訪問(wèn)會(huì)直接被瀏覽器拒絕。跨域關(guān)鍵問(wèn)題在于是瀏覽器拒絕了請(qǐng)求，是javascript權(quán)限不足引起的，而不是說(shuō)XMLHttpRequest對(duì)象沒(méi)有跨域訪問(wèn)的功能，XMLHttpRequest對(duì)象無(wú)所謂域，假如把XMLHttpRequest對(duì)象寫(xiě)在程序中(包括C/S、B/S程序)而不是腳本中，可以隨意訪問(wèn)服務(wù)器，甚至可以模擬手工訪問(wèn)。關(guān)于如何解決跨域訪問(wèn)問(wèn)題，請(qǐng)讀者自行g(shù)oogle。

【如何利用ajax獲取博文列表】相關(guān)文章：

如何利用微博進(jìn)行網(wǎng)站營(yíng)銷?03-21

揭秘利用ajax實(shí)現(xiàn)預(yù)覽鏈接看鏈接的內(nèi)容03-18

如何獲取PHP數(shù)組的鍵與值呢03-31

JS AJAX前臺(tái)如何給后臺(tái)類的函數(shù)傳遞參數(shù)的方法03-18

jQuery(js)如何獲取文字寬度(顯示長(zhǎng)度)03-29

如何獲取一款真正的好游戲03-06

如何合理利用廚房空間03-20

拍攝如何利用現(xiàn)場(chǎng)光03-11

考研英語(yǔ)如何利用真題09-23