如何利用ajax获取博文列表

2016-11-09 00:00:00临风网页程序设计

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

　　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)：

　　代码如下：

　　<!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(){

　　//根据浏览器类型创建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");

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

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

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

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

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

　　var tempTitle;

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

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

　　//获取title元素的值

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

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

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

　　}

　　};

　　//构造交互参数

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

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

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

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

　　//提交请求

　　xmlHttp.send();

　　}

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

　　代码如下：

　　<h3>

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

　　</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#(服务器)与Java(客户端)通过Socket传递对象

　　</a>

　　2012年12月23日 8:44

　　</p>

　　</h3>

　　最近做项目，需要C#与java间的交互技术： n S

　　</p>

　　</p>

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

　　补充说明：

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

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

[网页程序设计]相关推荐

`[网页程序设计]热门推荐`

[网页程序设计]最新文章

[网页程序设计]相关栏目推荐