现在的位置: 首页 > 综合 > 正文

AJAX实例演示加载xml

2013年07月20日 ⁄ 综合 ⁄ 共 1831字 ⁄ 字号 评论关闭

前言


先前在入门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的时候进行的处理。

简单的小例子,还是好好学习一下。后面还是需要对这里的东西更加熟练的使用。

       

抱歉!评论已关闭.