XML
XML格式常用于网络通讯,本身不会有作为而是作为纯文本传输,可以说它是一种独立于应用和硬件的数据传输工具。虽然看起来XML比HTML要更加简单,也知道的更加晚一点,但是需要知道的是,XML才是更加通用的,层级比HTML更加低的。准确来说,HTML都只是XML的一种实现形式而已。所以HTML中很多我们熟知的方式方法都可以应用到XML格式中来。更多XML信息参考http://www.w3school.com.cn/xml/index.asp
■ XML树形结构
和HTML类似的,XML也是个树形结构。其根节点之前一般会有一个总领全文的xml节点:<?xml version="1.0" encoding="utf-8"?>。来说明这个xml文件的版本信息和编码的格式。具体就不说了,反正和HTML一样的
■ XML语法
基本语法和HTML也一样,就不多述了,主要讲一下和HTML不同的地方。
1. XML不允许开放的标签结尾。在HTML中,我们可以有<p>some text这样的元素来表示一行,后面不接上</p>也ok。但是XML中不允许类似于此的开放式结尾的标签。如果XML要有单个标签也要在后面加上一个斜杠比如<tag attribute="value" />。
2. XML的属性值必须加引号。HTML中属性的值可以不加引号,但是XML不行
3. HTML中偶尔会见到没有正确按照层级嵌套的元素比如<b><i>text</b></i>,但是在XML中也不允许,层级嵌套的标签必须按照层级顺序一层一层完整地写出来。
4. XML中特殊字符(主要是五个:<,>,&,‘,")的转义和HTML中的不一样,HTML中可以直接比如把&转义成&。但是XML中还要加上一个分号,&才会转义成&。另外,HTML中有两种方式来表达转义比如"和&都表示&,但是XML中只能用后者。
5. XML中的空格会被保留。HTML标签内部的空格,多个会被解释成一个,但是XML中会原原本本地保留出所有空格
6. XML的标签是自定义的,且对大小写敏感。
总体而言,XML的语法比HTML更加严格严谨一点,这主要是因为XML用于数据传输,要保证数据不受曲解损坏,而HTML的使命是显示相关内容,所以只要达到显示的目的就好,不用细究语法严格性。
■ 用XSLT样式表显示XML文件
XML文件和HTML一样,可以被大多数浏览器打开并浏览,但是没有任何样式表的XML文件就是白开水般的一个XML文件格式,如果加上样式表可以让XML比较漂亮的展示出来。这里用到的就是XSLT这种标记语言。XSLT之于XML相当于CSS之于HTML。
具体的XSLT内容我还没看过:http://www.w3school.com.cn/xsl/index.asp
这里写这一节主要是为了知道有这么个东西。。
■ XML和JS的互动
XML作为一个文件,可以在JS中打开加载,然后变成一个XML对象,XML对象就和JS所在的HTML对象一样,可以设置,获取内容,遍历元素等等,具体操作不说了,可以参见xml dom教程(http://www.w3school.com.cn/xmldom/dom_loadxmldoc.asp)。这里简单提一下如何在JS中创建一个XML对象。一般的做法是,把解析加载XML文件的操作包装成一个函数,写在一个单独的.js文件中,再需要引用的页面引用即可。这个函数可以这么写:
function loadXMLDoc(dname) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load(dname); return(xmlDoc); } catch(e) {alert(e.message)} return(null); }
在引用时:
<html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html>
这里的books.xml是个url,指定一个待解析的XML文件。
● 关于XMLHttpRequest以及AJAX
此外,现代的JS中大多都内置了XMLHttpRequest这个对象。XMLHttpRequest是个很神奇的东西,它可以让页面和后台的服务器可以有数据交换。一般做法是在JS中创建一个XMLHttpRequest对象,然后让它以一定方法(POST,GET)打开一个url,期间当然也可以设置一些参数,然后发送这个请求到后台,后台将返回相关请求的应答数据。如果在发送之前设置对象的onreadystatechange属性还可以为这个请求设置一个回调函数,即在收到后台反馈的应答之后再用这个函数做些什么事。
下面是一个实例:
<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc. xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else { alert("Your browser does not support XMLHTTP."); } } function state_Change() { if (xmlhttp.readyState==4) {// 4 = "loaded" if (xmlhttp.status==200) {// 200 = "OK" document.getElementById(‘A1‘).innerHTML=xmlhttp.status; document.getElementById(‘A2‘).innerHTML=xmlhttp.statusText; document.getElementById(‘A3‘).innerHTML=xmlhttp.responseText; } else { alert("Problem retrieving XML data:" + xmlhttp.statusText); } } } </script> </head> <body> <h2>Using the HttpRequest Object</h2> <p><b>Status:</b> <span id="A1"></span> </p> <p><b>Status text:</b> <span id="A2"></span> </p> <p><b>Response:</b> <br /><span id="A3"></span> </p> <button onclick="loadXMLDoc(‘/example/xdom/note.xml‘)">Get XML</button> </body> </html>
xmlhttp对象在open的时候如果是"POST"的话那么就需要在send中加上一个对象参数来代表POST的参数了。这个实例中,设置了请求的回调函数为state_Change,在这个函数中我们看到了其调用了xmlhttp对象的readyState属性,这个属性指示的就是这个请求的状态码。各个值的意义:0代表还未调用open,1代表还未调用send,2代表已经调用send,3代表下载响应未完成,4代表请求已经成功完成。通过对这个属性的判断我们可以知道这个请求是失败了还是成功了。更多的细节我不想在现在多讲,因为在JQ框架下有包装得更好的ajax方法,将来即使要用到肯定也不会像这个例子一样从这么底层的JS开始写起。。总之了解一下原理就好了吧。
上面提到了AJAX(Asynchronous Javascript And XML:异步JS和XML)是这种通过XML和服务器后台进行即时的数据交换的方法较为笼统的叫法。其核心要义就是在不全部重载页面的情况下,通过和后台的数据交互实现刷新一部分的页面。更为强大的AJAX用法,被jQuery包装起来了,所以我认为真正用的时候可以turn to JQ的AJAX方法。