文档章节

原生javascript解析xml文档

IamOkay
 IamOkay
发布于 2014/11/14 21:53
字数 746
阅读 7008
收藏 22

顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设置 dataType就能得到json呢?

众所周知,服务端的 数据以json字符串输出,文档类型是 “text/html”,因此返回前台的默认是字符串,如果返回前台的指定为json,

需要设置http响应头application/json,这样返回的直接就是json对象了。

注意,必须在输出流之前设置响应头

//java jsp servlet中,在struts中有2种输出json的方式,一种是类似serlvet,另一种是进行json配置,在springmvc中可以直接返回json

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse res)
    throws ServletException, IOException
  {
      response.setContentType("application/json;charset=UTF-8"); //
      request.setCharacterEncoding("UTF-8");
      PrintWriter out = request.getWriter();
      out.println("{'name':'zhangsan','age':20,'gender':'M'}");  //json一般不用来手写,请借助json工具包实现
      out.close();
   }

<?php
header('application/json;charset=utf-8');
echo "{'name':'zhangsan','age':20,'gender':'M'}";

?>

好了,现在说今天的主角<

原生javascript解析xml文档

>

var loadXML = function(xmlString){ //构建xmldoc对象
   
     var xmlDoc=null;
      
      if(window.DOMParser)  //IE9+,FF,webkit
      {
            try{
                
                domParser = new  DOMParser();
                xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
            }catch(e){
            }
        }
        else if(!window.DOMParser && window.ActiveXObject)
        {   //window.DOMParser 判断是否是非ie浏览器
            var xmlDomVersions = ['MSXML2.DOMDocument','Microsoft.XMLDOM'];
            for(var i=0;i<xmlDomVersions.length;i++){
                try{
                    xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                    xmlDoc.async = false;
                    xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
                    break;
                }catch(e){
                    continue;
                }
            }
        }
        else{
            return null;
        }

        return xmlDoc;
    }

给个数据源

var datasource = '<?xml version="1.0" encoding="utf-8" ?>  
<bookstore>  
  <book id="No1">  
      <title>An Introduction to XML</title>  
      <author>Chunbin</author>  
      <year>2010</year>  
      <price>98.0</price>      
    </book>  
  <book id="No2">  
      <title>The Performance of DataBase</title>  
      <author>John</author>  
      <year>1996</year>  
      <price discount='7' data='8'>56.0</price>  
    </book>  
</bookstore>';

然后来使用,用法很简单

var xmlDoc = loadXML(datasource);
if(xmlDoc)  //xml的解析和html doc几乎完全相同,可以使用 xmlDoc.getElementById(),xmlDoc.getElementsByTagName(),xmlDoc.getElementsByClassName
{
   var books= xmlDoc.getElementsByTagName('book');
   var book = xmlDoc.getElementById('No2');
   
   if(books)
   {
        for(var i=0;i<books.length;i++)
        {
            var title = books[i].getEelementsByTagName('title')[0].firstChild.nodeValue; //确实有点长,因为
            var author = books[i].getEelementsByTagName('author')[0].innerHTML;//变短点
            var year = books[i].getEelementsByTagName('year')[0].innerHTML; //或者这样
            var price = Number(books[i].getEelementsByTagName('price')[0].innerHTML);
            
          //有值了,下一步不是我的事了
        }
        
        //获取属性使用 attributes,得到的是nodevaluemap
       var attrs = book.attributes;
       
       for(var i=0;i<attrs.length;i++)
       {
           var attr = attrs[i];
           var attr_name = attr.name;
           var attr_value =  attr.value;          
       }   
   }
}

-----------------------------------------------------------------

常用方法,属性api

attributes: 
id
length
childElementCount
childNodes
children
className
firstChild
firstElementChild
innerHTML(只读)
lastChild
lastElementChild
localName
nextSibling
nodeName
nodeType
nodeValue
ownerDocument
parentNode
prefix(新)-->表示前缀,xml允许前缀
namespaceURI(新)-->表示命名空间
previousSibling
tagName

注意:xml是字符串数据,一般来说是只读的属性,即使使用某些手段修改,但也不能做到持久化。因为除了文件上传外js不允许进行io操作

javascript解析xml就此结束

参考链接:http://my.oschina.net/ososchina/blog/343748


try doing it!

© 著作权归作者所有

IamOkay

IamOkay

粉丝 203
博文 483
码字总数 403198
作品 0
海淀
程序员
私信 提问
JavaScript 解析 JSON 数据

JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。 JSON的规则...

红薯
2009/08/18
40.3K
11
React学习(2)-深入浅出JSX

前言 在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起 然而在React出现后,一切皆js,对于在JS里面写HTML代码,刚开始是非...

itclanCoder
07/03
0
0
[翻译]Mozilla的JSON

JSON 原文地址:https://developer.mozilla.org/en-US/docs/JSON 已经提交至Mozilla,地址是:https://developer.mozilla.org/zh-CN/docs/JSON 译者能力有限,欢迎拍砖 感觉这个文章有些地方...

陈冠羽
2013/05/17
422
2
基于原生的移动跨平台研究和实践

基于原生主要是针对基于webview+h5比较来说的,基于H5的我不想再讨论了,我想尝试的是从UI到功能都是原生,而不是用H5模拟的所谓原生体验。 背景 我们从开发角度来考虑,但凡想从事长远的开发...

voxer
2017/03/26
143
0
Weex-iOS源码阅读(一)初始化和函数调用

weex是基于JavaScriptCore实现的,看代码之前有必要先了解下JavaScriptCore,相关内容移到: iOS-JavaScriptCore 先说说我理解的跨平台技术,其实我们做的移动端产品基本都是跨平台的,Andro...

正谦
2018/08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CRM、DMP、CDP都是什么?有什么区别?

Markter对CRM系统(Customer Relationship Management System,客户关系管理系统),营销自动化等概念都已经比较熟悉,也许DMP(Data Management Platform,数据管理平台)也多多少少有些了解。...

怡海软件-CRM
5分钟前
1
0
中台是什么,到底要解决什么问题?

故事的开始 这个最早由阿里在2015年提出的“大中台,小前台”战略中延伸出来的概念,最近在国内大热。阿里、腾讯、百度、京东、美团、滴滴等一众互联网巨头,从去年到今年,接连开始组织架构...

喵二狸
16分钟前
2
0
Linux Centos 7 - MySQL 5.7离线安装

内部网络通过离线包的方式进行安装。 一、下载 下载地址:https://dev.mysql.com/downloads/mysql/ 进入页面后,点击右侧链接。 下载对应版本。 通过xftp6等工具上传到服务器上。 二、安装和...

华山猛男
17分钟前
2
0
EventBus 3 全解

EventBus 3 全解 [TOC] 使用 一个基于观察者模式的事件发布/订阅框架. 用于模块间通信和解耦, 使用方便,性能高. 基本使用 1. gradle导入依赖库 implementation 'org.greenrobot:eventbus:3....

马湖村第九后羿
19分钟前
3
0
HTTP 协议

什么是HTTP协议? HTTP是hypertext transport protocol的缩写,即超文本传输协议。 是用于万维网服务器与本地浏览器之间传输超文本的传送协议。可以使浏览器更加高效,使网络传输减少。能够保...

彩色泡泡糖
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部