zoukankan      html  css  js  c++  java
  • 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的时候进行的处理。

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


           

  • 相关阅读:
    【题解】P3796【模板】AC自动机(加强版)
    【模板】P3806点分治1
    【题解】P2602[JZOI2010]数字计数
    【题解】P2444 病毒
    【题解】[P3557 POI2013]GRA-Tower Defense Game
    【题解】DZY Loves Chinese
    【题解】[Ghd]
    【题解】CF264B Good Sequences
    【题解】P3162CQOI2012组装
    【题解】P2279消防局的设立
  • 原文地址:https://www.cnblogs.com/guziming/p/4232704.html
Copyright © 2011-2022 走看看