脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → Ajax对xml信息的接收和处理

Ajax对xml信息的接收和处理操作实例分析

 更新时间：2019年07月03日 11:13:30   作者：Yeoman92  
这篇文章主要介绍了Ajax对xml信息的接收和处理操作,结合实例形式分析了ajax针对xml结构信息的相关处理操作技巧,需要的朋友可以参考下

本文实例讲述了Ajax对xml信息的接收和处理操作。分享给大家供大家参考，具体如下：

Ajax负责请求和接收xml信息，DOM负责处理xml信息。

DOM：

php中，DOM是php 与 xml（html）之间沟通的桥梁
JavaScript中，DOM是JavaScript 与 html（xml）之间沟通的桥梁

这里写图片描述

xml需要从服务器端返回到客户端被JavaScript处理
Ajax负责请求xml，DOM（JavaScript）负责处理xml信息
Ajax+JavaScript实现对xml的接收处理，可以方便我们后期实现一个静态网站（html+css+JavaScript）实现对各个接口数据的处理。

自定义的xml文件

09.xml

<?xml version="1.0" encoding="UTF-8"?>
<weather>
  <city>
    <name>北京</name>
    <temp>23-31度</temp>
    <wind>东风</wind>
  </city>
  <city>
    <name>上海</name>
    <temp>25-32度</temp>
    <wind>东南风</wind>
  </city>
  <city>
    <name>深圳</name>
    <temp>29-35度</temp>
    <wind>西南风</wind>
  </city>
</weather>

Ajax对xml信息的接收和处理处理代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
<script type="text/javascript">
  function f1(){
    //ajax请求xml信息
    //JavaScript的dom技术处理xml
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
        //alert(xhr.responseXML);//object Document 其是xml根节点的父节点对象
        var xmldom = xhr.responseXML;
        //console.log(xmldom.firstChild);//<weather>
        var citys = xmldom.getElementsByTagName('city');
        //console.log(citys);// HTMLCollection[city, city, city]
        /*
        citys[1];//第二个city的元素节点对象
        for(var k in citys[1]){//k代表元素节点对象的成员名称
          console.log(k);
          //有输出这样一个成员方法：getElementsByTagName
          //结论：document对象和普通元素对象都有getElementsByTagName()方法
        }
        */
        var s = "";
        for(var i=0; i<citys.length; i++){
          var name = citys[i].getElementsByTagName('name')[0].firstChild.nodeValue;
          var temp = citys[i].getElementsByTagName('temp')[0].firstChild.nodeValue;
          var wind = citys[i].getElementsByTagName('wind')[0].firstChild.nodeValue;
          s += "城市：" + name + "－－温度：" + temp + "－－风向：" + wind + "<br />";
        }
        document.getElementById('result').innerHTML = s;
      }
    }
    xhr.open('get','./09.xml');
    xhr.send(null);
  }
</script>
</head>
<body>
  <h2>利用Ajax+JavaScript实现对xml的接收和处理</h2>
  <input type="button" value="触发" onclick="f1()" />
  <div id="result"></div>
</body>
</html>

运行结果

这里写图片描述

更多关于ajax相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题》

希望本文所述对大家ajax程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 使用Ajax实时检测

    使用Ajax实时检测"用户名、邮箱等"是否已经存在

    这篇文章主要介绍了使用Ajax实时检测"用户名、邮箱等"是否已经存在,需要的朋友可以参考下
    2015-01-01
  • ajax动态加载json数据并详细解析

    ajax动态加载json数据并详细解析

    今天小编就为大家分享一篇ajax动态加载json数据并详细解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 浅谈Ajax请求与浏览器缓存

    浅谈Ajax请求与浏览器缓存

    下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 好用的AJAX类代码分享

    好用的AJAX类代码分享

    好用的AJAX类代码分享，需要的朋友可以参考下。
    2011-11-11
  • ASP AJAX 静态分页

    ASP AJAX 静态分页

    这个页面注意是调用来自数据库中的数据。
    2009-01-01
  • AJAX中文乱码问题探讨及解决

    AJAX中文乱码问题探讨及解决

    AJAX中文问题分为两大类：一是发送路径中的参数有中文，在服务器段接收参数值是乱码二是返回来的responseText或responseXML的值中含有中文是乱码，下面为大家介绍下解决方法
    2013-10-10
  • 基于HTML5的可预览多图片Ajax上传

    基于HTML5的可预览多图片Ajax上传

    这篇文章主要为大家详细介绍了基于HTML5的可预览多图片Ajax上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • MUi框架ajax请求WebService接口实例

    MUi框架ajax请求WebService接口实例

    下面小编就为大家分享一篇MUi框架ajax请求WebService接口实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • ajax实现提交时校验表单方法

    ajax实现提交时校验表单方法

    这篇文章主要为大家详细介绍了ajax实现提交时校验表单方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • AJAX如何接收JSON数据示例介绍

    AJAX如何接收JSON数据示例介绍

    如何使用AJAX返回JSON数据，就是dataType，当你设置json后返回的json字符串传递到客户端就是JSON对象了，示例如下，感兴趣的朋友可以参考下
    2013-08-08

最新评论