AJAX实例演示加载xml
前言
先前在入门AJAX这篇文章中，简单描述了AJAX一些基础。其实这里也是基础的使用，通过这个例子在结合之前学习的方法再好好理解运用一番。
实例
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A simple AJAX example</title> </head>
<body>
<h1>简单的ajax例子</h1>
<p id="obj">加载作者<a id='link' href="data.xml"
title="View the author."
onclick="Author('data.xml'); this.style.display='none'; return false">作者是谁！</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
</body>
</html>
js
<script type="text/javascript">
function Author(file){
//创建xmlHttpRequest对象
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
//当加载xml成功，则将指定的元素值赋值为xml的内容
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('author',xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data);
}
}
//加载xml文件
xmlObj.open ('GET',file,true);
//发送请求的数据
xmlObj.send ('');
}
//将xml的数据赋值到相应的子标签下
function updateObj(obj,data){
var textNode = document.createTextNode(data);
document.getElementById(obj).appendChild(textNode);
}
</script>
效果
方法
open()：建立到服务器的新请求。 在该实例中，就是open（"get",url,true）.就是使用get的方法来打开data.xml这个路径下的文件。我这里使用的就是根目录，所以直接就是文件名，true表示的就是表示这个链接是异步的；false表示就是同步的。也就是发出请求后需要等待服务器响应才能继续下面的工作，如果最后一个参数为true，那么用户可以在一边进行对服务器的请求，一边处理其他的工作。 send()：向服务器发送请求. 实例中，send并没有对参数进行设置，仅仅给出了空字符，当然这里还可以使用null值。 abort()：退出当前请求。 readyState：提供当前 HTML的就绪状态。
0：请求未初始化（还没有调用open()）。 1：请求已经建立，但是还没有发送（还没有调用send()）。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响应了。
在实例中，我们可以看到。有这样一个判断当readystate属性为4的时候，我们就执行下面的代码。这里4表示就是响应已经完成。这样一个readystate就是用来表示 responseText：服务器返回的请求响应文本。 总结虽然这是一个简单基础的例子，但是对于ajax的使用都比较全面。在ajax中，大致的使用就是： 1.获取需要的数据。 2.拿到连接到服务器的 URL。 3.打开url。 4.在服务器返回请求后的处理，这里就是在readystate的值等于4的时候进行的处理。 简单的小例子，还是好好学习一下。后面还是需要对这里的东西更加熟练的使用。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |