基于ajax的网页 - 这样做的好方法？
[英]ajax based webpage - good way to do it?
问题描述
I build a website focussing on loading only data that has to be loaded. 
我建立了一个网站，专注于只加载必须加载的数据。 I've build an example here and would like to know if this is a good way to build a wegpage. 我在这里构建了一个示例，并想知道这是否是构建wegpage的好方法。 There are some problems when building a site like that, eg 在构建这样的网站时存在一些问题，例如
- bookmarking 书签
- going back and forth in 来回走动
- history SEO (since the content is basically not really connected) 历史SEO（因为内容基本上没有真正连接）
so here is the example: 所以这是一个例子：
index.html 的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 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 Welcome.html
<b>Welcome</b>
<br />
To this website....
So as you can see, I'm loading the content based on the IDs of the links in the navigation section. 如您所见，我正在根据导航部分中链接的ID加载内容。 So to make the "Page1" navigation item linkable, i would have to create a "Page1.html" file with some content in it. 因此，为了使“Page1”导航项可链接，我将不得不创建一个包含一些内容的“Page1.html”文件。
Is this way of loading data for your web page very wrong? 这种加载网页数据的方式是非常错误的吗？ and if so, what is a better way to do it? 如果是这样，有什么更好的方法呢？
thanks for your time 谢谢你的时间
EDIT: 编辑：
this was just a very short example and i'd like to say that for users with javascript disabled it is still possible to provide the whole page (additionally) in static form. 这只是一个非常简短的例子，我想说对于禁用了javascript的用户，仍然可以以静态形式提供整个页面（另外）。 eg 例如
<li><a href="static/Welcome.html" class="nav" id="link_Welcome">Welcome</a></li>
and this Welcome.html would contain all the overhead of the basic index.html file. 这个Welcome.html将包含基本index.html文件的所有开销。 By doing so, the ajax using version of the page would be some kind of extra feature, wouldn't it? 通过这样做，使用页面版本的ajax将是某种额外的功能，不是吗？
7 个解决方案
解决方案1
5 2009-09-24 10:34:21
It's wrong to use AJAX (or any javascript for that matter) only to use it (unless you're learning how to use ajax which is diffrent matter). 这是错误使用AJAX（或与此有关的任何JavaScript）只使用它（除非你正在学习如何使用Ajax是不同势物质）。
There are situations where the use of javascript is good (mostly when you're building a custom user interface inside your browser window) and when AJAX really shines. 在某些情况下，javascript的使用是好的（大多数情况下，当你在浏览器窗口中构建自定义用户界面时）以及AJAX真正闪耀的时候。 But loading static web pages with javascript is very wrong: first, you tie yourself with a browser that can run your JS, second you increase the load on your server and on the client side. 但是使用javascript加载静态网页是非常错误的：首先，你将自己绑定到可以运行JS的浏览器，其次是增加服务器和客户端的负载。
解决方案2
5 已采纳 2009-09-24 10:34:24
No, it isn't a good way to do it. 不，这不是一个好方法。
Ajax is a tool best used with a light touch. Ajax是一种最适合轻触的工具。
Reinventing frames using it simply recreates all the problems of frames except that it replaces the issue of orphan pages with complete invisibility to search engines (and other use agents that don't support JS or have it disabled). 使用它重新构建框架只是重新创建框架的所有问题，除了它替换了完全不可见的搜索引擎（以及其他不支持JS或禁用它的使用代理）的孤立页面问题。
By doing so, the ajax using version of the page would be some kind of extra feature, wouldn't it?
No. Users won't notice, and you break bookmarking, linksharing, etc. 不会。用户不会注意到，你打破书签，链接共享等。
解决方案3
1 2009-09-24 11:44:52
More technical details: 更多技术细节：
The function loadPage should be re-written using jquery : $post(). 应使用jquery：$ post（）重写函数loadPage。 This is a random shot, not tested: 这是随机拍摄，未经测试：
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;
} );
}
Be warned, I did not test it, and I might get this function a little wrong. 请注意，我没有测试它，我可能会觉得这个功能有点不对劲。 But... dud, you are using jQuery already - now abuse it! 但是...... dud，你已经在使用jQuery了 - 现在滥用它！ :) :)
解决方案4
1 2009-09-28 17:53:09
When considering implementing an AJAX pattern on a website you should first ask yourself the question: why? 在考虑在网站上实施AJAX模式时，首先应该问自己一个问题：为什么？ There are several good reasons to implement AJAX but also several bad reasons depending on what you're trying to achieve. 实现AJAX有几个很好的理由，但也有几个不好的原因取决于你想要实现的目标。
For example, if your website is like Facebook, where you want to offer end-users with a rich user interface where you can immediately see responses from friends in chat, notifications when users post something to your wall or tag you in a photo, without having to refresh the entire page, AJAX is GREAT! 例如，如果您的网站就像Facebook，您希望为最终用户提供丰富的用户界面，您可以在聊天时立即看到朋友的回复，当用户将某些内容发布到您的墙上或在照片中为您添加标签时发出通知不得不刷新整个页面，AJAX很棒！
However, if you are creating a website where the main content area changes for each of the top-level menu items using AJAX, this is a bad idea for several reasons: First, and what I consider to be very important, SEO (Search Engine Optimization) is NOT optimized . 但是，如果您使用AJAX创建一个主要内容区域为每个顶级菜单项更改的网站，这是一个坏主意有几个原因：首先，我认为非常重要， SEO（搜索引擎）优化）未优化 。 Search engine crawlers do not follow AJAX requests unless they are loaded via the onclick event of an anchor tag. 搜索引擎抓取工具不遵循AJAX请求，除非它们是通过锚标记的onclick事件加载的。 Ultimately, in this example, you are not getting the value out of the rich experience, and you are losing a lot of potential viewers. 最终，在这个例子中，你没有从丰富的经验中获得价值，而且你正在失去很多潜在的观众。
Second, users will have trouble bookmarking pages unless you implement a smart way to parse URLs to map to AJAX calls. 其次，除非您实现一种智能方法来解析URL以映射到AJAX调用，否则用户将无法为页面添加书签 。
Third, users will have problems properly navigating using the back and forward buttons if you have not implemented a custom client-side mechanism to manage history. 第三，如果您尚未实现管理历史记录的自定义客户端机制，则用户将无法使用后退和前进按钮正确导航 。
Lastly, each browser interprets JavaScript differently, and with the more JavaScript you write, the more potential there is for losing cross browser compatibility unless you implement a framework that such as jQuery, Dojo, EXT, or MooTools that handles most of that for you. 最后，每个浏览器以不同的方式解释JavaScript，并且随着您编写的JavaScript越多，失去跨浏览器兼容性的可能性就越大，除非您实现了一个框架，例如jQuery，Dojo，EXT或MooTools，它们可以为您处理大部分内容。
解决方案5
1 2011-02-07 09:09:36
gabtub you are not wrong, you can get working AJAX intensive web sites SEO compatible, with bookmarking, Back/Forward buttons (history navigation in general), working with JavaScript disabled (avoiding site duplication), accessible... gabtub你没有错，你可以使用兼容的AJAX密集型网站，带书签，后退/前进按钮（一般的历史导航），禁用JavaScript（避免网站重复），可访问......
There is one problem, you must get back to server-centric. 有一个问题，你必须回到以服务器为中心。
You can get some "howtos" here . 你可以在这里得到一些“howtos”。 And take a look to ItsNat . 并看看ItsNat 。
解决方案6
0 2009-09-24 10:33:33
How about unobtrusivity (or how should I call it?)? 如何不引人注目（或者我应该怎么称呼它？）？
If the user has no javascript for some reason, he'll only see a list with Welcome and Page1. 如果用户由于某种原因没有javascript，他只会看到一个包含Welcome和Page1的列表。
解决方案7
0 2009-09-24 10:35:13
Yes it's wrong. 是的，这是错的。 What about users without JavaScript? 那些没有JavaScript的用户呢？ Why not do this sort of work server-side? 为什么不在服务器端做这种工作呢？ Why pay the cost of multiple HTTP requests instead of including the files server-side so they can be downloaded in a single fetch? 为什么要支付多个HTTP请求的成本而不是包括服务器端的文件，以便可以在单个提取中下载它们？ Why pay the cost of non-JavaScript enabled clients not being able to view your stuff (Google's spider being an important user who'll be alienated by this approach)? 为什么要支付不支持JavaScript的客户无法查看您的内容的费用（Google的蜘蛛是一个重要的用户，会被这种方法疏远）？ Why? 为什么？ Why? 为什么？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.