Question

我建立了一个专注于仅加载必须加载的数据的网站。我在这里构建了一个示例，并想知道这是否是构建wegpage的好方法。在构建这样的网站时存在一些问题，例如

书签
在
历史SEO（因为内容基本上没有真正连接）

所以这是一个例子：

的index.html

<html>
<head>
<title>Somebodys Website</title>
  <!-- JavaScript -->
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="pagecode.js"></script>
</head>
<body>
<div id="navigation">
<ul>
    <li><a href="#" class="nav" id="link_Welcome">Welcome</a></li>
    <li><a href="#" class="nav" id="link_Page1">Page1</a></li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>

pagecode.js

var http = null;
$(document).ready(function()
{
// create XMLHttpRequest
try {
    http = new XMLHttpRequest();
}
catch(e){
    try{
        http = new ActiveXObject("MS2XML.XMLHTTP");
    }
    catch(e){
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
// set navigation click events
$('.nav').click(function(e)
  {
    loadPage(e);
  });
});

function loadPage(e){
  // e.g. "link_Welcome" becomes "Welcome.html"
  var page = e.currentTarget.id.slice(5) + ".html";

  http.open("POST", page);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.setRequestHeader("Connection", "close");
  http.onreadystatechange = function(){changeContent(e);};
  http.send(null);
}

function changeContent(e){
  if(http.readyState == 4){
    // load page
    var response = http.responseText;
    $('#content')[0].innerHTML = response;
  }
}

Welcome.html

<b>Welcome</b>
<br />
To this website....

正如您所看到的，我正在根据导航部分中链接的ID加载内容。因此，为了使“Page1”导航项可链接，我必须创建一个包含一些内容的“Page1.html”文件。

这种加载网页数据的方式是非常错误的吗？如果是这样，有什么更好的方法呢？

感谢您的时间

编辑：

这只是一个非常简短的例子，我想说对于禁用了javascript的用户，仍然可以以静态形式提供整个页面（另外）。 e.g。

<li><a href="static/Welcome.html" class="nav" id="link_Welcome">Welcome</a></li>

并且此Welcome.html将包含基本index.html文件的所有开销。通过这样做，使用页面版本的ajax将是某种额外的功能，不是吗？

Answer 1

这是错误的使用AJAX（或任何javascript）只是为了使用它（除非你正在学习如何使用ajax这是不同的事情）。

在某些情况下，javascript的使用是好的（主要是当你在浏览器窗口中构建自定义用户界面时）以及AJAX真正发挥作用的时候。但是使用javascript加载静态网页是非常错误：首先，您将自己绑定到可以运行JS的浏览器，其次是增加服务器和客户端的负载。

Answer 2

不，这不是一个好方法。

Ajax是一种最适合轻触的工具。

使用它重新创建框架只是重新创建所有the problems of frames，除了它替换了完全不可见搜索引擎的孤立页面问题（以及其他使用不支持JS或禁用它的代理程序）。

通过这样做，使用页面版本的ajax将是某种额外的功能，不是吗？

没有。用户不会注意到，并且您会破坏书签，链接共享等。

Answer 3

更多技术细节：

应该使用jquery：$ post（）重写函数loadPage。这是一个随机镜头，未经测试：

function loadPage(e){
  // e.g. "link_Welcome" becomes "Welcome.html"

  var page = e.currentTarget.id.slice(5) + ".html";
  $.post( page, null, function(response){
      $('#content')[0].innerHTML = response;
  } );
}

警告，我没有测试它，我可能会让这个功能有点不对劲。但是...... dud，你已经在使用jQuery了 - 现在滥用它！：）

Answer 4

在考虑在网站上实施AJAX模式时，首先应该问自己一个问题：为什么？实现AJAX有几个很好的理由，但也有几个不好的原因取决于你想要实现的目标。

例如，如果您的网站就像Facebook，您希望为最终用户提供丰富的用户界面，您可以在聊天时立即看到朋友的回复，当用户将内容发布到您的墙上或在照片，无需刷新整个页面，AJAX非常棒！

但是，如果您使用AJAX创建一个主要内容区域为每个顶级菜单项更改的网站，这是一个坏主意有几个原因：首先，我认为非常重要，< strong> SEO（搜索引擎优化）是未优化。搜索引擎抓取工具不遵循AJAX请求除非他们是通过 onclick事件的锚标签。最终，在这个例子中，你是没有从富人那里获得价值经验，你失去了很多潜在的观众。

其次，用户将无法为网页添加书签，除非您实施一种智能方法来解析网址以映射到AJAX调用。

第三，如果您尚未实施自定义客户端机制来管理历史记录，用户将无法使用后退和前进按钮正确导航。

最后，每个浏览器以不同的方式解释JavaScript，并且您编写的JavaScript越多，失去跨浏览器兼容性的可能性就越大，除非您实现了jQuery，Dojo，EXT等框架，或者为你处理大部分内容的MooTools。

Answer 5

gabtub你没有错，你可以使用兼容的AJAX密集型网站，带书签，后退/前进按钮（一般的历史导航），禁用JavaScript（避免网站重复），可访问...

有一个问题，你必须回到以服务器为中心。

你可以得到一些“howtos”here。并查看ItsNat。

Answer 6

如何不引人注目（或者我应该怎么称呼它？）？

如果用户由于某种原因没有javascript，他只会看到包含Welcome和Page1的列表。

Answer 7

是的，这是错的。那些没有JavaScript的用户呢？为什么不在服务器端做这种工作呢？为什么要支付多个HTTP请求的成本而不是包括服务器端的文件，以便可以在单个提取中下载它们？为什么要支付不支持JavaScript的客户无法查看您的内容的费用（Google的蜘蛛是一个重要的用户，会被这种方法疏远）？为什么？为什么呢？

基于ajax的网页 - 这样做的好方法？

7 个答案: