从XML生成可和Ajax共同使用的JSON.doc_H5之家 - 中国HTML5教程资源分享第一站

淘豆网网友w3332654近日为您收集整理了关于从XML生成可和Ajax共同使用的JSON的文档，希望对您的工作和学习有所帮助。以下是文档介绍：专业专心专注专业资料参考首选从XML生成可与Ajax共同使用的JSON时下,非常流行使用JavaScript代码为数据驱动的Web应用程序添加互动性。若能将数据编码成JavaScriptObjectNotation(JSON)的格式,您就可以更轻松地通过JavaScript语言使用它。通过本文,发掘使用XSLTV2从XML数据生成JSON的几种不同方法。几年前,许多开发人员很看好XML、XSLT、ExtensibleHTML(XHTML)和其他一些基于标记的语言。现在,AsynchronousJavaScriptandXML(AJAX)成了新的热点,应用程序。但是开发人员是否已经消除了XML和这一新技术之间的鸿沟呢?当然,您可以在Web客户机中使用XML解析器来读取数据,但这种做法会带来两个问题。第一,出于安全方面的原因,XML数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素,但它的确会引起部署方面的问题,还会阻碍DHTML小部件的创建。第二,读取和解析XML会非常慢。另一种做法是让服务器执行XML的解析工作,方法是设置服务器,使之向浏览器发送以JavaScript代码或时下流行的JavaScriptObjectNotation(JSON)编码的数据。本文将展示如下三种使用XSLTV2语言和SaxonXSLTV2处理器从XML数据生成JSON的技巧:?简单编码?通过函数调用加载数据?编码对象JSON简介要学习如何将数据编码成JSON(它只是JavaScript的一个子集),最好的方法是从数据开始。清单1显示了书籍列表的一个示例XML数据集。清单1.基本的图形化图书馆<?xmlversion="1.0"encoding="UTF-8"?><books><bookid="1"><title>CodeGenerationinAction</title><author><first>Jack</first><last>Herrington</last></author><publisher>Manning</publisher></book><bookid="2"><title>PHPHacks</title><author><first>Jack</first><last>Herrington</last></author><publisher>O'Reilly</publisher></book><bookid="3"><title>PodcastingHacks</title><author><first>Jack</first><last>Herrington</last></author><publisher>O'Reilly</publisher></book></books>专业专心专注专业资料参考首选这个数据集很简单,只包含三本书,每本书都具有惟一的ID、书名、作者姓名及出版商的名字。(没错,我只选择了我自己的书作为数据集,但能怨我吗?这些书实在是不可多得的节日和生日礼物。)清单2显示了这些数据在JSON中的效果。清单2.JSON中的示例数据集[{id:1,title:'CodeGenerationinAction',first:'Jack',last:'Herrington',publisher:'Manning'},...]方括号([])表明这是一个数组。大括号({})则表明这是一个散列表,该散列表由一组名称和值对组成。在本例中,我创建了一个散列表的数组——用来存储这类结构式数据的一种常见方法。另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以,如果我想用单引号编码O'Reilly,我就必须使用反斜杠对它进行转义:'O\'Reilly'。这让我编写的这个XSLT样式表更为有趣了一些。我并未在本例中放上任何日期,但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串,该字符串必须在后面被解析。第二种方法是将日期作为一个对象,比如:publishdate:newDate(2006,6,16,17,45,0)这段代码将publishdate的值设置为6/16/20065:45:00p.m.。简单编码接下来我将陆续介绍JSON编码的几种技巧。第一种也是其中最简单的一种,此样式表如清单3所示。清单3.simple.xsl样式表专业专心专注专业资料参考首选<?xmlversion="1.0"encoding="UTF-8"?><xsl:stylesheetxmlns:xsl="9/XSL/Transform"version="2.0"xmlns:js=""><xsl:outputmethod="text"/><xsl:functionname="js:escape"><xsl:paramname="text"/><xsl:value-ofselect='replace($text,"'","\\'")'/></xsl:function><xsl:templatematch="/">varg_books=[<xsl:for-eachselect="books/book"><xsl:iftest="position()>1">,</xsl:if>{id:<xsl:value-ofselect="@id"/>,name:'<xsl:value-ofselect="js:escape(title)"/>',first:'<xsl:value-ofselect="js:escape(author/first)"/>',last:'<xsl:value-ofselect="js:escape(author/last)"/>',publisher:'<xsl:value-ofselect="js:escape(publisher)"/>'}</xsl:for-each>];</xsl:template></xsl:stylesheet>要理解此样式表,不妨先来看一下清单4所示的输出。清单4.simple.xsl的输出varg_books=[{id:1,name:'CodeGenerationinAction',first:'Jack',last:'Herrington',publisher:'Manning'},{id:2,name:'PHPHacks',first:'Jack',last:'Herrington',publisher:'O\'Reilly'专业专心专注专业资料参考首选},{id:3,name:'PodcastingHacks',first:'Jack',last:'Herrington',publisher:'O\'Reilly'}];这里,我将名为g_books的变量设置为一个包含三个散列表的数组,每个散列表包含关于该书的信息。再回过头来看看清单3,您会发现第一个模板匹配"/"路径,它也是首先应用到输入数据集的模板,该模板使用for-each循环来遍历每本书。之后,它使用<value-of>标记来将文本从该数据输出到JavaScript输出代码。对于字符串,我使用名为js:escape()的定制函数,它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。最后一个重要的元素是<xsl:output>标记,它告知处理器要输出的是文本而不是XML。要检验此过程是否可以正常工作,我加入了一个simple.html文件,该文件引用我在simple.js保存的XSL样式表的输出。这个HTML文件如清单5所示。清单5.simple.html文件<html><head><title>SimpleJSloader</title><scriptsrc="simple.js"></script></head><body><script>document.write("Found"+g_books.length+"books");</script></body></html>.html文件使用<script>标记简单地加载已编码了的JavaScript代码。之后,第二个<script>标记将数组的长度写出到浏览器页面,如图1所示。图1.simple.html的输出专业专心专注专业资料参考首选好了!数据文件包含三本书,相应的JavaScript文件也包含三本书。它真的可以工作!通过函数加载上述第一个示例很简单,而且在大多数情况下可以发挥其作用,但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的,这不成问题。但是如果页面动态创建了一个<script>标记来按需加载数据,那么就很有必要知道<script>标记是何时完成的。实现此功能的最好的方法是让编码了的数据调用一个JavaScript函数,而不是只设置数据。这个概念很重要,所以我将花一些时间来介绍一下为什么您必须要通过动态生成的<script>标记来加载数据。页面加载后,从服务器获得数据是Web2.0的核心功能。一种方法是使用AJAX机制通过到服务器的调用来加载XML。然而,出于安全性的原因,AJAX机制只限于从单一域获取数据。这在大多数情况下都没有问题,但有时,您可能需要JavaScript代码运行在他人的页面上(例如,GoogleMaps)。在这种情况下从服务器获得数据的惟一方法是通过动态加载<script>标记。获悉<script>标记何时加载的最好的方法是让<script>标记返回的脚本调用函数而不是简单地加载数据。清单6显示了在函数调用中编码的数据。清单6.Function1.jsAddBooks([{id:1,name:'CodeGenerationinAction',first:'Jack',last:'Herrington',publisher:'Manning'},{id:2,name:'PHPHacks',first:'Jack',last:'Herrington',专业专心专注专业资料参考首选publisher:'O\'Reilly'},{id:3,name:'PodcastingHacks',first:'Jack',last:'Herrington',publisher:'O\'Reilly'}]);清单7给出了相应的.html文件。清单7.Function1.html<html><head><title>Function1JSloader</title><script>varg_books=[];functionAddBooks(books){g_books=books;}</script><scriptsrc="function1.js"></script><scriptsrc="drawbooks.js"></script></head><body><script>drawbooks(g_books);</script></body></html>稍后将详细介绍drawbooks函数。这里重要的是了解一下页面如何定义AddBooks函数,该函数随后会由function1.js文件中的脚本调用。该AddBooks函数负责处理数据。而且被调用的AddBooks函数会向页面指示<script>标记被正确加载,并已加载完成。要创建function1.js文件,我只对样式表稍微做了一点修改,如清单8所示。清单8.function1.xsl样式表专业专心专注专业资料参考首选<xsl:templatematch="/">AddBooks([<xsl:for-eachselect="books/book"><xsl:iftest="position()>1">,</xsl:if>{id:<xsl:value-ofselect="@id"/>,name:'<xsl:value-ofselect="js:escape(title)"/>',first:'<xsl:value-ofselect="js:escape(author/first)"/>',last:'<xsl:value-ofselect="js:escape(author/last)"/>',publisher:'<xsl:value-ofselect="js:escape(publisher)"/>'}</xsl:for-each>]);</xsl:template>这里,我调用了一个函数,而不是简单地设置一个变量。这就是我所做的惟一更改。回到页面,我使用了drawbooks函数来构建书的表格,这样我就能够确认数据被正确编码和正确显示。此函数是在drawbooks.js内定义的,如清单9所示。清单9.Drawbooks.jsfunctiondrawbooks(books){varelTable=document.createElement('table');for(varbinbooks){varelTR=elTable.insertRow(-1);varelTD1=elTR.insertCell(-1);elTD1.appendChild(document.createTextNode(books[b].id));varelTD2=elTR.insertCell(-1);elTD2.appendChild(document.createTextNode(books[b].name));varelTD3=elTR.insertCell(-1);elTD3.appendChild(document.createTextNode(books[b].first));varelTD4=elTR.insertCell(-1);elTD4.appendChild(document.createTextNode(books[b].last));varelTD5=elTR.insertCell(-1);elTD5.appendChild(document.createTextNode(books[b].publisher));}document.body.appendChild(elTable);}这个简单函数创建了一个表格节点,然后循环访问书的列表并为每本书创建一行,为每个数据元素分配一个单元格。此页面上的代码的结果如图2所示。图2.function1.html的结果专业专心专注专业资料参考首选现在我就可以查看一下此页面的输出并确认来自原始.xml文件的一切均已被正确转换成JavaScript代码,且数据被发送到AddData函数并被正确添加到页面。细化函数调用技术我很喜欢函数调用这一技术,但我并不赞同将所有图书数据都放入一个块中。另一种方式是为每条记录采用一个调用,如清单10所示。清单10.Function2.jsAddBook({id:1,name:'CodeGenerationinAction',first:'Jack',last:'Herrington',publisher:'Manning'});AddBook({id:2,name:'PHPHacks',first:'Jack',last:'Herrington',publisher:'O\'Reilly'});...对.html页面只需做少许修改,如清单11所示。清单11.Function2.html...<script>varg_books=[];functionAddBook(book){g_books.push(book);}</script>专业专心专注专业资料参考首选...这里更改了XSLT,以使函数调用驻留在for-each循环体内。清单12显示了更新后的样式表。清单12.function2.xsl...<xsl:templatematch="/"><xsl:for-eachselect="books/book">AddBook({id:<xsl:value-ofselect="@id"/>,name:'<xsl:value-ofselect="js:escape(title)"/>',first:'<xsl:value-ofselect="js:escape(author/first)"/>',last:'<xsl:value-ofselect="js:escape(author/last)"/>',publisher:'<xsl:value-ofselect="js:escape(publisher)"/>'});</xsl:for-each></xsl:template>...对这个给定示例来说,这种更改看起来有些随意。但如果原始的XML数据集有多种数据类型,要为每种类型分配一个单独的函数调用会使XSL和页面上的JavaScript代码更为简单、更易于维护。编码对象对小的页面来讲,使用JavaScript函数没有问题。但对于大型项目,就需要使用JavaScript语言的一些面向对象特性。是的,JavaScript语言可以处理对象而且可以处理得很好。清单13显示了如何创建带有数据的对象。清单13.Object1.js专业专心专注专业资料参考首选g_books.push(newBook({id:1,name:'CodeGenerationinAction',first:'Jack',last:'Herrington',publisher:'Manning'}));g_books.push(newBook({id:2,name:'PHPHacks',first:'Jack',last:'Herrington',publisher:'O\'Reilly'}));在本例中,我只简单地向名为g_books的数组添加了Book对象。JavaScript的对象创建与Java?、C#或C++编程语言的对象创建十分相似。都是一个new操作符后跟一个类名。参数放到随后的括号内。在本例中,我传入了一个带值的单一散列表,并将其分割成单独的一些参数。创建此对象的代码如清单14所示。清单14.Object1.xsl<xsl:templatematch="/"><xsl:for-eachselect="books/book">g_books.push(newBook({id:<xsl:value-ofselect="@id"/>,name:'<xsl:value-ofselect="js:escape(title)"/>',first:'<xsl:value-ofselect="js:escape(author/first)"/>',last:'<xsl:value-ofselect="js:escape(author/last)"/>',publisher:'<xsl:value-ofselect="js:escape(publisher)"/>'}));</xsl:for-each></xsl:template>此页面内最值得注意的是定义Book类的那部分代码。清单15显示了该页面。清单15.object1.html

播放器加载中，请稍候...
系统无法检测到您的Adobe Flash Player版本
建议您在线安装最新版本的Flash Player 在线安装