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)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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)：
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)：
<div id="feedContent">
<div class="entry">
<h3>
<a href="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。
相关推荐
-
ThinkPHP中ajax使用实例教程
本文实例讲述了ThinkPHP中使用ajax的方法,提交表单如下图所示: 点击提交,不需要刷新本页,将内容提交到数据库当中,并在本页显示提交的内容.如下图所示: 一.jquery实现方法: MessageAction.class.php页面代码如下: <?php class MessageAction extends Action{ function index(){ $this->display(); } function add(){ //ajaxReturn(数据,'提示信息',状态)
-
Ajax.基础教程 电子书版 提供下载
Ajax.基础教程提供下载时间为2个星期以内,需要的抓紧下 screen.width-461) window.open('/upload/200729131038873.jpg');" src="http://files.jb51.net/upload/200729131038873.jpg" border=0> http://www.javascript.com.cn/Ajax.pdf 最好用迅雷下 (此资源来源于网络,如果侵犯您的版权,我们会马上删掉)
-
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览详情 在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPa
-
ASP ajax分页教程一
为什么我写ASP分页教程要提到AJAX呢,因为我们要多练习一下编程过程中,结构化的重要性. 再加上很多朋友对分页感到很高深,所以一直都不敢去碰他,要么就用别人写好的组件,要么就是改改别人的东西.特别是.net,我深有感触,假如要快速开发一个项目,我想.net是一个非常优秀的平台.但是,因为他的严重控件化,反而是新手接触不到编程的思想,完全找不到编程的感觉,仿佛就象在搭积木.有时候还是要练习一下底层一点的东西,这样个人的技术能力才会得到提高.我可不想做只会用.NET的组装工人. 好了,下面给出AS
-
jquery1.4 教程二 ajax方法的改进
1 允许序列化嵌套的参数. 比如:{foo: ["bar", "baz"]} 将被序列化成foo[]=bar&foo[]=baz,而不是序列化成以前的foo=bar&foo=baz. 如果你想要使用旧的序列化方式,有三种设置方法: 复制代码 代码如下: jQuery.ajaxSettings.traditional = true; jQuery.param( stuff, true ); $.ajax({ data: stuff, tradition
-
Ajax+PHP简单基础入门实例教程
首先我们来了解怎么在javascript中创建这个对象: 程序代码 var xmlHttp = new XMLHttpRequest(); 这行简单的代码在 Mozilla.Firefox.Safari.Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象.但是对于市场占有率达到70%的IE来说,这种方法是不行的,而不同的IE版本还有不同的创建方法,所以我们需要在IE下面使用下面两种创建对象的办法: 程序代码 t
-
比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页
Ajax在改变着web应用,并且带来了一种前所未有的桌面应用程序之外的震撼.但是,在这些宣传的背后我们应该意识到,其实ajax不过是--(X)HTML,Javascript以及XML,没什么新鲜的.在这个教程中,我将给你展示如何让简单的添加ajax到你的应用中去,并且教你如何使用一个流行的javascript库Jquey进行ajax开发. 1. 什么是ajax 你以前可能听说过ajax,或者至少用过ajax的应用--比如Gmail.简单的说,ajax就是使用javascript来异步地处理数据,
-
十大最佳Ajax教程收集（图文）
由于它的灵活性.优美以及快速的响应时间可以提高开发体验等原因,Ajax在许多开发领域变得越来越流行.本文作者推荐了十大最佳Ajax教程,全文如下: 我承认Ajax有一个学习曲线,但一旦你把握要领认真学习并在项目中实施之,你就会享受到Ajax带来的开发乐趣.网上有成百上千的Ajax教程,你可以从头学习直至成长为高手. 我纵览网络收集了十大最佳Ajax教程,你可以从它们开始学习Ajax,也可以借助它们获得提高: 1.Easy Ajax with jQuery(http://articles.site
-
jquery 框架使用教程 AJAX篇
小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get(). XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action=&qu
-
AJAX初级教程之初识AJAX
从刚刚接触B/S开发,就耳闻AJAX技术,但一直处于模棱两可的状态,大道理明白,一到动手就傻眼了. AJAX仿佛就是深不可测的技术,成为B/S学习过程中的一个阴影. 直到前些日子,小菜才真正开始AJAX实践,真正动手了才发现,AJAX并没有那么困难,如果不考虑AJAX的变型应用,只考虑AJAX基本应用,它还是相当简单的,过于复杂的理论阻碍了我们动手的积极性. 因此,本系列教程将从实用的角度出发,以最快的速度让读者掌握基本的AJAX应用,以最直接的方式展示AJAX技术. 为了更好的阅读本系列教程,