什么是框架?

　　为了便于沟通，我们给“框架”统一一个定义（至少在本篇文章中是统一的）：一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。通常的讲，框架就是上面提到的JavaScript框架和Web应用框架。 内容来自站长资讯网(www.chinahtml.com)

　　需要强调说明的是，我们不必讨论构造、打包发布，相反，一个框架只为你或你的团队使用即可。

CSS框架

　　有些时候，你可能尝到了抽象类似的CSS代码的甜头，在那些同时设计几个类似网站的设计师身上表现最为明显。此外，站长资讯网欢迎您(www.chinahtml.com)团队中的设计师们从框架的方法上有很多的获益。比如，我在一家报馆工作，所有的20多个网站保持着很多的共同点，基于新闻网站的特点，它们趋向于更加相似，而不是差异。但是，即使单独一个设计师，中国站长第一门户设计一个从表面上看有差异很大的项目，也可以为CSS框架抽象出一些通用的小碎片。

　　劳伦斯日报（Lawrence Journal-World），我在那里工作，我们最近建立了一个CSS框架，并发现它是一个巨大的效率倍增。当然，我们花了数天时间自己创建了一个CSS框架，但一旦框架完工，开发高质量网页的速度是极快的。更何况，既然团队每一个设计师现在都使用这个框架，当一个设计师修改另一个团队成员网页时，他们不再需要花20分钟理解别人的构建思路，可以马上上手。 内容来自站长资讯网(www.chinahtml.com)

有那些可以忽略?

　　当投入到一个整体性很强的CSS框架，你想寻找的东西，是每个项目都做了一遍又一遍的重复通用的代码，目标是巩固这些代码核心地位，遵循“不重复自己（Don’t Repeat Yourself）”编码方法。这使得维护工作容易了许多，还可以帮访问者节省带宽开销。

　　几乎每个我参与的项目中，我必须声明的几个CSS问题： 内容来自站长资讯网(www.chinahtml.com)

　　“大量重置”浏览器默认风格，比如，站长资讯网欢迎您(www.chinahtml.com)设置所有元素的margin和padding为0，去掉框架（framesets）和图片（images）的border，等等。
　　以基线对齐。这包括诸如设定块级元素的margins相同的(或多个)基准行高，如段落（paragraph）、头（header）、以及列表（list）。
　　创建表单（Form）的基本样式。
　　创建几个常用的CSS 类，例如，.hide(把display置为none，即隐藏元素)、.mute(设定为一个较小的字体和较亮的颜色)。
　　还有更有趣的事情，许多网站设计师发现自己不断重复使用着相同的基本结构，中国站长第一门户为什么不动它整理成自己的，在某种程度上可以非常灵活的用于多个网站?Yahoo这样做了，这就是YUI。当我们为的劳伦斯日报网站（the Journal-World）建立CSS框架的时候，我先看看Yahoo是怎么做的。我们很肯定那不是我们想要的，但作为一个很好的例子，给我们提供了很多思考和如何建构自己框架的想法。我们解决了16个单元格的问题，它具有足够的灵活性使我们的每一个网站都可以应用，即使每个网站看上去与下一个版本有些差异。另外大多数网站共用widgets ，象下拉菜单、导航菜单、按钮等，这些也是主要的需要抽象提取的对象。除此之外,你可能有共同的内容名称，如图片列表的缩略图，站长资讯网欢迎您(www.chinahtml.com)你可以规范对CSS命名，如“thumbnail-list”，让所有显示缩略图的都使用这个CSS类。

　　另外要做的可能是抽取hack（如兼容那些旧浏览器)加入自己的扩展的样式模块。我自己尝试过，但发现hack过于专有而不能抽取到通用框架里。 内容来自站长资讯网(www.chinahtml.com)

什么是真正的益处?

　　框架的真正好处是能够快速启动工作，你可以创建一个新的(X)HMTL文件，引入你框架，你不用再处理重置padding 和 margins的事情，漂亮的排版，干净的表单，整齐的布局，有效的widgets，等等。很明显，很明显，虽然，你一定要来定制外观和感觉为每个站点。为实现这一目标,所有你需要做的是复写,并添加到默认的风格是必要的。

　　很显然，尽管你必须为每个网站定制外观，为了完成这一任务，你所需要做的就是在默认的样式上加几行代码。举个例子，如果在你的框架里，为所有的class属性为“tabs”的UL标签设置了基本的水平导航样式，并且有一个灰色的边框，你只需要几行CSS代码，就可以定制成你的网站所符合的外观样式。

Example Source Code
view plaincopy to clipboardprint?
ul.tabs li {
border: none;
background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);
}
ul.tabs li {
border: none;
background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);
}

　　列表左浮动，并且将链接以块的形式置于列表当中，链接也左浮动，字体居中，象烦人的广告一样的这些工作，框架以帮你完成，在你的网站设计工作中，只需集中精力处理特别的、有趣的网站细节，而不是写已经写过百万次的CSS代码。

如何构建一个CSS框架?

　　构建一个框架有几种可能的方式，但最常见，可以说是最有用的，抽象通用的CSS放到一个独立样式表文件，该样式表文件只包含整体的一个特有部分。例如,你可以，一个样式处理排版，另一个处理大量重置。这种好的方法能使你选择性引入你需要的样式，在你框架里可能有六七个不同的样式文件，但不需要其中的一两个，只要不引入即可。我们团队创建的框架包含5个样式文件：

　　reset.css —处理重置
　　type.css —处理排版
　　grid.css —处理布局
　　widgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮
　　base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架
　　然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充。 内容来自站长资讯网(www.chinahtml.com)

忠告

　　这种方法不错,但也带来新的问题：增加了每一个页面的http链接数。对于大流量和中等流量的网站，每个页面增加5个以上HTTP连接数，站长资讯网欢迎您(www.chinahtml.com)系统管理员可能就麻烦大了。两个可能解决办法：

　　把所有样式都放到一个文件里，而不是分成多个模块。这里的问题是，失去了框架只包含特定文件的灵活性，而且维护也变得麻烦。
　　有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法，但如果做好了应该是很有效率的。以我上面框架为例，当请求（Request）base.css时候，而不是请求（Request）type.css , grids.css 等的时候，这一动态处理过程触发。这样一来,单个文件仍然可用，而在平台版本上整个框架也有效的。
　　总之，我们目标不是尽可能的抽象，这点非常重要。相反,其目标是提供了一个快速启动和更有效率的设计过程，这是绝对有可能去做过的。如果你过于的抽象，事情会变得混乱，太多的HTTP链接数会影响你网站的性能。记住：一个好的框架不是把事情搞更难更复杂，而是一个简单的从零的开始。

总结 内容来自站长资讯网(www.chinahtml.com)

　　我们web设计师往往经常重复自己，就像我程序世界里的那些朋友，我们重置浏览器默认样式、设计布局和导航菜单写了一遍又一遍——几乎每个项目。花一点时间整理CSS 框架，可以使你快速的启动每一个网站项目，更轻松的维护网站，并帮助团队里其他的设计师理解你作品。要注意的一点，这些益处的获得必须以不影响网站的性能为前提。

　　什么是favicon？

　　所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。

　　从特定的技术角度看，favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用：一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。

　　如何制作Favicon.ico

　　制作Favicon.ico的方法相当简单，首先，利用图形工具创建2个反映网站主题的256色的小图片：1个为32×32像素，另一个为16 ×16像素。需要注意的是，调色板要选用“Windows 默认调色板”，不然，在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。

　　需要说明的是，在很多关于Favicon.ico的说明中，常见到要求图片为16色的说法，应该说这类说法大大过时：在早期如Windows 95时期，16色的Favicon.ico可能是个稳妥的选择，保证其在大多数情况下正常使用，但现在，完全不存在那类限制，16色只能使图标的展示效果大大降低。

　　至于在浏览器中使用时16×16像素的图片已经足够，为什么还要准备32×32像素的图片，原因在于，正如上文所言，favicon也显示在地址栏中，用户可以拖曳favicon到桌面以建立到网站的快捷方式，而桌面图标则要以32×32显示的，如果您的Favicon.ico不包括32像素的图片，系统就只能使用默认的浏览器图标来标注网站/网页，如Internet Explorer的蓝色“e”，起不到我们意欲通过Favicon.ico打造网站品牌的作用。

　　图片制作好后，使用如Image2Ico之类的小程序即可将2张图片转换到一个Icon文件中。也可以通过可以在线制作Favicon的网站来制作，不过，需要注意的是，这个网站要求图片源文件格式为Pic。可以在线制作favicon.ico的地址：

　　http://www.chami.com/html-kit/services/favicon/

　　在网页中使用Favicon.ico

　　浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件，如果没有，便到网站的根目录下寻找。

