Question

我真的很喜欢新Twitter和Facebook如何通过ajax动态加载内容来保存页面加载。我想开始将它推广到我的网站，但我不知道从哪里开始。

Twitter和Facebook现在有这样的uri： http://twitter.com/#!/messages

$(document).ready(function () {

// Check if a hash exists already and if so load that page instead.
if(window.location.hash) {
    $("div#content").load(window.location.hash);
} else {
    // load the home page.
    $("div#content").load("http://localhost/home/");
}

// Allow menu to change url hash and load new content.
$('ul#menu li a').click(function() {
    $("div#content").load(window.location.hash);
});

});

我的菜单的html：

<ul id="menu">
    <li>< a href="#">logout</a></li>
    <li>< a href="#!/settings">settings</a></li>
    <li>< a href="#!/messages" class="notify">messages <span>3</span></a></li>
    <li>< a href="#!/profile">profile</a></li>
    <li>< a href="#!/" class="selected">home</a></li></ul>

知道Facebook或Twitter如何做到这一点？

Answer 1

听起来你只是在询问Ajax是如何工作的。开始使用Ajax的最佳方式是使用jQuery，您可以执行的最佳页面加载类型是文本文件。试试这样的事情

1）创建一个包含单个字母“A”的文件。将文件命名为“A.txt”。

2）创建一个包含单个字母“B”的文件。将文件命名为“B.txt”。

3）创建一个完整的HTML页面，加载jQuery并将其命名为Test.htm。在该文件中，创建此代码：

<input type="button" class="LoadMyDiv" id="ButtonA" value="load A">
<input type="button" class="LoadMyDiv" id="ButtonB" value="load B">


 $(document).ready(function () {
       $(".LoadMyDiv").click(function() {
         $("#Adiv").load("A.txt");
         $("#Bdiv").load("B.txt");
 });
 });
<div id="ThisDiv"></div>

Answer 2

这将是最好的answer

希望也会帮助别人。

jQuery Twitter / Facebook就像页面导航一样

2 个答案: