如何使用jQuery进行AJAX请求以进行HTML5和CSS3编程
像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请求的程序位于同一服务器上。
此处描述的load()机制适用于您要将纯文本或者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>
查看代码，您会看到以下有趣的功能：
该页面无内容！所有的divs都是空的。
该文档中没有显示屏幕快照中显示的所有文本，但是所有文本都是从较小的文件中动态提取的。该页面由空的命名div组成。
该页面由具有ID的占位符组成，而不是任何特定内容。它使用jQuery。
jQuery库用于极大地简化通过AJAX调用加载数据的过程。所有内容都在单独的文件中。
浏览目录，您会看到非常简单的HTML文件，其中包含页面的一小部分。
例如，story1.html如下所示：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也无法完全允许您将内容存储在网络上。
更复杂的内容管理系统还使用数据库而不是文件来处理内容。
您需要某种服务器端编程(如PHP)，通常需要一个数据库(如mySQL)来处理此类工作。
