AJAX实用教程——获取博客园博文列表

在写这个Demo时，原本是想直接访问小菜博客的rss，但这是明显的跨域访问，是不允许的。

因此，小菜把博客rss保存到了本地，就是一个xml格式文件，直接用AJAX请求本地的xml文件。

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

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>获取博客园博客rss列表</title>
 6         <script type="text/javascript" language="javascript" src="ajax.js"></script>
 7     </head>
 8
 9     <body>
10         <div id="frmMain">
11             <ul id="blogTitleList"></ul>
12             <input name="btnGet" value="获取博客标题列表" onclick="javascript:getBlogTitle();" type="button" />
13         </div>
14     </body>
15 </html>

AJAX脚本(ajax.js)：

 1 function getBlogTitle(){
 2     //根据浏览器类型创建xmlHttpRequest对象
 3     var xmlHttp;
 4     if(window.XMLHttpRequest){
 5         //ie7、火狐、谷歌等浏览器
 6         xmlHttp = new XMLHttpRequest();
 7     }else{
 8         //ie5、ie6浏览器
 9         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
10     }
11
12     //设置异步交互完成后的回调函数
13     //function(){}为一个匿名函数，这个过程就是把函数的地址传给XMLHttpRequest对象的onreadystatechange属性
14     xmlHttp.onreadystatechange=function(){
15       //正常情况下status值应该是200，但本地测试无论成功失败返回的都是0
16     if(xmlHttp.readyState == 4 && xmlHttp.status == 0){
17       //接受xml格式的返回数据，接收文本格式的数据为：xmlHttp.responseText();
18       var requestXML = xmlHttp.responseXML;
19       //获取xml中的内容部分
20       var blogContent = requestXML.getElementById("feedContent");
21       //获取内容中的h3标题。注意blogTitles将是一个数组，由于javascript是弱类型语言，因此不必指明
22       var blogTitles = blogContent.getElementsByTagName("h3");
23       //获取html页面中的ul标签对象
24       var ulObj = document.getElementById("blogTitleList");
25       //用来临时存放博客标题
26       var tempTitle;
27       //遍历blogTitles数组，获取所有的博客标题
28       for(i=0;i<blogTitles.length;i++){
29         //获取title元素的值
30         tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;
31         //将title值插入到界面的ul标签中
32         ulObj.innerHTML += "<li>" + tempTitle + "</li>";
33       }
34         }
35     };
36     //构造交互参数
37     //第一个参数是指GET方式提交还是POST方式
38     //第二个参数是提交的URL，它可以是一个文本文件(*.xml)、脚本文件(*.aspx)等。
39     //第三个参数表示是否异步通信，ture表示异步。
40     xmlHttp.open("GET","rss.xml",true);
41
42     //提交请求
43     xmlHttp.send();
44 }

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

 1 <div id="feedContent">
 2   <div class="entry">
 3     <h3>
 4       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html">
 5         Socket传输文件时进行校验(简单解决TCP粘包问题)
 6       </a>
 7       <div class="lastUpdated">
 8         2012年12月27日 12:57
 9       </div>
10     </h3>
11     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent">
12       Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE ...
13     </div>
14   </div>
15   <div style="clear: both;">
16   </div>
17   <div class="entry">
18     <h3>
19       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html">
20         C#(服务器)与Java(客户端)通过Socket传递对象
21       </a>
22       <div class="lastUpdated">
23         2012年12月23日 8:44
24       </div>
25     </h3>
26     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent">
27       最近做项目，需要C#与java间的交互技术： n S
28     </div>
29   </div>
30   <div style="clear: both;">
31   </div>

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

补充说明：

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

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

附：

点击下载Demo

AJAX实用教程——获取博客园博文列表相关推荐

逆向获取博客园APP代码
逆向获取博客园APP代码第一步:获取APK文件方法一:通过Android系统的手机下载博客园app的安装包apk文件,并将导入电脑方法二:在互联网上直接下载apk文件第二步:准备好dex2ja ...
python 获取pv_Python爬虫入门教程 40-100 博客园Python相关40W博客抓取 scrapy
爬前叨叨第40篇博客吹响号角,爬取博客园博客~本文最终抓取到了从2010年1月1日到2019年1月7日的37W+文章,后面可以分析好多东西了呢经常看博客的同志知道,博客园每个栏目下面有200页,多 ...
Python爬虫入门教程：博客园首页推荐博客排行的秘密
1. 前言虽然博客园注册已经有五年多了,但是最近才正式开始在这里写博客.(进了博客园才知道这里面个个都是人才,说话又好听,超喜欢这里...)但是由于写的内容都是软件测试相关,热度一直不是很高.看到首 ...
python教程是用什么博客写的-Python爬虫入门教程：博客园首页推荐博客排行的秘密...
1. 前言虽然博客园注册已经有五年多了,但是最近才正式开始在这里写博客.(进了博客园才知道这里面个个都是人才,说话又好听,超喜欢这里...)但是由于写的内容都是软件测试相关,热度一直不是很高.看到首 ...
推荐一部python教程_Python爬虫入门教程：博客园首页推荐博客排行的秘密
1. 前言虽然博客园注册已经有五年多了,但是最近才正式开始在这里写博客.(进了博客园才知道这里面个个都是人才,说话又好听,超喜欢这里...)但是由于写的内容都是软件测试相关,热度一直不是很高.看到首 ...
Python爬虫入门教程 54-100 博客园等博客网站自动评论器
爬虫背景爬虫最核心的问题就是解决重复操作,当一件事情可以重复的进行的时候,就可以用爬虫来解决这个问题,今天要实现的一个基本需求是完成"博客园" 博客的自动评论,其实原理是非常简单 ...
Python爬虫入门教程 40-100 博客园Python相关40W博客抓取 scrapy
爬前叨叨第40篇博客吹响号角,爬取博客园博客~本文最终抓取到了从2010年1月1日到2019年1月7日的37W+文章,后面可以分析好多东西了呢经常看博客的同志知道,博客园每个栏目下面有200页,多 ...
再次测试用OLW本地的桌面应用撰写博客园博文
为什么看不到我发布的博文? 我现在是用刚刚安装好的Open Live Writer, 为自己的博客园撰写博文. 刚才测试发布了一篇. 不知怎么搞得, 发布成了日记. 博客园里的日记, 文章和随笔是不 ...
Windows Live Writer离线博客工具使用教程(适用于博客园、CSDN、51CTO等等博客)
文章背景写博客不单是一种记录方式,更是一种工作习惯,与朋友一起分享是一件很快乐的事情,以前写博客,我们都会面临博客自带编辑器上各种头疼问题,比如排版.样式.功能局限性等等.但这些阻止不了我写下去的决 ...

AJAX实用教程——获取博客园博文列表

AJAX实用教程——获取博客园博文列表相关推荐

最新文章

热门文章