无XHR，AJAX异步加载与实时渲染实践

在"没有XHR，Ajax精彩依旧"的研讨会中，维生数工作室分享了一种利用动态HTML(DHTML)和浏览器实时渲染特性的方法来实现资源异步下载的技术交流。Ajax，全称为"Asynchronous JavaScript and XML"，是一种强大的Web开发技术，它允许在不刷新整个页面的情况下与服务器进行数据交换并更新部分页面内容。 尽管XMLHttpRequest (XHR) 是Ajax的核心组成部分，是现代浏览器中可用的一种API，但并非所有情况下都需要使用到XHR。Ajax技术并不局限于特定的API，而是利用了一系列技术的组合，包括： 1. **基于Web标准**：使用XHTML+CSS进行页面布局和样式定义，确保兼容性和可访问性。 2. **动态DOM操作**：利用Document Object Model (DOM) 实现元素的动态添加、修改或删除，从而实现页面的实时响应和交互。 3. **数据交换**：虽然XML被广泛提及，但在实际应用中，JSON (JavaScript Object Notation) 更加常见，因为其更简洁，更易于解析。JSON与JavaScript有更好的兼容性，可以用于前后端数据交换。 4. **异步请求**：即使没有XMLHttpRequest，开发者也可以利用其他手段，如轮询、长轮询、WebSockets等实现异步数据请求。尽管这些方法可能不如XHR高效，但依然可以在没有XHR支持的环境中工作。 在DHTML时代之前，网页都是静态的，页面内容一旦加载就不再改变。然而，DHTML引入了动态显示的能力，允许页面在无需刷新的情况下更新部分区域。Ajax技术正是在这个背景下兴起，通过异步下载数据，结合DHTML的实时渲染，提高了用户体验。 例如，通过使用`<img>`标签配合`onclick`事件，我们可以实现图片的异步加载，而不会阻塞页面渲染。同时，利用CSS的`display: none`隐藏加载中的内容，配合`<script>`和`innerHTML`或者DOM操作，可以实现在用户触发事件时动态插入图片，模拟异步加载效果。 在某些简单示例中，开发者可能仅需下载资源而不显示，采用预加载（pre-loading）策略，通过设置CSS的`display`属性和创建新的`Image`对象，使得资源在需要时能快速显示出来。 总结来说，虽然XMLHttpRequest是Ajax的重要工具，但通过巧妙利用HTML、CSS和JavaScript的交互，即便在不依赖XHR的环境下，开发者也能继续利用Ajax的核心理念——提供交互式的、非阻塞的用户体验，这正是Ajax技术的魅力所在。