web2.0及其相关技术 (10)

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：

句子一<br /> 句子二<br /> 句子三<br />

如果我们采用一个无序列表代替会更好：

<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>

你或许会说“但是<li>显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。

n 给每个表格和表单加上id

给表格或表单赋予一个唯一的、结构的标记，例如

<table>

接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显 示。这样，不需要对每个<td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记 “menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点，但其中包含的内容和知识点非常多，需要我们逐步学习和掌握，直到最后实现完全采用CSS而不才用任何表格实现布局

1)      ajax

a)            ajax的定义

AJAX全称为“Asynchronous JavaScript and XML”（异步和XML），是一种创建交互式网页应用的网页开发技术。Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括: l 使用XHTML+CSS来表示信息 l 使用操作DOM（Document Object Model）进行动态显示及交互 l 使用 XML 和 XSLT 进行数据交换及相关操作 l 使用 XMLHttpRequest对象与Web服务器进行异步数据交换 l 使用 JavaScript 将所有的东西绑定在一起。

b)           与传统web应模型的对比

图1: 传统Web应用模型(左)与Ajax模型的比较(右).  

图 2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下). 传统的web应用模型工作起来就象这样：大部分界面上的用户动作触发一个连接到Web服务器的HTTP 请求。服务器完成一些处理---接收数据，处理计算，再访问其它的数据库系统，最后返回一个HTML页面到客户端。这是一个老套的模式，自采用超文本作为 web使用以来，一直都这样用,这就限制了Web界面没有桌面软件那么好用。

这种旧的途径让我们认识到了许多技术，但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候，用户在做什么？没错，等待。每一个动作，用户都要等待。很明显，如果我们按桌面程序的思维设计Web应用，我们不愿意让用户总是等待。当界面加载后，为什么还要让用户每次再花一半的时间从服务取数据？实际上，为什么老是让用户看到程序去服务器取数据呢？

c)            ajax好处

1) 减轻服务器的负担

因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担

2) 无刷新更新页面，减少用户实际和心理等待时间