代码之家 › 专栏 › 技术社区 › gabtub

基于Ajax的网页-好方法?

html jquery javascript

gabtub · 技术社区 · 15 年前

我建立了一个网站,专注于只加载必须加载的数据。我在这里建立了一个例子,想知道这是否是构建wegpage的一个好方法。在建设这样的网站时,有一些问题,例如

书签
进进出出
历史SEO(因为内容基本上没有真正的连接)

下面是一个例子:

索引文件

<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>

PACECODE.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;
  }
}

欢迎加入

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

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

这种为您的网页加载数据的方式是不是非常错误?如果是这样的话,还有什么更好的方法呢?

谢谢你抽出时间

编辑:

这只是一个非常简短的示例,我想说,对于禁用了javascript的用户,仍然可以(另外)以静态形式提供整个页面。例如

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

这个welcome.html包含基本index.html文件的所有开销。通过这样做,使用页面版本的Ajax将是一种额外的特性,不是吗?

7 回复 | 直到 13 年前

Quentin 15 年前

不,这不是一个好方法。

Ajax是一种轻量级的工具。

使用它重新设计帧只需重新创建所有 the problems of frames 除了它将孤立页面的问题替换为对搜索引擎完全不可见(以及其他不支持JS或禁用JS的使用代理)。

通过这样做,使用页面版本的Ajax将是一种额外的特性,不是吗?

不,用户不会注意到,你会破坏书签、链接共享等。

kender DaveL 15 年前

这是错误的 要使用Ajax(或任何与此相关的javascript),只需使用它(除非您正在学习如何使用Ajax,这一点很重要)。

在某些情况下,JavaScript的使用是很好的(主要是当您在浏览器窗口中构建自定义用户界面时),并且当Ajax真正发光时。但是用javascript加载静态网页是非常错误:首先,您将自己与一个可以运行JS的浏览器绑定在一起,然后在服务器和客户端增加负载。

elcuco 15 年前

更多技术细节:

应该使用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;
  } );
}

请注意,我没有测试它,我可能会把这个函数搞错。但是…伙计,你已经在使用jquery了-现在滥用它!:)

pixelbobby 15 年前

在考虑在网站上实现Ajax模式时,您应该首先问自己一个问题:为什么?实现Ajax有几个好的理由,但也有几个坏的理由,这取决于您试图实现什么。

例如,如果你的网站像Facebook,你想为最终用户提供一个丰富的用户界面,在那里你可以立即看到来自聊天中的朋友的回复,当用户在你的墙上张贴东西或在照片中标记你时的通知,而不必刷新整个页面,那么Ajax就很好了!

但是,如果您正在创建一个网站,其中的主要内容区域使用Ajax更改每个顶级菜单项,这是一个坏主意,原因有以下几个:第一,我认为非常重要的是, 搜索引擎优化未优化 . 搜索引擎爬虫不遵循Ajax请求除非通过锚标记的onclick事件。最后,在这个例子中,您是没有从富人那里得到价值经验,你损失很多潜在观众。

第二, 用户在为页面添加书签时会遇到问题 除非您实现了一种智能的方法来解析URL以映射到Ajax调用。

第三个, 用户在使用后退和前进按钮进行正确导航时会遇到问题。 如果尚未实现自定义客户端机制来管理历史记录。

最后,每个浏览器对JavaScript的解释不同,并且 你写的javascript越多,就越有可能失去跨浏览器的兼容性。 除非您实现了一个框架,比如jquery、dojo、ext或moooltools,它可以为您处理大部分问题。

jmarranz 13 年前

gabbutb你没有错,你可以让工作Ajax密集型网站seo兼容,与书签,后退/前进按钮(一般历史导航),与javascript禁用(避免网站重复),可访问…

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

你可以得到一些“howtos” here . 然后看看 ItsNat .

Natrium 15 年前

不引人注目怎么样(或者我该怎么称呼它?)?

如果用户出于某种原因没有javascript,那么他只会看到一个带有welcome和page1的列表。

Dominic Rodger 15 年前

是的,这是错误的。没有javascript的用户怎么办?为什么不在服务器端进行这种工作呢?为什么要支付多个HTTP请求的成本而不包括服务器端的文件,这样它们就可以在一次提取中下载?为什么要为那些不能浏览你的东西的非javascript客户端付出代价(谷歌的蜘蛛是一个重要的用户,他们会被这种方法所疏远)?为什么?为什么?