关闭

ajax对xml和json语言的解析

109人阅读 评论(0) 收藏 举报
分类:

xml数据格式解析(Demo=data.xml)

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
   <book>
      <name>三国演义</name>
      <category>文学</category>
      <desc>描述</desc>
   </book>    
   <book>
      <name>红楼梦</name>
      <category>文学</category>
      <desc>宝哥哥与林妹妹的爱情史</desc>
   </book>    
</bookstore>
ajax数据解析(Demo =xml.html)

<script type="text/javascript">
   window.onload = function(){//文档加载
      var btn = document.getElementById('btn');
      btn.onclick = function(){
         showBookInfo();
      }
      function showBookInfo(){
         document.getElementById('bookInfo').innerHTML = '';
         var xhr = null;
         if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();//创建xml对象
         }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');//常见IE5,6自己的ActiveXObject对象
         }
         console.log('第一步'+xhr.readyState);
         xhr.open('get','./data.xml');
         console.log('第二步'+xhr.readyState);
         xhr.send(null);
         xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
               var data = xhr.responseXML;       
               var bs = data.getElementsByTagName('bookstore')[0];
               console.log(bs);
               var books = bs.getElementsByTagName('book');
               var tag = '';
               for(var i=0;i<books.length;i++){
                  var book = books[i];
                  var name = book.getElementsByTagName('name')[0];
                  var category = book.getElementsByTagName('category')[0];
                  var desc = book.getElementsByTagName('desc')[0];
                  tag += '<tr><td>'+getNodeText(name)+'</td><td>'+getNodeText(category)+'</td><td>'+getNodeText(desc)+'</td></tr>';
               }
               var tbody = document.createElement('tbody');
               tbody.innerHTML = tag;
               document.getElementById('bookInfo').appendChild(tbody);
            }
         }
      }
   }
    //获取文本节点内容
    function getNodeText(node){
       if(window.ActiveXObject){//IE
          return node.text;
       }else{//标准浏览器
          if(node.nodeType == 1){
             return node.textContent;
          }
       }
    }
</script>
</head>
<body>
   <input type="button" value="点击" id="btn">
   <div>
      <table id="bookInfo">

      </table>
   </div>
</body>
json数据格式解析(Demo=data.json)

{
   "total":"4",
   "data":[
      {
         "name":"三国演义",
         "category":"文学",
         "desc":"一个军阀混战的年代"
      },{
         "name":"红楼梦",
         "category":"文学",
         "desc":"一个封建王朝的缩影"
      }
   ],
   "obj":{"adf":"adf"}
}
ajax数据解析(Demo =json.html)

<script type="text/javascript">
   window.onload = function(){
      var btn = document.getElementById('btn');
      btn.onclick = function(){
         showBookInfo();
      }
      function showBookInfo(){
         var xhr = null;
         if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
         }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
         }
         xhr.open('get','./data.json');
         xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
               var data = JSON.parse(xhr.responseText);
               console.log(data);
               var total = data.total;
               var list = data.data;
               var tag = '';
               for(var i=0;i<total;i++){
                  var book = list[i];
                  tag += '<tr><td>'+book.name+'</td><td>'+book.category+'</td><td>'+book.desc+'</td></tr>';
               }
               var tbody = document.createElement('tbody');
               tbody.innerHTML = tag;
               document.getElementById('bookInfo').appendChild(tbody);
            }
         }
         xhr.send(null);
      }
   }
</script>
</head>
<body>
   <input type="button" value="点击" id="btn">
   <div>
      <table id="bookInfo">

      </table>
   </div>
</body>

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

浅谈Ajax返回数据的3种格式——HTML、XML、JSON

1、数据格式提要: 在服务器端Ajax是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以; 从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送,服务器端的编程语言只能以如下...
  • zhouziyu2011
  • zhouziyu2011
  • 2016-10-23 09:18
  • 3650

javascript 解析ajax返回的xml和json格式的数据

写个例子,以备后用 一、JavaScript 解析返回的xml格式的数据: 1、javascript版本的ajax发送请求 (1)、创建XMLHttpRequest对象,这个对象就是ajax请求...
  • QH_JAVA
  • QH_JAVA
  • 2015-08-09 16:18
  • 5996

jquery 解析返回的xml和json

一、jquery 解析ajax请求返回的xml格式的数据 1、发送ajax请求 function  jqxml(){     $.ajax({         url:"http://l...
  • QH_JAVA
  • QH_JAVA
  • 2015-08-09 18:41
  • 3115

Ajax 解析XML+json总结

  • 2010-08-23 03:18
  • 559KB
  • 下载

javascript 解析ajax返回的xml和json格式的数据

写个例子,以备后用 一、JavaScript 解析返回的xml格式的数据: 1、javascript版本的ajax发送请求 (1)、创建XMLHttpRequest对象,这个对象就是...
  • MrCharles
  • MrCharles
  • 2016-01-13 11:22
  • 1105

jQuery中$.ajax解析xml、json格式数据

$.ajax()方法参数详解: 1、利用ajax解析xml 2、利用ajax解析json
  • ncepu307
  • ncepu307
  • 2014-12-03 11:25
  • 2477

Ajax解析html、xml、json、js原生方式、jquery方式

ajax之helloWorldmyjsp.jsp <% String path = request.getContextPath(); String basePath = request.getSch...
  • u013210620
  • u013210620
  • 2017-03-16 00:27
  • 607

javascript 解析ajax返回的xml和json格式的数据

写个例子,以备后用 一、JavaScript 解析返回的xml格式的数据: 1、javascript版本的ajax发送请求 (1)、创建XMLHttpRequest对象,这个对象就是ajax请求的核心...
  • qq_29663071
  • qq_29663071
  • 2016-08-26 15:11
  • 115

javascript 解析ajax返回的xml和json格式的数据

写个例子,以备后用 一、JavaScript 解析返回的xml格式的数据: 1、javascript版本的ajax发送请求 (1)、创建XMLHttpRequest对象,这个对象就是ajax请求...
  • QH_JAVA
  • QH_JAVA
  • 2015-08-09 16:18
  • 5996

Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别

使用ajax请求时候,responseText决定响应的数据类型是文本,responseXML决定响应的数据类型xml文档。当返回xml文档时候Servlet一定要设置response.setCont...
  • liangwenmail
  • liangwenmail
  • 2016-07-21 21:59
  • 7213
    个人资料
    • 访问:6676次
    • 积分:255
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条