如何使用jQuery为HTML5和CSS3编程进行Ajax请求
像jQuery这样的Ajax库的主要目的是简化HTML5和CSS3程序员的Ajax请求。
很难相信这可以用jquery有多容易。
如何包含带有ajax的文本文件
查看此干净代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax.html</title>
<script type = "text/javascript"
src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript">
$(document).ready(getAJAX);
function getAJAX(){
$("#output").load("hello.txt");
}
</script>
</head>
<body>
<div id = "output"></div>
</body>
</html>
HTML非常干净。
它只是创建了一个名为输出的空的div。
此示例确实使用AJAX，因此如果它不起作用，我们可能需要记住有关AJAX如何工作的一些详细信息。
使用AJAX的程序应通过Web服务器运行，而不仅仅是来自本地文件。
此外，被读取的文件应在同一服务器上作为制作AJAX请求的程序。
这里描述的加载()机制适用于我们要将普通文本或者HTML代码片段加载到页面中的基本情况。
用Ajax建立一个穷人的CMS
Ajax和jQuery可以是建立高效的一种非常有用的方法，即使没有服务器端编程也是如此。
通常，基于一系列较小的元素，可以交换和重复使用。
我们可以使用AJAX构建一个框架，允许轻松重用和修改Web内容。
虽然从用户的角度来看，令人震惊的是，请看看代码可以显示一些惊喜：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>CMS Using AJAX</title>
<link rel = "stylesheet"
type = "text/css"
href = "cmsStd.css"
<script type = "text/javascript"
src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript">
$(init);
function init(){
$("#heading").load("head.html");
$("#menu").load("menu.html");
$("#content1").load("story1.html");
$("#content2").load("story2.html");
$("#footer").load("footer.html");
};
</script>
</head>
<body>
<div id = "all">
<!-- This div centers a fixed-width layout →
<div id = "heading">
</div><!-- end heading div →
<div id = "menu">
</div> <!-- end menu div →
<div class = "content"
id = "content1">
</div> <!-- end content div →
<div class = "content"
id = "content2">
</div> <!-- end content div →
<div id = "footer">
</div> <!-- end footer div →
</div> <!-- end all div →
</body>
</html>
查看代码，我们可以看到这些有趣的函数：
页面没有内容！所有的div都是空的。本文档中屏幕截图中显示的文本都不存在，但是全部动态地从较小的文件中拉动。
该页面由空名为div组成。该页面而不是任何特定内容，都包含ids的占位符。
它使用jquery。 jQuery库用于通过Ajax调用大大简化加载数据。
所有内容都属于单独的文件。查看目录，我们可以看到非常简单HTML文件，其中包含页面的小部分。例如，Story1.html如下所示：
<h2>Book I - Creating the HTML Foundation</h3> <ol> <li>Sound HTML Foundations</li> <li>It's All About Validation</li> <li>Choosing your Tools</li> <li>Managing Information with Lists and Tables</li> <li>Making Connections with Links</li> <li>Adding Images</li> <li>Creating forms</li> </ol>
init()方法在document.ready上运行。准备好文件时，页面运行init()方法。
init()方法使用Ajax调用来动态加载内容。它只不过是一系列jQuery load()方法。
这种方法看起来像很多工作，但它有一些非常有趣的特点：
如果我们正在使用几页构建一个大站点，通常希望设计一次视觉外观并重复重复使用相同的常规模板。
此外，我们可能有一些元素将在几页上一致。我们可以简单地创建默认文档并为每个页面复制并粘贴它，但此方法会变得混乱。如果我们根据模板创建了100页，然后需要更改标题，会发生什么？我们需要在100个不同的页面上进行更改。
模板样式方法的优势是代码重用。
就像使用外部样式一样，我们可以将跨越数百个文档的样式表乘以，设计模板而无需内容允许我们将代码片段存储在较小的文件中并重用它们。
所有100页指向相同的菜单文件，因此如果要更改菜单，请更改一个文件，一切更改。
以下是我们使用这种方法的方式：
为整个站点创建一个模板。
构建基本HTML和CSS来管理整个的整体外观和感受。别担心内容。只需为页面的所有组件构建占位符。请务必为每个元素提供一个ID并编写CSS以获取定位定位的内容。添加jQuery支持。
制作到jQuery库的链接，并制作默认init()方法。放入代码以处理填充将始终保持一致的页面的这些部分。复制模板。
在我们有一个感觉后，模板如何工作，为我们的每个页面制作副本。通过更改init()函数自定义每个页面。
模板的唯一部分是init()函数。所有页面都将是相同的，除了它们具有加载不同内容的自定义init()函数。将自定义内容加载到具有Ajax的div中。
使用init()函数将内容加载到每个div中。
这是管理内容的好方法，但它不是一个完整的内容管理系统。
即使是Ajax也不能完全允许我们在Web上存储内容。
更复杂的内容管理系统还使用数据库而不是文件来处理内容。
我们需要某种服务器端编程(如PHP)，通常是数据库(如MySQL)来处理这种工作。
