最近刚学了一些关于Ajax的知识来论坛上总结一下,欢迎大家批评指正!!
使用Ajax实现网站的异步刷新功能,貌似是使用javascript 通过XMLHTTP 对象实现数据访问后台数据,当其调用后台数据的时候,使用后台准备好的XML数据源,或者从数据库传来的数据拼成XML 文件形式,然后返回给前天的JS脚本,添加到客户端!(我个人是这么认为的,当然还可以使用其他形式)
下面举个简单例子,作为我学习的总结,也希望有能够给有希望的朋友一点帮助吧!
<script language="javascript" type="text/javascript">
var xmlHttp;
var requestInfo;
//创建XMLHTTP对象,判断浏览器是IE还是其他浏览器
function createXMLHttp()
{ //IE
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHttp");
}
//其他遵循W3C标注的浏览器
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}
//点击button按钮事件,出发getBook()事件
function getBook(obj)
{
requestInfo=obj;
//调用createXMLHttp创建xmlHttp对象
xmlHttp=createXMLHttp();
//默认使用异步回发状态是TRUE,此时与服务器通讯有5状态
xmlHttp.onreadystatechange=changeState;
//通过GET方法发送请求道服务器 读取Books.xml数据,这里采用的是相对路径
xmlHttp.open("GET","Books.xml",true)
//在使用GET方法的时候.send方法法的数据类型为NULL ,具体参见Http通讯协议
xmlHttp.send(null);
}
//在与服务器通讯过程中的5种状态
function changeState()
{
if(xmlHttp.readyState==4) //当xmlHttp.readyState=4的时候说明通信完毕,
{
if(xmlHttp.status==200)//虽然通讯完毕,但是还要考虑 请求的服务器页面是否存在,xmlHttp.status=200表示OK了 页面存在
{
//调用ReadXML方法 获取数据
ReadXML(requestInfo);
}
}
}
function ReadXML(requestInfo)
{
//获取文档对象实例,通过xmlHttp.responseXML方法;
var xmlDom= xmlHttp.responseXML;
//判断请求的条件
if(requestInfo=="book")
{
//获得xml文件第一本书
var xnode=xmlDom.documentElement.getElementsByTagName("book")[0];
//虽然可以使用很多方法的道数据的文本,但是xml类型是跨平台的,所以这里尽量获取每个节点的xml数据
var result=xnode.attributes[0].value+"\n作者:"+xnode.firstChild.childNodes[0].xml+"\n出版社:"+xnode.selectNodes("publisher")[0].firstChild.xml+"\n价格:"+xnode.selectNodes("price")[0].childNodes[0].xml;
alert(result);
//得到页面要插入的DIV的节点
var d=document.getElementById("Book");
//清空一下DIV 获取还有更好的方法
d.innerHTML="";
var txtNode=document.createTextNode(result);
//插入文本节点
d.appendChild(txtNode);
}
if(requestInfo=="Books")
{
var xnode=xmlDom.documentElement;
var d=document.getElementById("Book");
d.innerHTML="";
//将根节点下的所有节点直接赋值给DIV的 innerHTML
d.innerHTML=xnode.xml;
}
}
</script>
//HTML部分
<body style="left:300px; top:200px;">
<input id="Button1" type="button" value="firstBook" onclick="getBook('book');" />
<br />
<input id="Button2" type="button" value="allBooks" onclick="getBook('Books')" />
<div id="Book">
</div>
</body>