Ajax技术：原理、应用与替代方案

### Ajax技术：原理、应用与替代方案 #### 1. Ajax的四大定义原则 ##### 1.1 服务器传输数据而非内容 传统的Web应用在每一步都会提供样板代码、内容和数据的混合体。例如，当用户向购物篮中添加商品时，实际上我们只需要返回购物篮的更新价格或是否出现错误的信息，这只是整个文档中很小的一部分。 基于Ajax的购物车则更加智能，它通过向服务器发送异步请求来工作。由于页面的样板代码、导航列表和其他布局元素已经存在，服务器只需返回相关数据。Ajax应用可以通过多种方式实现这一点，如返回一段JavaScript代码片段、纯文本流或小型XML文档。与传统Web应用返回的杂乱混合内容相比，这些格式的数据量要小得多。 在Ajax应用中，流量在前期集中，用户登录时会一次性加载一个大型复杂的客户端。不过，后续与服务器的通信效率会更高。对于短暂使用的应用，传统网页应用的累积流量可能较少，但随着平均交互时间的增加，Ajax应用的带宽成本会低于传统应用。 以下是传统Web应用和Ajax应用传输内容的对比： | 应用类型 | 传输内容 | | ---- | ---- | | 传统Web应用 | 样板代码、内容和数据的混合体 | | Ajax应用 | 仅相关数据（如JavaScript片段、纯文本流、XML文档） | 其工作流程可以用以下mermaid流程图表示： ```mermaid graph LR A[用户操作] --> B{是否为Ajax应用} B -- 是 --> C[发送异步请求] C --> D[服务器返回数据] D --> E[更新页面部分内容] B -- 否 --> F[发送请求] F --> G[服务器返回完整页面] G --> H[刷新整个页面] ``` ##### 1.2 用户与应用的交互流畅且连续 Web浏览器自带两种输入机制：超链接和HTML表单。超链接可以在服务器上构建，并预加载指向动态服务器页面或Servlet的通用网关接口（CGI）参数。通过添加图像和级联样式表（CSS），超链接在鼠标悬停时可以提供基本的反馈，在优秀的网页设计师手中，超链接可以看起来像非常漂亮的用户界面（UI）组件。 表单控件提供了标准桌面UI组件的基本子集，如输入文本框、复选框、单选按钮和下拉列表，但缺少一些常用的组件，如树形控件、可编辑网格或组合框。和超链接一样，表单也指向服务器端的URL。 此外，超链接和表单控件也可以指向JavaScript函数。在网页中，使用JavaScript进行基本的表单验证是常见的技术，在将数据提交到服务器之前，检查字段是否为空、数字是否超出范围等。但这些JavaScript函数只在页面存在时有效，页面提交后会被替换。 在页面提交过程中，用户实际上处于等待状态。旧页面可能会在一段时间内仍然可见，浏览器甚至可能允许用户点击可见的链接，但这样做会产生不可预测的结果，并可能破坏服务器端会话。用户通常需要等待页面刷新，而刷新后的页面往往提供与几秒前相似的选择。 以购物车为例，由于Ajax购物车异步发送数据，用户可以快速地将商品放入购物车。如果购物车的客户端代码健壮，它可以轻松处理这些操作，用户可以继续进行自己的操作。而且，Ajax还可以将事件与更广泛的用户操作关联起来，像拖放等更复杂的UI概念也变得可行，使UI体验与桌面应用的小部件集相媲美。从可用性的角度来看，这种灵活性很重要，因为它能让用户交互和服务器端请求更好地融合。 以下是传统Web应用和Ajax应用用户交互的对比： | 应用类型 | 用户交互特点 | | ---- | ---- | | 传统Web应用 | 点击超链接或提交表单后需等待页面刷新，交互不流畅 | | Ajax应用 | 异步交互，可连续操作，不中断工作流程 | 其交互流程可以用以下mermaid流程图表示： ```mermaid graph LR A[用户操作] --> B{是否为Ajax应用} B -- 是 --> C[异步处理操作] C --> D[服务器处理并返回数据] D --> E[更新页面无需刷新] B -- 否 --> F[提交请求] F --> G[等待页面刷新] G --> H[继续操作] ``` ##### 1.3 真正的编码需要严谨性 传统Web应用使用JavaScript为页面添加一些花哨的功能，但基于页面的模型限制了这些增强功能的持续时间和用途，这导致JavaScript被不公平地视为一种琐碎、不严谨的语言，受到严肃开发者的轻视。 而编写Ajax应用则完全不同。用户启动应用时加载的代码必须在应用关闭前持续运行，不能出现崩溃、变慢或产生内存泄漏的情况。如果目标是主权应用市场，这意味着要承受数小时的大量使用。为了实现这一目标，我们必须编写高性能、可维护的代码，运用与服务器端开发相同的严谨性和理解。 Ajax应用的代码库通常比传统Web应用更大，因此良好的代码结构实践非常重要。代码可能由团队而非个人负责，这就带来了可维护性、关注点分离以及统一编码风格和模式等问题。 以下是传统Web应用和Ajax应用编码特点的对比： | 应用类型 | 编码特点 | | ---- | ---- | | 传统Web应用 | JavaScript用于简单增强，代码易受页面生命周期限制 | | Aj