2

我正在学习网页设计课程。我和很多其他学生都对 ajaxifying 我们的工作很感兴趣。我们的老师只对设计和 HTML 感兴趣——所以他帮不上忙。

我希望我使用正确的术语 - 否则请纠正我。通过ajaxifying，我的意思是让我的网页在导航时只更新某些部分。

例如，假设我有一个包含 3 个子页面的网页：

1：索引.html

<!DOCTYPE html><html><head><title> Welcome! </title></head>
<body>
    <div id="Content"> Welcome, dear visitor... take a look around! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"><b> Home </b></a></li>
            <li><a href="projects.html"> Projects </a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

2：项目.html

<!DOCTYPE html><html><head><title> Projects </title></head>
<body>
    <div id="Content"> All my projects are shown here! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"> Home </a></li>
            <li><a href="projects.html"><b> Projects </b></a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

3：联系人.html

<!DOCTYPE html><html><head><title> Contact </title></head>
<body>
    <div id="Content"> Contact info! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"> Home </a></li>
            <li><a href="projects.html"> Projects </a></li>
            <li><a href="contact.html"><b> Contact </b></a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

使用链接时：

  • 只有 Content-div 应该重新加载。

  • 菜单应该更新哪个菜单点是活动的（这里用粗体标签显示）。如果这太复杂了，可以重新加载菜单。

  • 根本不应该重新加载页脚。

  • 标题应该更新。

  • 网址应该更新。

  • 我真的希望网址干净。也就是说：不是/#projects.html或/#/projects.html，而是直接/projects.html或/projects

  • 工作书签和后退按钮至关重要。

这可能吗？我将永远疯狂地感谢任何在这里帮助我的人！:-D 我已经尝试过（并使用过）jQuery 地址和历史插件、History.js和它的“要点”。无法让它工作。我已经拖网和拖网堆栈溢出和谷歌，但似乎找不到任何人解释这些事情或有一个简单的解决方案。

针对现代网络浏览器的解决方案会很好。如果 IE 和没有 javascripts 的人只得到简单的 html 版本，那会很酷 - 但这不是绝对必要的。

请帮助 - 任何帮助将非常非常感激！谢谢！:-)

4

1 回答 1

3

你想要什么是可能的，但并不容易做到。
如前所述，HTML5 History API 使之成为可能，但您需要具备良好的 javascript 知识。显示或多或少的静态页面并不完全是它的目的，但为了学习，让我们考虑一下如何做到这一点。

您可能希望使用路由器已经附带的框架（如骨干网），这样您就不必编写自己的抽象。

客户端路由器背后的基本思想是，您有一种简单的方法来定义什么 URL 触发什么 javascript 函数，类似于：

var routes = {
    "index": "open_index",
    "projects": "open_projects",
    "contact": "open_contact"
}

var open_index = function(){
    // Do the logic that has to be done
    // to open the index page
}

...

请注意，代码只是为了说明这个想法，它不符合任何实际的框架或库。

无论如何，每次触发这些路线之一时，您都需要注意拆开整个页面并将所有内容替换为所需的内容。

现在你基本上有两种选择。要么从服务器获取 HTML 并将其插入，要么只获取 JSON 中的实际数据并使用客户端模板。

这意味着什么？好吧，现在您使用静态 HTML 页面。它们确实具有所有页面共享的基本结构，即“内容”、“菜单”和“页脚”中的分隔，但是，由于这不是 Web 应用程序而是网站，因此“内容”的内容' 可能不遵循代表某种结构化数据的结构。
代表结构化数据的一个示例是电话簿。你总是有一个“名字”、“姓氏”、“电话号码”的列表，这主要是定义页面的内容。它看起来的方式不是页面的内容。

页面的全部内容可以由这样的数组定义：

var people = [
 { "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
 { "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
 ...
]

并使用简单的模板呈现客户端，例如：

<ul class="phone_book">
  {{#each people}}
  <li>{{firstName}} {{lastName}} - {{number}}</li>
  {{/each}}
</ul>

生成所需的 HTML。（顺便说一句，那是把手）
使用框架，您可以轻松地将其设置为脚本以在更新数据时自动更新信息显示 - 例如通过使用 AJAX。

但是，在您的情况下，页面的外观很可能就是它的内容。你需要在这里一张图片，那里一张图片，中间需要一些文字，所有这些都随着每一页而变化。你需要 HTML。
这就是为什么您想要的并不完全是您将使用 History API 和 AJAX 的原因。它主要用于复杂的 web 应用程序，这些应用程序需要使用自己的 url 传播多个页面，这些页面还可以潜在地捕获应用程序的状态，以便链接到 javascript 繁重的 web 应用程序的特定部分成为可能。无需使用 AJAX 和 History API 即可加载静态网站。

让我们现在忽略这一点，然后继续。让我们尝试看看 open_index 函数需要做什么。

var open_index = function(){
    // 1. Fade out the old content and remove it
    // 2. Request the new html content from the server
    // 3. Mark the new active link in the navigation
    // 4. Add the content to the DOM
    // 5. Fade in the new content
}

所有这些你都可以使用 jQuery 轻松完成。您可以轻松找到有关如何执行此操作的解释。

现在你快到了。剩下的唯一需要注意的事情是确保拦截导航的点击事件，以便您可以使用 History API，并且它不会从一开始就加载静态页面。

对于这样的简单用途，结构方面不需要更多。

我再说一遍。对于您的目的而言，这完全是矫枉过正，除了学习目的之外，您不应将其用于其他目的。如果您不使用稍微抽象出 History API 的库，代码将变得更加复杂。

我希望这有助于让您了解您正在处理的内容。

于 2012-02-19T00:32:19.010 回答