简单的ajaxify，没有散列或hashbang网址

我正在参加网页设计课程。我和其他很多学生真的很想把我们的工作搞得晕头转向。我们的老师只进入设计和HTML - 所以他不能帮助。简单的ajaxify，没有散列或hashbang网址

我希望我使用正确的术语 - 否则请纠正我。通过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>

当使用链接：

只有内容-DIV应该重新加载。
菜单应该更新哪个菜单点处于活动状态（这里用粗体标签显示）。如果这太复杂，则可以重新加载菜单。
页脚不应该被重新加载。
标题应该更新。
该网址应该更新。
我真的很喜欢这个网站是干净的。那就是：不/#projects.html或/#/projects.html，只是直线上升/projects.html或/项目
工作书签和返回按钮是关键。

这可能吗？我会永远疯狂地感谢任何帮助我的人！ :-D 我试过（并砍了）jQuery地址和历史插件，History.js和'gist'它。无法得到任何工作。我已经通过trawled和trawled堆栈溢出和谷歌，但似乎无法找到任何人解释这些事情或有一个简单的解决方案。

针对现代网页浏览器的解决方案将会很好。如果IE的家伙和no javascripts家伙只是获得简单的html版本，那很酷 - 但这不是绝对必要的。

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

来源

2012-02-18 user765151

如何通过Ajax加载内容并期望后退按钮或书签功能可行？有人纠正我，如果我错了，但我想这些功能是相互排斥的。 – 2012-02-18 21:54:05

也许看看HTML5 History API - http://html5demos.com/history。 – 2012-02-18 23:02:44

你想要什么是可能的，但不是很容易做到。
如前所述，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 。通过使用AJAX例如 - （这是handlebars的方式）
使用框架，你可以很容易地将它设置为脚本，以在更新数据自动更新的信息显示。

就你而言，最有可能的是页面看起来的样子是什么。你需要一张图片和一张图片，里面还有一些文字，所有这些都会随着每一页的变化而变化。你需要HTML。
这就是为什么你想要的不完全是你会使用History API和AJAX的原因。它主要用于复杂的Web应用程序，这些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，并且它不会从一开始就加载静态页面。

对于这样的简单使用，不需要更多的结构明智的。

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

我希望这能帮助您了解您正在处理的内容。

来源

2012-02-19 00:32:19 TheShellfishMeme

简单的ajaxify，没有散列或hashbang网址

回答

相关问题