Question

我正在参加网页设计课程。我和很多其他学生真的很感兴趣我们的工作。我们的老师只是设计和HTML - 所以他无法帮助。

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

例如，假设我有一个由3个子页面组成的网页：

1： index.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： projects.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： contact.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。
菜单应更新哪个菜单点处于活动状态（此处以粗体标记显示）。如果这太复杂了，可以重新加载菜单。
不应重新加载页脚。
标题应该更新。
网址应该更新。
我真的希望网址干净。即： / #project.html 或 /＃/ projects.html ，但只需直接 /projects.html 或 /项目
工作书签和后退按钮至关重要。

这有可能吗？对于在这里帮助我的人，我将永远感激不尽！ :-D 我已经尝试过（和黑客攻击）jQuery地址和历史插件，History.js和'gist'。无法使其中的任何一个工作。我已经拖网搜索堆栈溢出和google，但似乎找不到任何人解释这些东西或有一个简单的解决方案。

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

请帮助 - 非常非常感谢任何帮助！感谢名单！： - ）

Answer 1

你想要什么是可能的，但不是很容易做到如前所述，HTML5 History API使其成为可能，但您需要熟悉javascript。显示更多或更少的静态页面并不完全是它的目的，但为了学习，让我们考虑一下它是如何完成的。

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

客户端路由器背后的基本思想是，您可以轻松地定义哪个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。（顺便说一下，handlebars）
使用框架，您可以轻松地为脚本设置它，以便在更新数据时自动更新信息显示 - 例如，使用AJAX。

但是，在您的情况下，页面看起来很可能就是它的样子。你需要一个图像，一个图像和中间的一些图像，所有这些都随着每一页的变化而变化。你需要HTML 这就是为什么你想要的并不完全是你使用History API和AJAX的原因。它主要用于需要使用自己的URL传播多个页面的复杂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。您可以毫不费力地找到解释如何执行此操作的方法。

现在你快到了。唯一需要注意的是确保截取导航的点击事件，以便您可以使用历史记录API，它不会只是从头开始加载静态页面。

对于像这样的简单用法，结构上不需要更多的东西。

我会再说一遍。这是完全矫枉过正的目的，除了学习目的之外，你不应该使用它。如果你不使用一个抽象历史API的库，代码将会变得更加复杂。

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

简单的ajaxify，没有hash或hashbang url

1 个答案: