使用非JavaScript替代方案开发Javascript网页
我重新开发了一个网页,之前所有的页面布局和搜索结果都是在服务器上用PHP生成的,然后在页面完成后显示在页面上.这很慢.
为了提高性能和响应能力,新版本仅为页面加载页眉/页脚,然后使用javascript创建剩余的布局,然后使用AJAX请求动态填充结果.
这样做的缺点是,如果没有javascript支持,页面显然无法正常加载.我想要做的是找到一种方法来回退旧的PHP代码,如果没有启用javascript,布局和结果.
我已经尝试将旧代码添加到我的新页面和非JavaScript浏览器中,这很好.但是在javascript浏览器中它会加载所有内容 - 使用新的javascript布局和结果代码以及旧的PHP代码.
因为PHP代码是在javascript代码之前执行的,所以无论如何我都看不到这一点.我在这里完全错过了什么吗？
谢谢你的指导.
你想做的是一种称为渐进增强的东西.
此图片来自我发布的链接:
简而言之,这描述的是您的网站应该在没有CSS或JavaScript的情况下达到基本的最小功能.换句话说,如果你有一些网站,你应该有这样的东西:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<h1>Introduction to semantic HTML</h1>
<p>You use H tags for headings, search engines like that.
Paragraph tags for paragraphs</p>
<a href="http://example.com/">Hyperlinks make sense</a>
<div>
<p>Divs can be used to create seperate areas for content</p>
</div>
</body>
</html>
这看起来像什么？
在现代Web浏览器中:
在许多人使用的命令行浏览器中:
CSS和JavaScript应该增强这个基本功能,而不是它所必需的.
当我转到您的网站并请求http://example.com/Foo我应该看到
<!DOCTYPE html>
<html>
<head>
<title>Foo page</title>
<script>/*Whatever script that does your ajaxy stuff*/</script>
</head>
<body>
<h1>Foo page</h1>
<p>Foo content</p>
<a href="http://example.com/bar">Click here to goto bar.</a>
<div>
<p>Divs can be used to create seperate areas for content</p>
</div>
</body>
</html>
我不应该看到的是:
<!DOCTYPE html>
<html>
<head>
<title>Foo page</title>
<script>/*Whatever script that does your ajaxy stuff*/</script>
<script>/*Script to Load in the main content for the body*/</script>
</head>
<body>
<noscript>
<p>Sorry, for some reason I decided you need
javascript and a modern desktop browser to see
the basic line of text you wanted.</p>
</noscript>
</body>
</html>
因此,不是让您的页面根据浏览器中页面的URL加载内容,而是应该从服务器端传递页面,这样当您请求/ foo时,您将获得所有foo HTML.然后在加载时,编写JavaScript,通过使特定的导航链接加载正文内容来逐步增强页面.这样,当JS被禁用时,它就可以工作,并且当启用JS时,您的内容加载速度更快.
从可用性的角度来看最后一点.
如果你要做这个ajaxy的东西,请,请确保你确保捕获所有HTTP错误代码并做正确的事情,例如提醒用户加载页面时出错,并显示加载图形.Ajaxy网站试图加载内容,当我有一个缓慢的网络,并没有向我显示任何与加载内容或发生的错误相关的事情,让我挂出来让我感到非常愤怒的用户离开你的网站,永远不会回来.