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)