gab*_*tub 2 html javascript jquery
我建立了一个网站,专注于只加载必须加载的数据.我在这里构建了一个示例,并想知道这是否是构建wegpage的好方法.在构建这样的网站时存在一些问题,例如
所以这是一个例子:
的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的用户,仍然可以以静态形式提供整个页面(另外).例如
<li><a href="static/Welcome.html" class="nav" id="link_Welcome">Welcome</a></li>
这个Welcome.html将包含基本index.html文件的所有开销.通过这样做,使用页面版本的ajax将是某种额外的功能,不是吗？
这是错误使用AJAX(或与此有关的任何JavaScript)只使用它(除非你正在学习如何使用Ajax是不同势物质).
在某些情况下,javascript的使用是好的(大多数情况下,当你在浏览器窗口中构建自定义用户界面时)以及AJAX真正闪耀的时候.但是使用javascript加载静态网页是非常错误的:首先,你将自己绑定到可以运行JS的浏览器,其次是增加服务器和客户端的负载.