网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文

如何利用ajax获取博文列表

栏目: 网页设计 / 发布于: / 人气:2.52W

如何利用ajax获取博文列表,通过yjbys小编提供的下文,展示了如下技术后,相信你一定会理解的。想了解更多相关资讯请持续关注我们应届毕业生培训网。

如何利用ajax获取博文列表

l AJAX的核心类XMLHttpRequest的使用。

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

l 利用Javascript操作xml文件。

l 利用Javascript更新html界面。

Demo概要说明:

作为主页,引用脚本,在脚本中利用AJAX技术请求同目录下的,请求成功后在中显示xml中的信息。

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

具体代码:

Html代码():

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>获取博客园博客rss列表</title>

<script type="text/javascript" language="javascript" src=""></script>

</head>

<body>

<p id="frmMain">

<ul id="blogTitleList"></ul>

<input name="btnGet" value="获取博客标题列表" onclick="javascript:getBlogTitle();" type="button" />

</p>

</body>

</html>

AJAX脚本():

代码如下:

function getBlogTitle(){

//根据浏览器类型创建xmlHttpRequest对象

var xmlHttp;

if(ttpRequest){

//ie7、火狐、谷歌等浏览器

xmlHttp = new XMLHttpRequest();

}else{

//ie5、ie6浏览器

xmlHttp = new ActiveXObject("TTP");

}

//设置异步交互完成后的回调函数

//function(){}为一个匿名函数,这个过程就是把函数的地址传给XMLHttpRequest对象的onreadystatechange属性

adystatechange=function(){

//正常情况下status值应该是200,但本地测试无论成功失败返回的都是0

if(yState == 4 && us == 0){

//接受xml格式的返回数据,接收文本格式的数据为:onseText();

var requestXML = onseXML;

//获取xml中的内容部分

var blogContent = lementById("feedContent");

//获取内容中的h3标题。注意blogTitles将是一个数组,由于javascript是弱类型语言,因此不必指明

var blogTitles = lementsByTagName("h3");

//获取html页面中的ul标签对象

var ulObj = lementById("blogTitleList");

//用来临时存放博客标题

var tempTitle;

//遍历blogTitles数组,获取所有的博客标题

for(i=0;i<th;i++){

//获取title元素的值

tempTitle = blogTitles[i]dNodes[0]Value;

//将title值插入到界面的ul标签中

rHTML += "<li>" + tempTitle + "</li>";

}

}

};

//构造交互参数

//第一个参数是指GET方式提交还是POST方式

//第二个参数是提交的URL,它可以是一个文本文件(*)、脚本文件(*)等。

//第三个参数表示是否异步通信,ture表示异步。

("GET","",true);

//提交请求

();

}

博文列表rss(片段)():

代码如下:

<p id="feedContent">

<p class="entry">

<h3>

<a href="">

Socket传输文件时进行校验(简单解决TCP粘包问题)

</a>

<p class="lastUpdated">

2012年12月27日 12:57

</p>

</h3>

<p xml:base="" class="feedEntryContent">

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

</p>

</p>

<p style="clear: both;">

</p>

<p class="entry">

<h3>

<a href="">

C#(服务器)与Java(客户端)通过Socket传递对象

</a>

<p class="lastUpdated">

2012年12月23日 8:44

</p>

</h3>

<p xml:base="" class="feedEntryContent">

最近做项目,需要C#与java间的'交互技术: n S

</p>

</p>

<p style="clear: both;">

</p>

上边的代码注释非常详细,相信读者能够领会这个过程。

补充说明:

l 注意本例中,在设置XMLHttpRequest对象的onreadystatechange属性时,在回调函数中应该判断服务器是否响应完成,其中readyState值为4表示响应完成,status值为200表示请求成功,但由于本例是在本地演示的,并没有搭建服务器环境,因此status的值总是0。

l 所谓跨域访问,即在某个服务器中通过javascript脚本请求其他服务器,所有类似这样的请求都叫跨域。跨域访问会直接被浏览器拒绝。跨域关键问题在于是浏览器拒绝了请求,是javascript权限不足引起的,而不是说XMLHttpRequest对象没有跨域访问的功能,XMLHttpRequest对象无所谓域,假如把XMLHttpRequest对象写在程序中(包括C/S、B/S程序)而不是脚本中,可以随意访问服务器,甚至可以模拟手工访问。关于如何解决跨域访问问题,请读者自行google。