ajax初级教程之获取博文列表

前端技术 2023/09/06 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):

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
 <html xmlns=\"http://www.w3.org/1999/xhtml\">
     <head>
         <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
         <title>获取博客园博客rss列表</title>
         <script type=\"text/javascript\" language=\"javascript\" src=\"ajax.js\"></script>
     </head>
     <body>
         <div id=\"frmMain\">
             <ul id=\"blogTitleList\"></ul>
             <input name=\"btnGet\" value=\"获取博客标题列表\" onclick=\"javascript:getBlogTitle();\" type=\"button\" />
         </div>
     </body>
 </html>

         AJAX脚本(ajax.js):

http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html\">
         Socket传输文件时进行校验(简单解决TCP粘包问题)
       </a>
       <div class=\"lastUpdated\">
         2012年12月27日 12:57
       </div>
     </h3>
     <div xml:base=\"http://feed.cnblogs.com/blog/u/135156/rss\" class=\"feedEntryContent\">
       Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE ...
     </div>
   </div>
   <div style=\"clear: both;\">
   </div>
   <div class=\"entry\">
     <h3>
       <a href=\"http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html\">
         C#(服务器)与Java(客户端)通过Socket传递对象
       </a>
       <div class=\"lastUpdated\">
         2012年12月23日 8:44
       </div>
     </h3>
     <div xml:base=\"http://feed.cnblogs.com/blog/u/135156/rss\" class=\"feedEntryContent\">
       最近做项目,需要C#与java间的交互技术: n S
     </div>
   </div>
   <div style=\"clear: both;\">
   </div>

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

         补充说明:

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

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

本文地址:https://www.stayed.cn/item/16693

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。