　　因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。

　　如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页Html文件中做设定了，具体设置也很简单，在Html中的＜head＞部分加入如下的代码：

　　程序代码: <link rel="icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon">

　　<link rel="shortcut icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon">

　　Firefox还支持GIF动画格式的Favicon,使用方法如下:

　　首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:

　　程序代码 <link rel="shortcut icon" href="favicon.ico" >

　　<link rel="icon" href="animated_favicon.gif" type="image/gif" >

flex的长处是数据的图形化。但用flex显视二维数据和传统的html相比，却显得呆版，笨重。

　　XML——这种用于表示客户端与服务器间数据交换有效负载的格式，几乎已经成了Web services的同义词。然而，由于Ajax和REST技术的出现影响了应用程序架构，这迫使人们开始寻求`XML的替代品，如：JavaScript Object Notation（JSON）。

　　JSON 作为一种更轻、更友好的 Web services客户端的格式（多采用浏览器的形式或访问 REST风格 Web服务的Ajax应用程序的形式）引起了 Web 服务供应商的注意。

　　本文将阐述JSON在Web services设计中备受推崇的原因，以及它作为XML替代方案的主要优势和局限性。文中还会深入探讨：随着相应的Web 服务客户端选择使用JSON，如何才能便捷地在Java Web services中生成JSON输出。

XML的十字路口: 浏览器和 Ajax

　　XML设计原理已经发布了将近十年。时至今日，这种标记语言已经在广阔的软件应用领域中占据了主导地位。从Java、.NET等主流平台中的配置和部署描述符到应用集成场景中更复杂的应用，XML与生俱来的语言无关性使之在软件架构师心目中占据着独特的地位。但即便最著名的XML权威也不得不承认：在某些环境中，XML的使用已经超出了它自身能力的极限。

　　围绕Ajax原理构建的那些Web应用程序最能说明XML的生存能力，从这一点来看，一种新的有效负载格式的发展壮大也得益于XML。这种新的有效负载格式就是JavaScript Object Notation (JSON)。在探索这种新的标记语言的复杂性之前，首先来分析一下在这种独特的设计形式中，XML具有哪些局限性。

　　Ajax建立了一个用于从远程Web services发送和接收数据的独立信道，从而允许Web程序执行信道外（out-of-band）客户端/服务器调用。通俗地说，Ajax程序中的更新和导航序列在典型的客户端/服务器环境之外完成，在后台（即信道外）接受到信息后，必须进行一次完整的屏幕刷新。更多背景信息，请参阅David Teare的 Ajax简介（Dev2Dev）。

　　这些应用程序更新通常是通过REST风格（RESTful）Web services获得的，一旦被用户的浏览器接收到，就需要整合到HTML页面的总体布局之中，这正是XML发挥强大力量的场合。尽管近年来，脚本语言支持和插件支持已使大多数主流浏览器的功能得到了强化，但许多编程任务依然难于开展，其中之一就是操纵或处理文本，这通常是使用DOM实现的。

　　采用DOM的复杂性源于其基于函数的根，这使得对数据树的简单修改或访问都需要进行无数次方法调用。此外，众所周知，DOM在各种浏览器中的实现细节不尽相同，这一过程将带来极为复杂的编程模式，其跨浏览器兼容性出现问题的可能性极大。接下来的问题显而易见，那就是：如何使一种标记语言轻松集成到HTML页面中以满足Ajax的要求？

　　问题的答案就是：利用所有主流浏览器中的一种通用组件——JavaScript引擎。XML需要使用DOM之类的机制来访问数据并将数据整合到布局之中，采用这种方法，我们不再使用像XML这样的格式来交付Ajax更新，而是采用一种更为简单直观的方式，采用JavaScript引擎自然匹配的格式——也就是JSON。

　　既然已经明确了JSON与XML和Ajax之间的关系，下面将进一步探讨JSON背后的技术细节。

JSON剖析：优点和不足

　　对于JSON，首先要明白JSON和XML一样也是一种简单文本格式。相对于XML，它更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。下图是一个JSON有效负载：

{"addressbook": {"name": "Mary Lebow",

    "address": {

        "street": "5 Main Street"

        "city": "San Diego, CA",

        "zip": 91912,

    },

    "phoneNumbers": [

        "619 332-3452",

        "664 223-4667"

    ]

 }

}

　　将上面的JSON有效负载用XML改写，如下：

<addressbook>

 <name>Mary Lebow</name>

 <address>

    <street>5 Main Street</street>

    <city zip="91912"> San Diego, CA </city>

    <phoneNumbers>

      <phone>619 332-3452</phone>

      <phone>664 223-4667</phone>

    </phoneNumbers>

 </address>

</addressbook>

　　是不是很相似？但它们并不相同。下面将详细阐述采用JSON句法的优点和不足。

优点

　　乍看上去，使用JSON的数据分隔符的优点可能并不那么明显，但存在一个根本性的缘由：它们简化了数据访问。使用这些数据分隔符时， JavaScript引擎对数据结构（如字符串、数组、对象）的内部表示恰好与这些符号相同。

　　这将开创一条比DOM技术更为便捷的数据访问途径。下面列举几个JavaScript代码片段来说明这一过程，这些代码片段会访问先前的JSON代码片段中的信息：

•   访问JSON中的名称： addressbook.name

•   访问JSON中的地址： addressbook.address.street

•   访问JSON中的电话号码第一位：addressbook.address.phoneNumbers[0]

　　如果您具备DOM编程经验，就能很快地看出区别；新手可以参看 Document Object Model 的这一外部资源，这里提供了关于数据导航的实例。

　　JSON的另一个优点是它的非冗长性。在XML中，打开和关闭标记是必需的，这样才能满足标记的依从性；而在JSON中，所有这些要求只需通过一个简单的括号即可满足。在包含有数以百计字段的数据交换中，传统的XML标记将会延长数据交换时间。目前还没有正式的研究表明JSON比XML有更高的线上传输效率；人们只是通过简单的字节数比较发现，对于等效的JSON和XML有效负载，前者总是小于后者。至于它们之间的差距有多大，特别是在新的XML压缩格式下它们的差距有多大，有待进一步的研究。

　　此外，JSON受到了擅长不同编程语言的开发人员的青睐。这是因为无论在Haskell中或 Lisp中，还是在更为主流的C#和PHP中，开发都可以方便地生成JSON（详见 参考资料）。

不足

　　和许多好东西都具有两面性一样，JSON的非冗长性也不例外，为此JSON丢失了XML具有的一些特性。命名空间允许不同上下文中的相同的信息段彼此混合，然而，显然在JSON中已经找不到了命名空间。JSON与XML的另一个差别是属性的差异，由于JSON采用冒号赋值，这将导致当XML转化为JSON时，在标识符（XML CDATA）与实际属性值之间很难区分谁应该被当作文本考虑。

　　另外，JSON片段的创建和验证过程比一般的XML稍显复杂。从这一点来看，XML在开发工具方面领先于JSON。尽管如此，为了消除您对这一领域可能存在的困惑，下节将介绍一些最为成熟的JSON开发

    页面：jsonExample.jsp

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
JSON示例
</title>
<script type="text/javascript" src="zxml.src.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
var xmlHttp;
       
        //创建对象
        function createXMLHttpRequest(){
         xmlHttp = zXmlHttp.createRequest();
        }
       
        function doJSON(){
           //得到Car对象
         var car = getCarObject();
               
                //用JSON字符串化car对象
                var carAsJSON = car.toJSONString();
                alert("汽车对象JSON化为:\n" + carAsJSON);
               
                var url = "JSONExample?timeStamp=" + new Date().getTime();
               
                //创建对象
                createXMLHttpRequest();
                xmlHttp.open("POST",url,true);
                xmlHttp.onreadystatechange = handleStateChange;
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form.urlencoded");
                xmlHttp.send(carAsJSON);
        }
       
        //回调方法
        function handleStateChange(){
         if (xmlHttp.readyState == 4){
                 if (xmlHttp.status == 200){
                         parseResults();
                        }
                }
        }
       
        //解析结果
        function parseResults(){
         var responseDiv = document.getElementById("serverResponse");
                if (responseDiv.hasChildNodes()){
                 responseDiv.removeChild(responseDiv.childNode[0]);
                }
               
                var responseText = document.createTextNode(xmlHttp.responseText);
                responseDiv.appendChild(responseText);
        }
       
        //得到Car对象
        function getCarObject(){
         return new Car("Dodge","Coronet R/T",1968,"yellow");
        }
       
       
        //Car构造函数
        function Car(make,model,year,color){
         this.make = make;
                this.model = model;
                this.year = year;
                this.color = color;
        }
</script>
</head>
<body>
<br /><br />
<form action="#">
  <input type="button" value="发送JSON数据" onclick="doJSON();"/>
</form>
<h2>
  服务器响应：
</h2>
<div id="serverResponse">
</div>
</body>
</html>

    服务器：JSONExample.java

package ajaxbook.chap4;

import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;

public class JSONExample
    extends HttpServlet {
  //处理Post方法
  protected void doPost(HttpServletRequest request,
                        HttpServletResponse response) throws ServletException,
      IOException {
    String json = readJSONStringFromRequestBody(request);

    //使用JSON绑字Ajax对象
    JSONObject jsonObject = null;
    try {
      jsonObject = new JSONObject(json);
    }
    catch (ParseException pe) {
      System.out.println("ParseException: " + pe.toString());
    }

    //返回输出结果
    String responseText = "You have a " + jsonObject.getInt("year") + " "
        + jsonObject.getString("make") + " " + jsonObject.getString("model")
        + " " + " that is " + jsonObject.getString("color") + " in color.";

    response.setContentType("text/xml");
    response.getWriter().print(responseText);
  }

  //得到参数
  private String readJSONStringFromRequestBody(HttpServletRequest request) {
    StringBuffer json = new StringBuffer();
    String line = null;
    try {
      BufferedReader reader = request.getReader();
      while ( (line = reader.readLine()) != null) {
        json.append(line);
      }
    }
    catch (Exception e) {
      System.out.println("Error reading JSON string: " + e.toString());
    }
    return json.toString();
  }
}

注意：要引入json.js和json的源文件，使用json.jar不行，源文件参见书籍源代码第三章

参考：Ajax基础教程  作笔记吧 

毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将详细讨论如何创建一组对象(在其它语言中经常被当作一个包)，如何把这些对象串行化为JSON以发送到服务器端，以及如何把服务器端JSON反串行化为客户端JavaScript对象。

提示：你可以在Douglas Crockford的网站上找到本文中使用的JSON分析器。

在继续阅读前，本文假定你已经掌握了JavaScript技术并且了解如何创建一个基本的AJAX引擎，并经由AJAX技术向服务器端发出请求和从服务器端接收响应。为了更好地理解本文中示例，你需要下载本文相应的源码文件。

二、开始

为了进一步抽象我们的AJAX请求并有助于我们以后在不同的应用程序间共享AJAX引擎代码，本文使用了一个我自己创建的AJAX引擎。为了使用这个引擎，我们简单地导入三个JavaScript文件并且向一个名为AjaxUpdater的对象发出请求。然后，由该引擎来负责处理其它任务，包括把响应代理到在该请求中指定的回调方法中。下面的示例展示了我们如何使用这个引擎发出请求以及导入相关的文件：

以下是引用片段：

首先，让我们来讨论JavaScript对象。

三、JavaScript对象

JavaScript以前经常被误解，似乎它主要用于实现客户浏览器端图形效果。其实，JavaScript是一种强有力的语言，特别当它与AJAX以及一个应用程序的服务器端相结合时;但是，即使在客户端，JavaScript也能够实现远比你预料得多的多的功能。面向对象的JavaScript就是一个示例，它能够使我们创建对象，扩展内在对象，甚至能够把我们的对象创建成包以达到更容易的管理之目的。

在本文示例中，我们将创建三个对象：Auto，Car和Wheel。其中，每一个都是简单的对象;在此，我们仅使用它们来展示如何创建一个基本包。

首先，Auto对象被声明为一个新的对象：

以下是引用片段：

var Auto = new Object();

注意，这个Auto对象将用作Car对象的父类。因此，Car对象将成为Auto对象的一个属性，只不过它被分离到另一个文件中以更易于管理(这个概念经常被用于其它面向对象的语言中，但是在JavaScript中却并不经常提起它)。下面是这个Car对象相应的代码：

以下是引用片段：

如你所见，该Car对象是Auto对象的一个子对象—这分明是一种类对象层次结构。这个对象有一个名为color的属性和一个用于设置它的方法。在此，我们把color属性设置为灰色以覆盖掉缺省的白色。当在后面我们串行化该对象时请牢记住这个事实。

下一个对象，Wheel，是Car的一个子对象：

以下是引用片段：

Auto.Car.Wheel = new Object();

Auto.Car.Wheel.color = "#000";

在此，Wheel是一个基本对象，但是它展示了对象层次中的又一个层。这个对象有一个称为color的缺省值为黑色(“#000”)的属性。

下面，让我们来分析一下为什么这些对象如此重要以及我们是如何使用它们提供的简单的属性的。

四、把JavaScript对象串行化为JSON

借助于JSON分析器，我们可以很容易地把刚才创建的JavaScript对象串行化为JSON。首先，我们需要下载该分析器的一个副本，并且要把它添加到文档中。下面是我在本文示例中用于导入该脚本的相应的代码：

以下是引用片段：

我已经把该分析器添加到我的javascript目录，即一个称为utils的子目录下。

下面是最终的包括到其中用于导入适当的JavaScript文件的代码片断：

以下是引用片段：

在导入适当的文件后，我们可以通过把两个div元素和一个onload事件简单地添加到HTML文档中开始串行化。这两个div元素将分别拥有ID：body和loading。其中，这个loading标签将由AJAX引擎使用来指示进度情况，而body标签将用于显示消息。

以下是引用片段：

onload事件相应于body元素并且设置它的innerHTML属性为JavaScript对象(作为一个串行化的JSON字符串)。为了实现这一目的，我在Auto对象上使用了jsonparser.js文件内的toJSONString方法：

以下是引用片段：

这段代码使用了Auto对象及其所有的子对象，并且使用JSON分析器的toJSONString方法把它们串行化为一个JSON字符串。然后，该数据可以被用作服务器端的一种数据交换格式。

你可能还记得，在前面我们曾调用了一个称为setColor的方法来改变Car对象的颜色。当时，我使用它是因为我想向你展示串行化能够在运行时刻的任何点上实现，而且还为了反映出对象中最新的数据。

如果你仔细分析一下onload事件，你会注意到，Car和Wheel对象都包装在方括号内，这些方括号代表了父对象(即Auto)。这意味着，该串行化的JavaScript对象能够在运行时刻被发送到服务器端以存储最新的数据，并且也可以在应用程序启动时从服务器端进行接收以便从数据库中检索多数的当前数据。

最精彩的部分在于，为了创建一种“无缝”的过程，所有与服务器之间实现的数据交换都可以使用JSON技术来实现。

下面，让我们来看一下相同的数据是如何从服务器端接收的，以及它们是如何被使用最新的数据(典型地，来源于一个数据库)串行化为客户端JavaScript对象的。

五、把JSON反串行化为客户端JavaScript对象

在本文中，我简单地把一个静态文件创建为JSON响应，但是在实际开发中，你可以把这些数据存储在一个数据库中并且使用一种服务器端语言返回它。基于这一能力，我们就可以轻松地创建一种强有力的数据交换过程!在前面，我们已经分析了这一串行化过程。凭基本的AJAX体验，你应该能够理解数据是如何被寄送到服务器端的。现在，让我们着手讨论反串行化的问题。首先来看一个针对本文示例提供的静态JSON文件。

这个文件其实是我们在上一节中串行化的数据：

以下是引用片段：

{"Car":{"color":"#333"，"Wheel":{"color":"#000"}}}

作为一个请求JSON文件的示例，当我们点击下列链接时将请求这个串行化的Auto对象：

以下是引用片段：

一旦接收到响应消息，我们的称为displayResponse回调方法就会被激活，然后，我们就能够反串行化并开始使用这些对象：

以下是引用片段：

这是相当激动人心的一部分!一旦我们拥有了该responseText，我们就能够简单地使用JSON分析器中的parseJSON方法来从串行化的数据中重建我们的Auto对象。借助于这个新的Auto对象，我们就可以调用相应的子对象。这个特征允许我们在服务器和客户端来回发送对象—而不必进行大量的分析工作，然而在以前标准的XML响应情况下我们将却必须这样做。这样以来，我们就可以创建出能够基于AJAX技术来保留自身状态的客户端JavaScript对象。（T007）

因为JSON 是 javascript 的一个子集，所以，在javascript 中使用JSON是非常简单的。

js 代码

1. var myJSONObject = {"bindings": [  
2.         {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},  
3.         {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},  
4.         {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}  
5.     ]  
6. };  

在上面的例子中，我们创建了只包含一个成员 "bindings" 的一个对象，bindings 则包含了一个由3个对象组成的数组。这3个对象都包含3个成员："ircEvent"， "method"，"regex"。

在javascript 中， 成员可以通过“点号”来获取。
比如：

js 代码

1. myJSONObject.bindings[0].method  

通过eval() 函数可以将JSON字符串转化为对象。

js 代码

1. var myObject = eval('(' + myJSONtext + ')');  

eval 函数非常快，但是它可以编译任何 javascirpt 代码，这样的话就可能产生安全的问题。eval 的使用是基于传入的代码参数是可靠的假设的，有一些情况下，可能客户端是不可信任的。

如果基于安全的考虑的话，最好是使用一个 JSON 解析器。 一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。

js 代码

1. var myObject = JSON.parse(myJSONtext, filter);  

可选的 filter 参数将遍历每一个value key 值对， 并进行相关的处理。如：

js 代码

1. myData = JSON.parse(text, function (key, value) {       
   1. return key.indexOf('date') >= 0 ? new Date(value) : value;    }); 

stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。

js 代码

1. var myJSONText = JSON.stringifier(myObject);  

这里是一个开源的 JSON parser and JSON stringifier

========

我也翻译过这篇文章

我也用过 DOJO ,现在改用 jQuery了。

#wrap{width:750px;margin:0 auto;background:#FFF;text-align:left;}
/* main */
.MainCont{border:1px solid #b7b7b7;background:#fbfbfb;}

.TopInfo{height:33px;padding-top:2px;line-height:33px;background:#fff;border-bottom:1px solid #f1f1f1;}
.TopInfo .Info{float:left;padding-left:20px;}
.TopInfo .Info strong{color:#c00;}
.TopInfo .PageList{float:right;color:#666;padding-right:16px;}

.BotInfo{height:33px;padding-top:2px;line-height:33px;background:#fff;border-top:1px solid #f1f1f1;}
.BotInfo .Info{float:left;padding-left:20px;line-height:14px;padding-top:11px;}
.BotInfo .Info a:link,.BotInfo .Info a:visited{color:#333;text-decoration:none;}
.BotInfo .Info a:hover{color:#f00;text-decoration:underline;}
.BotInfo .Info img{vertical-align:middle;margin-right:3px;}
.BotInfo .PageList{float:right;color:#666;padding-right:16px;}
.PageList strong{color:#c00;}
.PageList a:link,.PageList a:visited{color:#0b0164;}
.PageList a:hover{color:#f00;}

.Content{width:732px;margin:0 auto;}
.Content .Line_1{clear:both;display:inline-block;}
.Content .Line_2{clear:both;background:#f0f0f0;display:inline-block;}
.Content .box{width:183px;float:left;padding:16px 0 14px;overflow:hidden;}
.Content .box table td{width:183px;height:152px;text-align:center;}
.Content .box table td img{border:1px solid #000;}
.Content .box p{width:160px;margin:0 auto;text-align:center;padding-left:12px;line-height:14px;padding-top:10px;}
-->
</style>
</head>
<body>
<div id="wrap">
<!-- 主内容 begin -->
<div class="MainCont">
<!-- 顶部信息 begin -->
<div class="TopInfo">
    <div class="Info" id="TopInfo">数据读取中...</div>
    <div class="PageList" id="TopPageList">
     &lt;&lt;首页上页&nbsp;&nbsp;&nbsp;<strong>1</strong>&nbsp;&nbsp;&nbsp;下页末页&gt;&gt;
    </div>
</div>
<!-- 顶部信息 end -->

<!-- 图片内容 begin -->
<div class="Content" id="Content">
    <div style="padding:100px 0;text-align:center;">数据读取中...</div>
</div>
<!-- 图片内容 end -->

<!-- 顶部信息 begin -->
<div class="BotInfo">
    <div class="Info"><a href="#">返回页顶</a></div>
    <div class="PageList" id="BotPageList">
     &lt;&lt;首页上页&nbsp;&nbsp;&nbsp;<strong>1</strong>&nbsp;&nbsp;&nbsp;下页末页&gt;&gt;
    </div>
</div>
<!-- 顶部信息 end -->
</div>
<!-- 主内容 end -->
</div>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
// mengjia 070313
var ImmediateData = new Array();//数据
var PageSize = 20; //每页个数
var Page = 1; //当前页码

getData("http://news.sina.com.cn/news/z/qglh2008/pic/0313.xml",analyzeData); //读取数据 getData(url,处理方法)

function GetObj(objName){
if(document.getElementById){
    return eval('document.getElementById("' + objName + '")');
}else{
    return eval('document.all.' + objName);
}
}

//XML 数据读取部分
var XmlHttp;
function getData(url,funcName) {
if (window.XMLHttpRequest) {
    XmlHttp = new XMLHttpRequest()
     if (XmlHttp.overrideMimeType) {
              XmlHttp.overrideMimeType('text/xml');
           }
    } else if (window.ActiveXObject) {
    XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XmlHttp.onreadystatechange = funcName;
XmlHttp.open("GET", url, true);
XmlHttp.send(null);
}
function analyzeData() { //数据xml处理程序
    if (XmlHttp.readyState == 4) {
     if (XmlHttp.status == 200) {
     var xmldoc = XmlHttp.responseXML;
     var datas=xmldoc.getElementsByTagName('data');
     ImmediateData = new Array;
     for(var iData = 0; iData < datas.length; iData++) {
      ImmediateData.push(new Array(datas[iData].getAttribute("img"),datas[iData].getAttribute("title"),datas[iData].getAttribute("url")));
     }
     OutHtml();
    }else{
     alert('数据读取出错:\n\n' + XmlHttp.statusText + '');
     OutoError();
    }
}
}

function GotoPage(num){ //跳转页
Page = num;
OutHtml();
}

function OutoError(){ //显示失败状态
GetObj("TopInfo").innerHTML = '读取失败';
GetObj("Content").innerHTML = '<div style="padding:100px 0;text-align:center;">读取失败</div>';
}

function OutHtml(){ //输出HTML
if(ImmediateData.length == 0){OutoError();return;}
var Pages = Math.floor((ImmediateData.length - 1) / PageSize) + 1;
if(Page < 1)Page = 1;
if(Page > Pages)Page = Pages;
var Temp = "";
var BeginNO = (Page - 1) * PageSize + 1; //开始编号
var EndNO = Page * PageSize; //结束编号
if(EndNO > ImmediateData.length) EndNO = ImmediateData.length;
if(EndNO == 0) BeginNO = 0;

if(!(Page <= Pages)) Page = Pages;
GetObj("TopInfo").innerHTML = "共有<strong>" + ImmediateData.length + "</strong>张图片&nbsp;&nbsp;当前显示 第" + BeginNO + "-" + EndNO + "篇";

//分页
if(Page != 1){Temp =    '<a href="javascript:void(0)" onclick="GotoPage(1)">&lt;&lt;首页</a> <a href="javascript:void(0)" onclick="GotoPage(' + (Page - 1) + ')">上页</a>&nbsp;'}else{Temp = '&lt;&lt;首页上页&nbsp;'};

//完美的翻页列表 ：）
var PageFrontSum = 5; //当页前显示个数
var PageBackSum = 5; //当页后显示个数

var PageFront = PageFrontSum - (Page - 1);
var PageBack = PageBackSum - (Pages - Page);
if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多，前剩余空位给后
if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多，后剩余空位给前
var PageFrontBegin = Page - PageFrontSum;
if(PageFrontBegin < 1)PageFrontBegin = 1;
var PageFrontEnd = Page + PageBackSum;
if(PageFrontEnd > Pages)PageFrontEnd = Pages;

if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';
for(var i = PageFrontBegin;i < Page;i ++){
    Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + i + ')">' + i + '</a>';
}
Temp += ' <strong>' + Page + '</strong>';
for(var i = Page + 1;i <= PageFrontEnd;i ++){
    Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + i + ')">' + i + '</a>';
}
if(PageFrontEnd != Pages) Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + (Page + 10) + ')" title="后10页">..</a>';

if(Page != Pages){Temp += '&nbsp;&nbsp;<a href="javascript:void(0)" onclick="GotoPage(' + (Page + 1) + ')">下页</a> <a href="javascript:void(0)" onclick="GotoPage(' + Pages + ')">末页&gt;&gt;</a>'}else{Temp += '&nbsp;&nbsp;下页 末页&gt;&gt;'}

GetObj("BotPageList").innerHTML = Temp;
GetObj("TopPageList").innerHTML = Temp;

//图片数据
var line = 1;
var sum = 0;

if(EndNO == 0){
    GetObj("Content").innerHTML = '<div style="padding:100px 0;text-align:center;">暂无图片</div>';
    return;
}
Temp = '<div class="Line_' + line + '">\n';
for(var i = BeginNO - 1;i < EndNO;i ++){
    if(sum % 4 == 0 && sum != 0){
     line++;
     line = line == 3?1:line;
     Temp += '<div class="clearit"></div>\n</div>\n<div class="Line_' + line + '">\n';
    }
    Temp += '<div class="box">\n';
    Temp += '<table cellspacing="0"><tr><td><a href="' + ImmediateData[i][2] + '" target="_blank"><img src="' + ImmediateData[i][0] + '" alt="' + ImmediateData[i][1] + '" /></a></td></tr></table>\n';
    Temp += ' <p><a href="' + ImmediateData[i][2] + '" target="_blank">' + ImmediateData[i][1] + '</a></p>\n'
    Temp += '</div>\n'
    sum ++;
}
Temp += '<div class="clearit"></div>\n</div>\n';

GetObj("Content").innerHTML = Temp;
if(navigator.appName == 'Microsoft Internet Explorer')setTimeout('ChrImg()',500);
}

function ChrImg(){ //解决IE下图片渲染问题
var ImageArray = GetObj("Content").getElementsByTagName("img");
for(var i = 0;i < ImageArray.length;i++){
    if(!ImageArray[i].complete) ImageArray[i].src = ImageArray[i].src;
}
}

//--><!]]>
</script>
</body>
</html>

效果

     目前，许多动态Web网站的内容数据都存放在数据库或数据文件中。如某个网站的会员信息，商品信息等。对于Web程序开发人员来说，如果要想把有用的信息从数据库中提取出来，传统的方法是在服务器端编写脚本程序（如VBScript、JavaScript、CGI、ASP、Perl、JSP等等），通过对数据库执行SQL查询得到相关记录，然后把查询结果组织成HTML页面返回给客户端，用户使用浏览器观察最终结果。为了提高系统服务的灵活性、可扩展性，使服务对象范围更广，许多商业网站都尽可能地把商务规则、原始数据和表现形式，即执行功能的代码，存放数据的数据库，显示数据的页面单独的划分出来，做成相互独立的服务。HTML那种包含数据并制定相应的显示样式，该方式显然不合乎这种需求。

      因此，把从数据库提取出来的数据，即原始数据存放在XML文档中（基本不变，显示量大的公有数据），使用样式单文件（XSL）显示内容是XML技术适合于电子商务的优势所在。但从本质上来说，XSL技术不是面向数据显示的，它是一种格式转换技术，在显示手段和方式上都远不及HTML那样丰富。并且从本质来说，XSL的显示样式方式，最终还是利用了HTML模板进行显示，只不过中间多了一个转换罢了。对编程人员来说，一种较为理想的方案是把HTML和XML两种技术直接相结合起来，优势互补，使真正的原始数据在能够保持本来意义和结构的同时，还能充分利用HTML那千变万化的显示技巧。

      XML数据岛就是这种技术融合的产物，它使用<XML>标签把XML数据直接嵌入到HTML页面中，从而实现了二者的优势互补。用Internet Explorer 5.0版本以上的浏览器，非正式的<XML>标记可用于创建XML数据岛。

      当我们在HTML文档中通过使用XML标记来嵌入XML数据时，就在HTML文档中形成一个XML数据岛(Data Island)。数据岛是指存在于HTML页面中的XML数据。数据岛允许你在HTML页面中集成XML，对XML编写脚本，不需要通过脚本或<OBJECT>标签读取XML。几乎所有能够存在于一个结构完整的XML文档中的东西都能存在于一个数据岛中。包括处理指示、DOCTYPE声明和内部子集。这里面需要我们注意的是，XML文档中的设置编码的字符串不能放在其中。

      我们可以利用XML元素来创建数据岛，数据岛就是被HTML页面引用或包含的XML数据，XML数据可以包含在HTML文件内，也可以包含在某外部文件内，利用XML数据岛可以让我们免除编写复杂脚本的麻烦。DOM可对XML文档进行解析，文档中的元素、实体、属性等所有个体都可以用对象模型表示，整个文档的逻辑结构类似一棵树，生成的对象模型就是树的节点，每个对象同时包含了方法和属性，DOM提供了许多查找节点的方法。利用DOM，开发人员可以动态地创建XML、遍历文档、增加（删除/修改）文档内容，DOM提供的API与编程语言无关，所以对一些DOM标准中没有明确定义的接口，不同解析器的实现方法可能会有所差别。

      Web服务器与客户机之间的数据传递方式有三种：HTML页面、XML文档以及XML数据岛。采用数据岛作为交互手段，不仅可以使数据具备一定的语义信息，同时还能保持HTML原有的一些特色，如利用用户端脚本程序实现动态信息交换等，可以在客户端对XML里面的数据进行操作。综合了使用XML文档和HTML文档传输数据的优点。

<html>

<head>

<script type="text/javascript">

//页面内容全部载入以后载入XML数据

var xmlDoc

window.onload = function (){

// code for IE

if (window.ActiveXObject){

  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

  xmlDoc.async = false;

  xmlDoc.load("Data.xml");

  getXML()

}

// code for Mozilla, etc.

else if (document.implementation && document.implementation.createDocument){

  xmlDoc = document.implementation.createDocument("","",null);

  xmlDoc.load("Data.xml");

  xmlDoc.onload = getXML

}

else{

  alert('您的浏览器不支持JavaScrpit，XML数据将不能显示。');

}

}

function getXML(){

document.getElementById("xmlData_Name").innerHTML = xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue

document.getElementById("xmlData_Email").innerHTML = xmlDoc.getElementsByTagName("email")[0].firstChild.nodeValue

document.getElementById("xmlData_Address").innerHTML = xmlDoc.getElementsByTagName("address")[0].firstChild.nodeValue

document.getElementById("xmlData_Address_1").innerHTML = xmlDoc.getElementsByTagName("address")[1].firstChild.nodeValue

}

</script>

</head>

<body>

<h1>HTML显示XML示例：</h1>

<b>姓名：</b> <span id="xmlData_Name"></span><br />

<b>邮箱：</b> <span id="xmlData_Email"></span><br />

<b>地址：</b> <span id="xmlData_Address"></span>

<hr />

<b>地址：</b> <span id="xmlData_Address_1"></span>

</body>

</html>

下面是XML文件内容【Data.xml】：

<?xml version="1.0" encoding="gb2312" ?>

<date>

<addr>

<name>紫茉莉.Net</name>

<email>Zimoli.Net@QQ.com</email>

<address><![CDATA[这里是可以是HTML内容，<a href="#">这里是个链接。</a>]]></address>

</addr>

<addr>

<name>流行孤单</name>

<email>Zimoli.Net@Gmail.com</email>

<address><![CDATA[这里是第二条XML记录的内容。</a>]]></address>

</addr>

</date>

book.xml

<?xml version="1.0" encoding="GB2312" standalone="yes"?>
<书籍列表>
<计算机书籍>
<书名>Spring2.0宝典</书名>
<作者>李刚</作者>
<价格>79.00</价格>
<简要介绍>
该书详细介绍了Spring2.0的用法
</简要介绍>
</计算机书籍>
<计算机书籍>
<书名>轻量级J2EE企业开发实战</书名>
<作者>李刚</作者>
<价格>63.00</价格>
<简要介绍>
该书主要介绍了一种流行的轻量级企业应用架构
</简要介绍>
</计算机书籍>
<计算机书籍>
<书名>Ajax宝典</书名>
<作者>李刚</作者>
<价格>76.00</价格>
<简要介绍>
该书全面介绍了Ajax的相关技术
</简要介绍>
</计算机书籍>
</书籍列表>

display.html

Html代码

<html>
<body>
<xml src="book.xml" id="xmldso" async="false"></xml>
<table id="tb2" datasrc="#xmldso" width="100%" border="1" datapagesize="2" >
<thead>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>简要介绍</th>
</thead>
<tr align="left">
<td><span datafld="书名"></span></td>
<td><span datafld="作者"></span></td>
<td><span datafld="价格"></span></td>
<td><span datafld="简要介绍"></span></td>
</tr></table>
<INPUT TYPE="button" VALUE="第一页" ONCLICK='document.getElementById("tb2").firstPage();'>
<INPUT TYPE="button" VALUE="前一页" ONCLICK='document.getElementById("tb2").previousPage();'>
<INPUT TYPE="button" VALUE="后一页" ONCLICK='document.getElementById("tb2").nextPage();'>
<INPUT TYPE="button" VALUE="最后一页" ONCLICK='document.getElementById("tb2").lastPage();'>
</body>
</html>

XML 的全名是 eXtenxible Markup Language （可以延伸或扩展的标记语言），它的语法类似 HTML ，都是用标签来描述数据。 HTML 的标签是固定的，我们只能使用、不能修改； XML 则不同，它没有预先定义好的标签可以使用，而是依据设计上的需要，自行定义标签。所以在电子商务的网络时代，用 XML 来组织数据，再用 HTML 页面来显示，将是设计网页的新方向。

　　本文主要对两种在 HTML 中存贮并显示 XML 文档数据的策略（数据绑定、 DOM ）进行探讨。

一、 数据绑定（ Data Binding ）技术

　　数据绑定技术适用于结构规则的 XML 文档，它对 XML 文档的数据用类似于关系数据库的技术进行处理。

　　例如，有一个关于产品目录的 XML 文档（ product.xml ）结构如下：

　　　……

　　　　<CATALOGUE>

　　　　　<PRODUCT InStock=”yes”>

　　　　　　<PRODUCTID>00001</PRODUCTID>

　　　　　　<PRODUCTNAME Supplier=”fuller”>

　　　　　　　　　　football </PRODUCTNAME>

　　　　　　<PRICE> 50</PRICE>

　　　　……

　　　　　</PRODUCT>

　　　　……

　　　　</CATALOGUE>

　　按下面介绍的两个步骤，可将 XML 文档和 HTML 文档绑定，并在 IE5 中显示 XML 文档的数据。

　　1． 把一个 XML 文档连接到一个 HTML 文档中

　　方法一：将整个 XML 文档插入至 HTML 文档中，其形式如下：

　　　　　　<HTML>

　　　　　　<HEAD>

　　　　　　　<TITLE> product decription</TITLE>

　　　　　　</HEAD>

　　　　　　<BODY>

　　　　　　　<XML ID=”product”>

　　　　　　　<?XML version=”1.0”?>

　　　　　　…… ‘ 将以上的 product.xml 文档的内容插入至该处

　　　　　　　</XML>

　　　　　　……

　　　　　　<BOLY>

　　　　　　</HTML>

　　　方法二：只将一个对 XML 文档的引用插入至 HTML 文档中，其形式如下：

　　　　　　<HTML>

　　　　　　<HEAD>

　　　　　　　<TITLE> product decription</TITLE>

　　　　　　</HEAD>

　　　　　　<BODY>

　　　　　　　<XML ID=”product” SRC=”product.xml”> </XML> ‘ 用 src 指出引用的 XML 文档源

　　　　　　　……

　　　　　　</BODY>

　　　　　　</HTML>

　　　方法二的好处在于：它将 XML 文档的数据和 HTML 的显示格式分开，便于用户进行维护。而且，多个 HTML 文档可以共享一个 XML 文档。

　　当 IE5 打开一个 HTML 文档时，其内置的 XML 处理器会读取和分析页面中已连接的 XML 文档，然后产生一个数据源对象（ DSO ，全称是 Data Source Object ），以便存贮和读取数据。 DSO 在存贮 XML 文档中的数据时，会将元素解释成记录和字段的集合，并自动抽取 XML 元素的数据和处理所有的显示细节。

　　2 ．将标准的 HTML 元素（例如 TABLE 、 SPAN 等）和 XML 元素绑定

　　方法一：表数据绑定，即将 HTML 的 TABLE 元素和 XML 数据绑定，以便在 IE5 中用表格的形式一次性地显示整个 XML 文档的数据。

　　其形式如下：

　　　　　……

　　　　　<TABLE DATASRC=”#PRODUCT” BORDER=”1” ……>

　　　　　　<THEAD>

　　　　　　　<TH> productid</TH>

　　　　　　　……

　　　　　　</TH>

　　　　　</THEAD> ‘ 显示表格的标题

　　　　　<TR ALIGN=”center”>

　　　　　　<TD><SPAN DATAFLD=”productid”></SPAN></TD> ‘ 在表格单元格中显示 productid 的内容

　　　　　　……

　　　　　</TR>

　　　　</TABLE>

　　　　　……

　　方法二：单一记录数据绑定，即将 HTML 元素（如 SPAN 、 BUTTON 或 LABEL 等非表格元素）和 XML 文档中的一个单一的字段进行绑定，以便在 IE5 中一次只显示一条记录的内容。此时，为了浏览方便，最好在页面中增加关于记录的导航按钮。

　　其形式如下：

　　　……

　　　<SPAN STYLE=”font-style:italic”> ProductID</SPAN> ‘ 显示标题

　　<SPAN DATASRC=”#product” DATAFLD=”productid”

　　　　　STYLE=”font-weight:bold”></SPAN> ‘ 显示 productid 的内容

　　……

　　<BUTTON ONLICK=”product.recordset.moveprevious();

　　　　　　　　　　　　if (product.recordset.bof)

　　　　　　　　　　　　product.recordset.movenext()”>

　　　　　　　　　　　　&lt;back;

　　</BUTTON> ‘ 产生一个向前导航的按钮

　　……

　　注意：当用数据绑定技术显示 XML 文档数据时，如果 XML 元素中有参数，则 DSO 会将该元素处理成层次型的记录。例如： product.xml 文档中的“ PRODUCTNAME ”元素有一个“ Supplier ”参数，则 DSO 会将该元素处理成下面的形式：

　　<PRODUCTNAME>

　　　<Supplier> fuller</Supplier>

　　　<$TEXT>football</$TEXT>

　　</PRODUCTNAME>

　　此时，必须用 $TEXT 作为字段名来读取“ football ”数据，其形式如下：

　　……

　　　　<TABLE DATASRC=”#product” DATAFLD=”productname”>

　　　　<TR>

　　　　　　<TD><SPAN DATAFLD=”$TEXT”></SPAN></TD>

　　　　　　<TD><SPAN DATAFLD=”Supplier”></SPAN></TD>

　　　　</TR>

　　　　<TABLE>

　　……

二、 DOM 技术

　　1 ． DOM 技术的特点

　　DOM 是 XML Document Object Model 的简称。它是 XML 文档和 HTML 文档的接口，其中包含一系列代表 XML 文档不同部件的程序对象。利用这些对象的属性和方法，并使用脚本语言（如 VBScript 或 JavaScript 等）编制成脚本后，就可以在一个 HTML 页面中显示 XML 文档的数据。虽然利用 DOM 技术比数据绑定技术复杂，但它可以处理及显示结构规则或不规则的 XML 文档中任意部件（如元素、参数、处理指示、注释、实体和标记等）的数据内容，

　　和数据绑定技术类似，要使用 DOM 技术，必须首先对 XML 文档源进行引用：

　　<XML ID=”product” SRC=”product.xml”></XML> ‘ 对 XML 文档源的引用

　　接着，就可以利用 DSO 的 XMLDocument 成员使用 DOM ：

　　Document=product.XMLDocument

　　作为 W3C 的标准接口规范，目前， DOM 由三部分组成，包括：核心（ core ）、 HTML 和 XML 。核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何 HTML 和 XML 文档中的数据。 HTML 接口和 XML 接口两部分则是专为操作具体的 HTML 文档和 XML 文档而提供的高级接口，它们可以使得对这两类文件的操作更加方便。

　　当 DOM 对 XML 文档进行分析之后，不管这个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树（如图 1 ）。在这棵节点树中，有一个名为 Document 根节点，所有其他的节点都是根节点的后代节点。 DOM 实际上是利用对象来把文档模型化，这些模型不仅描述了文档的结构，还定义了模型中对象的行为。换句话说，图 1 中的节点不是数据结构，而是对象。 DOM 接口利用对象中包含的方法和属性，就可以访问、修改、添加、删除、创建树中的节点和内容。

　　在 DOM 接口规范中，有四个基本的接口： Document ， Node ， NodeList 以及 NamedNodeMap 。其中， Document 接口是对文档进行操作的入口。它是从 Node 接口继承过来的。 Node 接口是其他大多数接口的父类，象 Documet ， Element ， Attribute ， Text ， Comment 等接口都是从 Node 接口继承过来的。 NodeList 接口是一个节点的集合，它包含了某个节点中的所有子节点。 NamedNodeMap 接口也是一个节点的集合，通过该接口，可以建立节点名和节点之间的一一映射关系，从而利用节点名就可以直接访问特定的节点。

图1

　　2 ．利用 DOM 对 XML 文档的数据进行处理

　　（1） 对 XML 某个元素的数据进行处理

　　其形式如下：

　　productid.innerText=DocumentElement.childNodes(0).text; ‘ 取得 productid 的数据，并将它赋给 HTML SPAN 元素的 innerText 属性

　　<SPAN ID=”productid” STYLE=”font-weight:bold”></SPAN> ‘ 显示 productid 的数据

　　（2） 对 XML 文档中同名元素的所有数据进行处理

　　其形式如下：

　　Nodelist=Document.getElementsByTagName(“productname”); ‘ 取得所有 productname 的数据，并形成一个 Nodelist 集合

　　For(i=0;i<Nodelist.length;++i)

　　ResultHTML+=Nodelist(i).xml+”\n\n”;

　　ResultDiv.innerText=ResultHTML; ‘ 用循环语句显示所有 productname 的数据

　　（3） 对 XML 元素的参数数据进行处理

　　其形式如下：

　　NamedNodeMap=Document.DocumentElement.childNodes(0).attributes; ‘ 取得所有 product 的参数，并形成一个 NamedNodeMap 集合

　　For(i=0;i<NamedNodeMap.length;++i)

　　Alert(NamedNodeMap.getNameItem(i).nodeValue); ‘ 用循环语句显示所有 product 参数的数据

　　如果在参数中包含有实体，则应采用下列形式对 XML 的实体和实体中的标记进行访问：

　　Attribute=Document.DocumentElement.childNodes(0).attributes(0); ‘ 取得 product 元素的参数

　　If(attribute.datatype==”entity”) ‘ 检测参数的类型是否为 entity 类型

　　Entity=Document.doctype.entities.getNameItem(attribute.nodeValue); ‘ 取得 XML 文档的 DTD 声明中的某个实体的名字

　　DisplayText=Entity.attributes.getNameItem(“SYSTEM”).nodeValue; ‘ 取得该实体中 system 的源文件数据

　　NotationName=Entity.attributes.getNameItem(“NDATA”).nodeValue; ‘ 取得该实体中 NDATA 标记的名字

三、结束语

　　目前，有三种途经可以在 IE5 中显示 XML 文档的数据：样式单、数据绑定及 DOM 。样式单的特点是单独设计一个用于处理显示格式的样式单（ CSS 样式单或 XSL 样式单），然后在 XML 文档中对样式单进行引用；而后面两种技术的特点是利用 HTML 文档对 XML 存贮的数据进行显示，这样，可以将 XML 和 HTML 相结合，充分利用 XML 和 HTML 各自的优点。

　　参考书目：

　　（1） Natanya Pirts 编 . XML 轻松进阶 . 电子工业出版社 . 2000 年月 1 月

　　（2） Jake Sturm 编 . XML 解决方案 . 北京大学出版社 . 2001 年 4 月

l        采用web标准的目的是：
提供最多利益给最多的网站用户
确保任何网站文挡都能够长期有效
简化代码、降低建设成本
让网站更容易使用，能适应更多不同用户和更多网路设备
当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。
对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。

l        对网站浏览者的好处：
文件下载与页面显示速度更快；
内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；
内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）
用户能够通过样式选择定制自己的表现界面
所有页面都能提供适于打印的版本

l        对网站所有者的好处：
更少的代码和组件，容易维护
带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两TB字节（terabytes）的带宽。
更容易被搜寻引擎搜索到
改版方便，不需要变动页面内容
提供打印版本而不需要复制内容
提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。

2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。

问:什么是XHTML?

答:XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题:如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是:需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。

问:为什么XHTML 1.0相对HTML 4.0独立发展?

答:并不是这样。XHTML恰恰就是HTML 4.0的重新组织，(确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。

问:XHTML 1.0如何实现XML标准?

答:XHTML就是一种XML应用。它采用XML的DTD文件格式定义，并运行在支持XML的系统上。这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签(tags)，他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。

2、与HTML相比XHTML有什么特点?

(1)XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点:不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML;由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML;数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。

(2)XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。

(3)使用XHTML的另一个优势是:它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。

(4)XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。。

(5)XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。

(6)在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。

==================

这就是做WEB的基本流程。
不过盾你上面说的，你的意思是做界面的基本流程
首选把需求分析做好。有那些东西。美工知道后。对显示模块进行画图设计。
然后页面设计师通过div+css用网页的形式表示出来。如果要有动态效果还需要懂js
程序员在根据页面进行编码开发。
最后完了集成测试。维护就不说了

·   设计师负责平面效果设计

·   程序员负责系统开发

·   客户提出需求验收系统

·   项目经理负责统筹全局

　　这里就不谈需求分析细节，和与客户谈判的细节了，假定需求已经确定。
　　web标准是结构和表现相分离的，所以设计师和程序员在项目经理需求确定之后，可以并行开发，打破了以往的，平面效果确定系统才能开发的低效率开发流程。什么样的系统都可以拥有MVC式系统的开发效率。

　　下面是一个流程图

需求确定，系统规划完成之后：
　　程序员先确定xhtml然后进行UI设计，或者UI设计完成后确定xhtml结构。
当xhtml结构确定之后：
　　CSS的制作和程序的开发同步进行
CSS和程序开发完成之后：
　　CSS和xhtml进行连接，制作完成

　　至于表现层，可以放在xhtml结构开发之后进行，也可以在程序开发阶段完成，比如AJAX，这是程序员的工作，程序接口他们控制好就行。
　　当然这只是一个思考，之间的衔接过程出现的问题可能很多，如果要推广还需要长时间的磨合。

     在整个开发过程中，每个人都必须对标准有一定的了解，结构的合理性取决于项目经理和程序员，艺术效果取决于ui设计师，浏览器兼容性取决于CSS制作者，设计师也需要对CSS有一定的了解。DOM不能破坏CSS的结构。

     根据朋友们的评论，对开发流程进行一些修改，web用户界面和xhtml结构必须一个在先一个在后，在现阶段有很少的人能根据结构预测界面，或者界面预测结构，或者界面设计完成确定结构，或者根据结构设计界面。

HTML有2种路径的写法：相对路径和绝对路径。

HTML相对路径(Relative Path)

同一个目录的文件引用

如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。

我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "index.html">这是超连接</a>

如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "../index.html">这是超连接</a>

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "../../index.html">index.html</a>

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "../wowstory/index.html">index.html</a>

如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "html/index.html">这是超连接</a>

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "html/tutorials/index.html">这是超连接</a>

HTML绝对路径(Absolute Path)

大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.ajaxstu.com/img/photo.jpg来确定文件位置的方式也是绝对路径。

HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。

假设你注册了域名http://www.ajaxstu.com，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。

假设你在www根目录下放了一个文件default.asp，这个文件的绝对路径就是： font color="#0058db">http://www.ajaxstu.com/default.asp。

假设你在www根目录下建了一个目录叫archives，然后在该目录下放了一个文件2886.html，这个文件的绝对路径就是http://www.ajaxstu.com/archives/2886.html。

body
{ }{
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    height: 100%;
        width: 100%;
    overflow: auto;
    text-align: center;
    display: block;
}
/**//*---body我是作为最顶层容器的---所以它具备了我需要的所有东西，实现的效果是居中，我加上了display: block;虽然这个是一个默认属性，但是我们不能保证所有浏览器都是默认，（如果是所有浏览器都默认的，我自己写个浏览器的默认为none的给你耍）*/
#body_Div
{ }{
    margin: 0px auto;
    padding: 0px;
    text-align: left;
    width: 1003px;
    height:100%;
    overflow:auto;
}
/**//*这个是核心层，多有的元素基本都是在这个层里的，这个层也具备了我想要的属性，text-align: left; 因为在上层我把文本对齐成为居中，所以这个层我要把它还原为左对齐margin: 0px auto; 一般IE的CSS编写者不会有这个auto值的，在IE会自动，但是在FF如果少了auto你将会发现FF里你的核心部分不是居中的。所以要做到通用，我们就必须要加上auto值，IE也支持auto值*/

第二：浮动对象，都拥有独立的父DIV；关于这点。。有意见的人可能不少，持有的观点就是，“你这样做只会令DIV过分的多，过于复杂”，其实，我也不想这样做，但是- -！IE对于浮动对象的{margin，padding}存在BUG所以为了减少一切可能的出错，我唯有多花费一点代码，说实在的我只是想它更健康。这个父DIV主要作用其实就是令到内部浮动对象更可控制，这个父DIV就是一个单纯的容器DIV

第三：所有的浮动都需要闭合；这个有经验的人都知道。。用完浮动你肯定需要把它闭合掉的，不闭合，可能不同浏览器在解析的时候会把你的浮动变成向下默认，（可以这样解析：就是元素内部的子元素都默认具有浮动属性）

第四：一个行向浮动如果超过3个那么请使用UL来实现浮动

第五：灵活使用类选择，我个人的做法是，所有的id选择器都是用于布局的，类选择器都是用于呈现效果的，这样做的好处就是，当你想要的效果出现问题的时候，更快速地找到错误。这个是我有意识的把“架构”和“内容”分离。

流行的 JavaScript 库不胜枚举，jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富，加上它们的插件，几乎能胜任任何工作，然而这是有代价的，这些库往往导致你的网页尺寸臃肿。在某些场合，如果你只想完成特定的工作，可以使用一些功能更专一的轻量库，本文介绍了40个非常出色的轻量级 JavaScript 库。

这是本文的第一部分，第二部分请参阅40 个轻量级 JavaScript 库（下）。

1. 表单相关

wForms
一个低调的开源项目，简化了绝大多数常用 JavaScript 表单功能，包含可以直接使用的表单验证功能，另外，还包含强大的表单同步以及表单条件判断功能。

Validanguage
又一个低调的 JavaScript 表单验证框架。它拥有集成逻辑，一些设置可以针对全局，单个表单或单个对象。提供两个API，集成 AJAX 支持，缓存，以及回调函数。它提供类似 HTML 的 API 语句，以及面向对象的 JavaScript API 。

LiveValidation
一个轻量的表单验证库。除了传统的验证功能，还提供实时验证，可以一边输入一遍验证。Ruby on Rails 用户可能会发现这个库非常好用，因为他们的命名规则和参数十分近似。该库既有独立版本，又有一个 Prototype 版本。

yav
一个强大，灵活，可扩展的表单验证库。支持各种场合，从简单的如日期，电子邮件地址以及整数的验证，到复杂的，如正则表达式。内置 AJAX 支持，输出的错误消息可以定位到对象级。

qForms
处理表单的整套方案。功能包括各种验证规则，防止多次发布的机制，以及锁定或解锁制定输入框。

formreform
不基于 table 的多栏设计向来是一个挑战。这个微型库将传统的表单变成漂亮的多栏形式。

2. 动画相关

$fx()
一个用来让 HTML 对象运动的轻量库。你可以在一个时间轴上改变任何 CSS 属性，对于复杂动画，你可以将各种效果结合起来，将对象分组，让它们并行运动。

JSTweener
一个生成中间帧的 JavaScript 库，它的 API 类似著名的中间帧引擎 Tweener。你可以指定动画时间，定义切换效果以及时延。在几乎任何点都可以触动事件。

Facebook Animation
一个强大的，用来创建可定制的，基于 CSS 的动画。在 Facebook 动画中，几行代码就可以改善 UI。语法和 FBJS （用于 Facebook 的库）一样。

FX
一个语法类似 YUI 的轻量 JavaScript 库，可以为几乎任何 CSS 属性创建中间帧。支持颜色和滚动动画，为对象设置 to 和 from 值就可以了。

3. 视觉与图形效果

JS charts
支持柱状图，圆饼图以及简单的曲线图。直接将这个库插入网页，然后从 XML 文件或 JavaScript 数组变量调用数据。PNG 格式，兼容所有主要浏览器。

Canvas 3D JS Library (C3DL)
C3DL 使 3D 程序的编写变得简单。提供一套数学，场景与 3D 对象类，可以直接在浏览器中开发 3D 内容，不需要很深的 3D 知识。

Processing.js
这是 Processing 语言在 JavaScript 的移植。2D输出功能丰富。提供了绘图，色彩处理，字体，对象等处理函数。

Rapha?l
一个让人惊叹的 JavaScript 库，可以在 Web 上实现矢量图。使用 SVG, VML 创建的图形可以被更改或绑定事件。功能极其丰富，包括旋转，动画，缩放等。

ImageFX
该 JavaScript 库为图片添加效果，如虚化，锐化，浮雕，加亮等。ImageFX 使用画布对象实现这些效果，兼容所有主流浏览器。这个库非常容易使用，只要将 .js 库文件插入网页，调用那些函数即可。

Pixastic
Pixastic 使用 HTML5 画布对象，允许对原始像素进行操作。效果包括去饱和度，灰度级，反转，亮度，对比度调整，色调，饱和度调整，以及浮雕，虚化等效果。因为用到了 HTML 5 的画布对象，因此还无法兼容所有浏览器。

Reflection.js
一个很低调的 JavaScript 自动实现倒影效果。倒影的高度，透明度可以调整。支持所有主流浏览器，文件尺寸小于5K。

4. 数据库

Taffy DB
一个 JavaScript 库，可以看作浏览器中的 SQL Server，或高级数组管理器。在使用了 AJAX 的程序中，可以用作数据库层，可以创建，读取，编辑，删除数据，使用循环，排序以及高级查询。

ActiveRecord.js
这个库支持 Google Gears 以及 Chrome，Aptana Jaxer, Adobe AIR 以及任何支持 HTML 5 SQL 细则的平台（目前有 Webkit 以及 iPhone）。可以自动创建表，验证和同步数据。

http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K742.aspx

流行的 JavaScript 库不胜枚举，jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富，加上它们的插件，几乎能胜任任何工作，然而这是有代价的，这些库往往导致你的网页尺寸臃肿。在某些场合，如果你只想完成特定的工作，可以使用一些功能更专一的轻量库，本文介绍了40个非常出色的轻量级 JavaScript 库。

这是本文的第二部分，第一部分参见40 个轻量级 JavaScript 库 （上）。

5. 字符串与数学函数

Date.js
和日期打交道不是件容易事，有很多格式要处理。Datejs 可以很好地处理简单或复杂的日期函数。可以将日期解析出诸如“Next thursday”，“+2 years”一类的格式，也支持所有日期形式，如 2009.01.08, 12/6/2001。

Sylvester
一个处理矢量和点阵的数学 JavaScript 库，包含多维矢量和点阵建模类，以及在3D空间的一些模型。

Pretty Date
一个很出色的 JavaScript 库，用一种很漂亮，很友好的方式显示日期，如下图所示。

XRegExp
JavaScript 中的 RegExp 对象已经支持正则表达式，XRegExp 增加了更多未来浏览器可能包含的功能（ECMAScript 4 - ES4）。该库对 RegExp 对象进行缓存，重用并增加了众多新功能。

JavaScript URL Library
一个用来处理 URL 的 JavaScript 库，可以对 URL 中的任意部分进行处理。

6. Fonts

typeface.js
这个库可以让你在网页中使用任意字体，但和 sIFR 以及 FLIR 这些基于 Flash 的方案不一样，typeface.js 100% 基于 JavaScript，只需将你的字体文件上传到一个基于 Web 的生成器那里，再将生成的 JavaScript 文件下载回来包含到网页中即可。

Cufón
和 typeface.js 很相像，Cufón 也可以让你在网页中使用任意字体，同样，它也是使用一个生成器，将字体转换成 VML，将生成的 .js 文件包含到网页即可。

7. 调试与记录

Blackbird
人们经常使用 Alert() 调试 JavaScript 程序，Blackbird 提供了一个漂亮的控制台记录，查看，过滤程序的运行。

NitobiBug
基于浏览器的跨浏览器 javaScript 对象记录与检查工具。

Firebug Lite
目前最好的 JavaScript 调试工具非 Firebug 莫属，然而该工具只支持 FireFox，将 Firebug Lite .js 文件插入你的网页，就可以在所有浏览器都实现 FireBug 功能。

8. 其它

swfobject
这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代码，并探测用户播放器版本。如果用户版本不支持，会显示备用内容。

sorttable 与 dragtable
不管你喜欢与否，table 仍然是最好的表现数据的方式，但可以更好地利用。sorttable 可以让表格数据排序，只需在 table 上加一个 class="sortable" 标志，还可以排除指定的栏。dragtable 让表格的栏可以拖动，在表格上加上 class="dragable" 标志即可，这两个类可以结合起来使用，只需加上 class="sortable dragtable" 即可。

DD_roundies 与 DD_belatedPNG
DD_roundies 可以不依赖图片实现圆角功能，只面向 IE， 通过 VML 实现，其它浏览器会被略过，因为那些浏览器本身支持 CSS 圆角。

DD_belatedPNG 是为了解决 IE6 对 PNG 支持不好问题而开发的，不管 PNG 图片用于 src 还是 background-image，DD_belatedPNG 都能提供修补。

Custom JavaScript Dialog Boxes
一个只有 4.5K 的轻量 JavaScript 库，可以创建用户定制对话框，可显示4种类型的消息框，alerts, warnings, prompts, success。可以设定消息框标题，内容，以及过多长时间显示。

GameJS
GameJS 是微软的 XNA 游戏框架在 JavaScript 上的移植，使用 canvas 对象作为输出设备。JavaScript 不是最佳游戏平台，但对那些帧率较低的游戏也没有问题。

Shortcuts.js
从 Google Reader 和 Gmail 开始，Web 程序中的快捷键开始流行起来。Shorcuts.js 让快捷键的处理变得简单。

Mapstraction
有不少地图提供商都提供不同 API，如果你要更换提供商，比如从 Google Maps 到 MapQuest，需要更新代码，Mapstraction 提供了常用地图提供商的 API，只需该一行代码就能完成转换。

Amberjack
一个只有 4K 的微型 JavaScript 库，可以为你的网站添加漂亮的教程功能，一个模式窗口会以教程的形式显示任意内容，教程中的步骤可以通过手工编码实现或在线自动生成。可以使用主题或 CSS 控制内容的格式。

JsLoad
JsLoad 可以从 Google server 远程加载各种 JavaScript 库，可以自动加载各种版本的支撑库。