ajax中如何获取博文列表

本篇内容介绍了"ajax中如何获取博文列表"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

通过本例，展示了如下技术：

l AJAX的核心类XMLHttpRequest的使用。

l AJAX通过GET方式获取服务端xml文件。

l 利用Javascript操作xml文件。

l 利用Javascript更新html界面。

Demo概要说明：

index.html作为主页，引用ajax.js脚本，在ajax.js脚本中利用AJAX技术请求同目录下的rss.xml，请求成功后在index.html中显示xml中的信息。

整个过程模拟了AJAX的局部刷新效果。

具体代码：

Html代码(index.html)：

复制代码 代码如下:

AJAX脚本(ajax.js)：

复制代码 代码如下:

function getBlogTitle(){
//根据浏览器类型创建xmlHttpRequest对象
var xmlHttp;
if(window.XMLHttpRequest){
//ie7、火狐、谷歌等浏览器
xmlHttp = new XMLHttpRequest();
}else{
//ie5、ie6浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置异步交互完成后的回调函数
//function(){}为一个匿名函数，这个过程就是把函数的地址传给XMLHttpRequest对象的onreadystatechange属性
xmlHttp.onreadystatechange=function(){
//正常情况下status值应该是200，但本地测试无论成功失败返回的都是0
if(xmlHttp.readyState == 4 && xmlHttp.status == 0){
//接受xml格式的返回数据，接收文本格式的数据为：xmlHttp.responseText();
var requestXML = xmlHttp.responseXML;
//获取xml中的内容部分
var blogContent = requestXML.getElementById("feedContent");
//获取内容中的h4标题。注意blogTitles将是一个数组，由于javascript是弱类型语言，因此不必指明
var blogTitles = blogContent.getElementsByTagName("h4");
//获取html页面中的ul标签对象
var ulObj = document.getElementById("blogTitleList");
//用来临时存放博客标题
var tempTitle;
//遍历blogTitles数组，获取所有的博客标题
for(i=0;i//获取title元素的值
tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;
//将title值插入到界面的ul标签中
ulObj[xss_clean] += "

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

复制代码 代码如下:

扫描关注千家信息网微信公众号，第一时间获取内容更新动态

转载请说明来源于"千家信息网"

本文地址：https://www.qianjiagd.com/a106118