本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第1章，第1.1节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
第 1 章 动态Web编程简介
本章介绍如下内容：
- 为创建动态网页做准备；
- 搭建友好的jQuery和JavaScript开发环境；
- 在网页中添加JavaScript和jQuery；
- 打造支持jQuery和JavaScript的网页结构；
- 使用jQuery和JavaScript创建第一个动态网页。
JavaScript及其配套库jQuery彻底改变了交互式网页和Web应用开发的游戏规则。长期以来，JavaScript一直是重要的动态网页开发工具，而随着jQuery、jQuery UI和jQuery Mobile等库的发展，Web开发与以前完全不同了。
本章简要地介绍jQuery和JavaScript开发领域。为此，将首先确保您明白动态Web开发。要有效地使用JavaScript和jQuery，您必须对Web服务器和Web浏览器之间的交互以及HTML和CSS有深入认识。
本章首先简要地介绍Web服务器和Web浏览器之间的交互及其涉及的各种技术，然后搭建并配置友好的jQuery和JavaScript开发环境，最后引领您编写第一个包含JavaScript和jQuery代码的网页。
1.1 理解Web服务器浏览器范式
Web服务器和Web浏览器之间的通信涉及很多组件，而JavaScript和jQuery能够与其中的每个主要组件交互。为帮助您更深入地认识这种交互，本节简要地介绍Web服务器/浏览器通信涉及的概念和技术。这里无意于做全面介绍，而只做大致讨论，让您能够明白这些技术之间的关系。
1.1.1 Web服务器与Web浏览器通信涉及的术语
您对万维网的基本概念应该相当熟悉：在Web浏览器中输入地址或单击后，就将显示可用的信息。浏览器发送请求，服务器发送响应，浏览器再将其显示给用户。
这里的概念虽然简单，但必须执行多个步骤。接下来介绍涉及的组件、这些组件如何交互以及JavaScript和jQuery如何参与这些交互。
1．Web服务器
Web服务器是最重要的Web组件，没有它就没有数据可用。收到浏览器的请求后，Web服务器做出响应，浏览器再将这些数据显示出来。为响应浏览器，Web服务器需要做很多工作。例如，Web服务器及其组件检查请求的格式和有效性；为确保安全，它们还可能核实请求是否来自获得授权的用户。接下来，为生成响应，服务器可能与多个组件（乃至远程服务器）交互，以获得必要的数据。
2．浏览器
除Web服务器外，最重要的组件就是浏览器了。浏览器向Web服务器发送请求，再向用户显示结果。浏览器在幕后执行了很多操作，它必须对来自服务器的响应进行分析，再决定如何向用户显示它们。
市面上的浏览器有很多，其中最受欢迎的是Firefox、Internet Explorer和Chrome。在显示网页方面，每款浏览器的行为都大致相同，但也存在一些差异。有鉴于此，对于您编写的JavaScript和jQuery脚本，必须在每款要支持的浏览器中进行详尽的测试。
浏览器收到响应后，将向用户显示最终输出，而JavaScript和jQuery可深深地涉足其中。对于从服务器返回的数据，这些脚本可修改其格式、内容、外观和行为。下面介绍浏览器的重要组成部分。
（1）DOM
浏览器通过创建文档对象模型（DOM）来渲染网页。DOM是一个树形结构，其根对象为HTML文档。根对象可能有多个子对象，而子对象又可包含其他子对象。例如，在包含一个列表的网页中，根对象有一个类型为列表的子对象，而这个子对象又有多个类型为列表元素的子对象。下面是一个简单的DOM树，它应用的网页包含一个标题以及一个由三个城市组成的列表。
浏览器知道如何显示DOM中的每个节点；为渲染网页，它读取每个节点并在浏览器窗口中绘制相应的像素。正如您在后面将看到的，JavaScript和jQuery让您能够直接与DOM交互：读取对象、修改对象乃至删除和添加对象。
（2）浏览器事件
浏览器跟踪多种事件，如网页加载完毕以及用户离开当前网页、按键、移动或单击鼠标，这些事件对jQuery和JavaScript程序来说至关重要。在JavaScript中，可根据事件的类型及其发生的位置采取响应的措施。
（3）浏览器窗口
浏览器还提供了有限的浏览器窗口访问功能，这让您能够使用JavaScript确定浏览器窗口的尺寸以及其他重要信息，进而根据这些信息决定脚本应如何做。
3．URL
浏览器使用统一资源定位符（URL）来访问Web服务器上的文件。URL是独一无二的地址，用于访问Web服务器上的数据；Web服务器将URL关联到特定文件或资源。Web服务器知道如何分析URL，以决定使用哪些文件/资源来生成提供给浏览器的响应。在有些情况下，可能需要使用JavaScript来分析和生成URL，需要动态地链接到其他网页时尤其如此。
4．HTML/HTML5
超文本标记语言（HTML）提供了基本的网页构件。HTML定义了一组元素，用于表示要加入到网页中的内容。每个元素都用一对标签括起，其语法如下。
例如，请看下面的元素。
浏览器知道如何正确地渲染每个标签的内容。例如，标签
用于表示段落，浏览器将在屏幕上显示起始标签
和结束标签
之间的文本。HTML文件包含的标签的类型和位置决定了网页的格式和外观。浏览器读取标签，再按指定的方式渲染内容。
HTML5是下一代HTML，新增了一些媒体元素，如音频和视频。它还提供了大量的矢量图形标签，让您能够使用JavaScript直接在网页上绘制清晰的图像。
程序清单1.1所示的HTML可用于生成一个包含城市列表的简单网页。浏览器对其进行渲染后，得到的输出如图1.1所示。
程序清单1.1 一个简单的HTML文档，演示了在浏览器中渲染列表所需的HTML代码
5．CSS
创建网页时，面临的挑战之一是让它们看起来既漂亮又专业。浏览器默认提供的外观虽然可行，但与当今互联网用户期望的时尚而性感相距甚远。
层叠样式表（CSS）让您能够轻松地指定浏览器该如何渲染HTML元素。使用CSS可指定布局，还可指定各个元素在网页上的外观。为演示这一点，我给程序清单1.1所示的示例添加了一些CSS代码。在程序清单1.2中，第7～13行使用CSS修改了多种属性：修改了文本对齐方式和字体样式，还将项目列表符号从点改成了飞机图像，如图1.2所示。
程序清单1.2 在
6．HTTP/HTTPS协议
超文本传输协议（HTTP）定义了浏览器和Web服务器之间的通信。它定义了可发出的请求类型以及这些请求和HTTP响应的格式。
使用安全套接字层的超文本传输协议（HTTPS）添加了一个安全层（SSL/TLS），以确保连接的安全。Web浏览器通过HTTPS连接到Web服务器时，将获得一个证书，而用户可决定是否接受该证书。没有证书的用户发出请求时，Web服务器不会做出响应，这可确保请求来自安全的发起方。
下面简要地介绍HTTP报头以及两种最常见的HTTP请求：GET请求和POST请求。
（1）HTTP报头
HTTP报头让浏览器能够指定发送给服务器的请求以及从服务器返回的响应的行为和格式。 HTTP报头是随HTTP请求和响应一起发送的。可使用JavaScript向Web服务器发送HTTP请求，因此您必须对其报头有大致了解。
Web服务器读取请求报头，并根据它们来决定如何生成发送给浏览器的响应。在响应中，Web浏览器添加响应报头，让浏览器知道如何处理响应中的数据。处理响应并渲染网页时，浏览器将首先读取并使用响应报头。
下面是一些常见的HTTP报头。
- ACCEPT：指定响应可包含的内容类型。
- AUTHORIZATION：指定身份验证凭证，用于对发出请求的用户进行身份验证。
- COOKIE：浏览器之前应服务器请求而设置的Cookie值。Cookie是存储在客户端的键值对，可能是应服务器请求而设置的，也可能是使用JavaScript代码设置的；浏览器向服务器发送HTTP请求时，将同时发送Cookie。
- SET-COOKIE：来自服务器的Cookie值，浏览器启用了Cookie时将存储这些值。
- CONTENT-TYPE：来自Web服务器的响应包含的内容的类型。例如，对于文本，这个字段可能是“text/plain”，而对于.png图像，这个字段为“image/png”。
- CONTENT-LENGTH：请求体或响应体包含的数据量。
HTTP请求和响应使用的报头还有很多，但上述清单足以让您对这些报头的用法有深入认识。
（2）GET请求
最常见的HTTP请求类型是GET请求。GET请求通常用于从Web服务器获取信息，如加载网页或获取要在网页上显示的图像。在浏览器中输入的URL中，指定了要获取的文件，如下所示。
GET请求只包含报头，而没有请求体数据。然而，要通过GET请求向服务器传递数据，可使用查询字符串。查询字符串作为URL的一部分被发送给Web服务器。要指定查询字符串，可在URL后面添加一个?字符，再指定一个或多个键值对（不同的键值对用&分隔），如下面的语法所示。
例如，下面的URL包含一个查询字符串，指定将参数gallery及其值01发送给服务器。
（3）POST请求
POST请求不同于GET请求，它没有查询字符串，而将需要发送给服务器的数据都编码到请求体中。POST请求通常用于修改Web服务器上数据的状态，例如，添加新用户的表单将其中的信息作为POST请求体的一部分发送给服务器。
1.1.2 Web服务器和客户端脚本编程
最初，网页是静态的，这意味着浏览器渲染的文件就是存储在服务器上的文件，如图1.3所示。当试图打造支持用户交互、富媒体元素和大量数据的现代网站时，为支持各种静态网页而需要提供的网页数量将急剧增加。
一种更好的方式是，不在Web服务器上存储大量的静态HTML文件，而使用脚本根据Web服务器提供的数据动态地生成HTML，再由浏览器进行渲染。
这些脚本可以运行在服务器上，也可以运行在浏览器中。下面讨论这两种方法。大多数现代网站都结合使用服务器端和客户端脚本。
1．服务器端脚本编程
服务器端脚本编程指的是将服务器数据转换为HTML响应，再将其发送给浏览器。服务器端脚本编程的主要优点是，数据处理都是在服务器端完成的，从不通过互联网发送原始数据；另外，问题和数据修复都将在服务器中进行。其缺点是要求服务器有更大的处理能力，这可能降低有些应用的可扩展性。程序清单1.3是一个简单的PHP脚本，它动态地将城市列表添加到HTML文档中，再将该文档发送给浏览器。
图1.4是一个使用PHP服务器端脚本的示例。注意到发送给浏览器的文件与存储在服务器上的文件不同，但发送给浏览器的文件与浏览器渲染的文件相同。
程序清单1.3 一个在服务器上运行的PHP脚本，它填充城市列表项
2．客户端脚本编程
客户端脚本编程指的是将代码与网页一起发送给浏览器。这些代码要么在网页加载期间执行，要么在网页加载后执行。
客户端脚本编程有两大优点。一是数据处理将在客户端进行，这使得更容易扩展应用以支持大量用户；二是浏览器事件通常可在本地进行处理，无需向服务器发送请求，这让界面对用户交互的响应速度能够快得多。
JavaScript和jQuery无疑是最常用客户端脚本编程方式，本书将指出其中的原因。
（1）JavaScript是什么
JavaScript是一种编程语言，与其他编程语言很像。相比于其他编程语言，JavaScript的最大不同在于，浏览器内置了一个解释器，能够分析并执行JavaScript代码。这意味着使用JavaScript可编写能够直接访问浏览器和DOM的复杂应用。
能够访问DOM意味着可在网页中添加、修改或删除元素，而无需重新加载网页；能够访问浏览器意味着能够访问鼠标移动和单击等事件，这让JavaScript能够提供动态列表和拖放等功能。
（2）jQuery是什么
jQuery是个JavaScript库，其底层代码是使用JavaScript编写的，但将大量JavaScript代码封装成了易于使用的功能。jQuery的两大优点是提供了选择器和内置函数。
选择器让您能够快速访问特定的网页元素，如列表或表格。选择器还让您能够访问一系列元素，如所有段落或所有特定类的段落。这让您能够快速而轻松地访问特定的DOM元素。
jQuery还提供了大量内置功能，让您使用少量代码就能完成大量工作。例如，要隐藏特定元素或以动画方式调整元素的大小，只需编写一行代码。
（3）客户端脚本编程示例
程序清单1.4是一个简单的JavaScript客户端脚本。图1.5说明了数据在Web服务器和浏览器之间的传输过程。注意到存储在服务器的文件与发送给浏览器的文件相同，但JavaScript修改了浏览器加载的HTML文档。
程序清单1.4 一个简单的JavaScript客户端脚本，它在浏览器中运行以填充城市列表项
3．AJAX
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）指的是在网页加载后，使用JavaScript持续地与Web服务器通信。AJAX避免了用户交互时重新加载当前网页或加载其他网页，这减少了最初的Web服务器响应需要包含的数据量，还提高了网页的交互性。
为提供一个简单的AJAX示例，我编写了两个脚本：程序清单1.5和程序清单1.6。程序清单1.5是一个HTML文档，其中包含一些JavaScript代码，这些代码在网页加载后在客户端运行：向服务器发出AJAX请求，以便通过程序清单1.6所示的服务器端PHP脚本获取城市列表，再使用返回的城市列表生成HTML列表元素。
程序清单1.5 一个简单的JavaScript客户端脚本，它向服务器发出AJAX请求以获取城市列表，
再使用它来生成HTML列表元素
程序清单1.6 一个服务器端PHP脚本，它返回一个简单的JSON字符串，供程序
清单1.5所示的JavaScript脚本进行分析和使用
图1.6说明了AJAX请求/响应期间发生的通信过程。注意到再次向服务器发送了请求，以获取城市列表。
