Ajax Web 应用程序中的“唯一 URL 模式”

Wayne Ye

0/5 (0投票)

2011 年 4 月 25 日

CPOL

3分钟阅读

16824

Ajax Web 应用程序中的“唯一 URL 模式”

背景

几天前，我的一个朋友问我Gmail在用户操作时如何在不刷新页面的情况下更改其URL。当时我对此一无所知，然后他分享了一个链接Ajax模式 - 唯一URL，该链接深入探讨了该主题，正如文章中提到的：唯一URL使您网站的链接“可收藏、可链接、可键入”，此外，在我看来，它还可共享，易于在当今极其重要的社交网络中共享。

实现

实现“唯一URL”目标的关键技术可以归纳为两点

如果页面中的内容已通过Ajax进行了足够重要的更新，则也请更新URL (location.hash)。
```
// Ajax rendering all blog entries in page number 5
location.hash = 'Blogs&Page5';
```

每次加载Ajax页面时，JS都应该理解URL并呈现相关内容。

<body onload="restoreAjaxContent()">
<script type="text/javascript">
function restoreAjaxContent(){
    var urlHash = location.hash;
    var curPageNo = urlHash.replace('Blogs&Page','');
    // Safe parse curPageNo into number, handles wrong parameters (Ignored for here)
    // Display loading text/image on the page (optional but better UX).
    // Ajax rendering all blog entries in page number curPageNo.
}
</script>
</body>

我想强调的是哈希值，即#后面的内容最初被期望为HTML元素的name属性，用于页面内导航。这完全是客户端浏览器、HTML内容和JavaScript之间的约定，服务器端无法直接获取信息，除非我们显式地将该值传递给服务器端（隐藏的post、URL查询字符串、Ajax等）。因此，如果某些用户访问了唯一URL，您网站的客户端JS应该解析哈希并从服务器端检索相关数据。

优点

更好的用户体验：每次用户访问唯一URL Ajax页面时，首先加载该页面的固定部分，然后异步加载主要内容。如果主要内容足够大，例如，包含图像或富媒体内容，“异步加载”比页面加载被下载这些图像/媒体阻止要好得多。例如，最初加载一个特定页面总共需要2秒，在应用此“异步加载”后，固定部分花费0.4秒加载，而主要内容花费1.8秒，从用户的角度来看，通常后一种情况会更好，因为用户会看到您的页面在短时间内（0.4秒）部分加载，感觉足够好，再加上一个优雅的加载/启动画面，最终用户体验得到了显着改善！
更好的SEO支持（性能方面）：页面呈现速度是搜索引擎爬虫的重要因素，通过应用“异步加载”，爬虫会认为它正在爬取的页面具有良好的加载速度 - 0.4秒。
易于支持W3 Web标准这有点开玩笑。:) 由于您的主要内容是通过Ajax加载的，因此W3验证器（搜索引擎也是如此）不会验证很可能不严格遵守所有标准规则的主要内容。

缺点

主要内容无法被搜索引擎索引所有主要内容都由JavaScript加载，搜索引擎不会抓取这些内容，这是一个严重的问题！但是，很容易绕过，构建一个没有Ajax的传统页面，将其存储到sitemap.xml并提交给搜索引擎Web Master工具。
更难开发和维护客户端JavaScript/Ajax开发比ASP.NET、JAVA EE或PHP等服务器端技术更复杂且不太方便。虽然有jQuery（写得更少，做得更多），Prototype.js（以更面向对象的方式开发JS），DoJo等等，但开发人员在与混合的HTML/CSS/JavaScript作斗争时可能仍然不高兴:)

附注：我花了两天时间更新我的博客 (http://WayneYe.com)，将分页样式从传统方式修改为上面的Ajax唯一URL模式，它不像"http://wayneye.com/#Blogs&Page5"那样进行Ajax分页和更新URL，它绝对是“可收藏、可链接、可键入和可共享的”，再加上一个加载面板和内容淡入效果，我相信它的用户体验比以前好得多。