PHP 和 AJAX
AJAX 简介
AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。
AJAX 基于开放的标准
AJAX 基于以下开放的标准：
JavaScript
XML
HTML
CSS
在 AJAX 中使用的开放标准被良好地定义，并得到所有主要浏览器的支持。AJAX 应用程序独立于浏览器和平台。（可以说，它是一种跨平台跨浏览器的技术）。
AJAX 事关更好的 Internet 应用程序
与桌面应用程序相比，Web 应用程序有很多优势：
可拥有更多用户
更容易安装和维护
更容易开发
但是， 应用程序不总是象传统应用程序那样强大和友好。
通过 AJAX，可以使 Internet 应用程序更加强大（更轻巧、更快速，且更易使用）。
今天您就可以开始使用 AJAX
没有什么新知识需要学习。
AJAX 基于开放的标准。而这些标准已被大多数开发者使用多年。
大多数 web 应用程序可通过使用 AJAX 技术进行重写，来替代传统的 HTML 表单。
AJAX 使用 XML 和 HTTP 请求
传统的 web 应用程序会把数据提交到 web 服务器（使用 HTML 表单）。在 web 服务器把数据处理完毕之后，会向用户返回一张完整的新网页。
由于每当用户提交输入，服务器就会返回新网页，传统的 web 应用程序往往运行缓慢，且越来越不友好。
通过 AJAX，web 应用程序无需重载网页，就可以发送并取回数据。完成这项工作，需要通过向服务器发送 HTTP 请求（在幕后），并通过当服务器返回数据时使用 JavaScript 仅仅修改网页的某部分。
一般使用 XML 作为接收服务器数据的格式，尽管可以使用任何格式，包括纯文本。
您将在本教程接下来的章节学习到如何完成这些工作。
PHP 和 AJAX
不存在什么 AJAX 服务器。
AJAX 是一种在浏览器运行的技术。它使用浏览器与 web 服务器之间的异步数据传输，使网页从服务器请求少量的信息，而不是整张页面。
AJAX 是一种独立于 web 服务器软件的 web 浏览器技术。
但是，在本教程中，我们将集中在运行在 PHP 服务器上的实际案例，而不是 AJAX 的工作原理。
如需阅读更多有关 AJAX 如何工作的知识，请访问我们的 AJAX 教程。
AJAX XMLHttpRequest
XMLHttpRequest 对象使 AJAX 成为可能。
XMLHttpRequest
XMLHttpRequest 对象是 AJAX 的关键。
该对象在 Internet Explorer 5.5 与 2000 年 7 月发布之后就已经可用了，但是在 2005 人们开始讨论 AJAX 和 Web 2.0 之前，这个对象并没有得到充分的认识。
创建 XMLHttpRequest 对象
不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
Internet Explorer 使用 ActiveXObject。
其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
要克服这个问题，可以使用这段简单的代码：
例子解释 - HTML 表单
正如您看到的，上面的 HTML 页面含有一个简单的 HTML 表单，其中带有一个名为 "txt1" 的输入字段。
该表单是这样工作的：
当用户在输入域中按下并松开按键时，会触发一个事件
当该事件被触发时，执行名为 showHint() 的函数
表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。
JavaScript
JavaScript 代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档：
"gethint.php" 中的代码会检查名字数组，然后向客户端返回对应的名字：
如果存在从 JavaScript 送来的文本 (strlen($q) > 0)，则：
找到与 JavaScript 所传送的字符相匹配的名字
如果找到多个名字，把所有名字包含在 response 字符串中
如果没有找到匹配的名字，把 response 设置为 "no suggestion"
如果找到一个或多个名字，把 response 设置为这些名字
把 response 发送到 "txtHint" 占位符
PHP 和 AJAX XML 实例
AJAX XML 实例
在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 XML 文件中读取信息。
在下面的下列列表中选择一个 CD
在此列出 CD 信息。
本例包括三张页面：
一个简单 HTML 表单
一个 XML 文件
一个 JavaScript 文件
一张 PHP 页面
HTML 表单
上面的例子包含了一张简单的 HTML 表单，以及指向 JavaScript 的链接：
例子解释：
正如您看到的，它仅仅是一张简单的 HTML 表单，其中带有名为 "cds" 的下拉列表。
表单下面的段落包含了一个名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的数据的占位符。
当用户选择数据时，会执行名为 "showCD" 的函数。这个函数的执行是由 "onchange" 事件触发的。
换句话说，每当用户改变了下拉列表中的值，就会调用 showCD 函数。
XML 文件
XML 文件是 "cd_catalog.xml"。该文件中包含了有关 CD 收藏的数据。
JavaScript
这是存储在 "selectcd.js" 文件中的 JavaScript 代码：
这张页面是用 PHP 编写的，使用 XML DOM 来加载 XML 文档 "cd_catalog.xml"。
代码运行针对 XML 文件的查询，并以 HTML 返回结果：
循环所有 "artist" 元素 (nodetypes = 1)，查找与 JavaScript 所传数据向匹配的名字
找到 CD 包含的正确 artist
输出 album 的信息，并发送到 "txtHint" 占位符
PHP 和 AJAX MySQL 数据库实例
AJAX 数据库实例
在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 MySQL 数据库中读取信息。
在下拉列表中选择一个名字 （测试说明：该实例功能未实现）
在此列出用户信息。
此列由四个元素组成：
MySQL 数据库
简单的 HTML 表单
JavaScript
PHP 页面
数据库
将在本例中使用的数据库看起来类似这样：
HTML 表单
上面的例子包含了一个简单的 HTML 表单，以及指向 JavaScript 的链接：
例子解释 - HTML 表单
正如您看到的，它仅仅是一个简单的 HTML 表单，其中带有名为 "users" 的下拉列表，这个列表包含了姓名，以及与数据库的 "id" 对应的选项值。
表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。
当用户选择数据时，执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。
换句话说：每当用户改变下拉列表中的值，就会调用 showUser() 函数。
JavaScript
这是存储在 "selectuser.js" 文件中的 JavaScript 代码：
该页面用 PHP 编写，并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：
例子解释：
当查询从 JavaScript 被发送到这个 PHP 页面，会发生：
PHP 打开到达 MySQL 服务器的连接
找到拥有指定姓名的 "user"
创建表格，插入数据，然后将其发送到 "txtHint" 占位符
PHP 和 AJAX responseXML 实例
AJAX 可用于以 XML 返回数据库信息。
AJAX Database 转 XML 实例 （测试说明：该实例功能未实现）
在下面的 AJAX 实例中，我们将演示网页如何从 MySQL 数据库中读取信息，把数据转换为 XML 文档，并在不同的地方使用这个文档来显示信息。
本例与上一节中的 "PHP AJAX Database" 这个例子很相似，不过有一个很大的不同：在本例中，我们通过使用 responseXML 函数从 PHP 页面得到的是 XML 形式的数据。
把 XML 文档作为响应来接收，使我们有能力更新页面的多个位置，而不仅仅是接收一个 PHP 输出并显示出来。
在本例中，我们将使用从数据库接收到的信息来更新多个 <span> 元素。
在下拉列表中选择一个名字
此列由四个元素组成：
MySQL 数据库
简单的 HTML 表单
JavaScript
PHP 页面
数据库
将在本例中使用的数据库看起来类似这样：
HTML 表单
上面的例子包含了一个简单的 HTML 表单，以及指向 JavaScript 的链接：
例子解释 - HTML 表单
HTML 表单是一个下拉列表，其 name 属性的值是 "users"，可选项的值与数据库的 id 字段相对应
表单下面有几个 <span> 元素，它们用作我们所接收到的不同的值的占位符
当用户选择了具体的选项，函数 "showUser()" 就会执行。该函数的执行由 "onchange" 事件触发
换句话说，每当用户在下拉列表中改变了值，函数 showUser() 就会执行，并在指定的 <span> 元素中输出结果。
JavaScript
这是存储在文件 "responsexml.js" 中的 JavaScript 代码：
从这个 XML 文档中取回数据，把它们放在正确的 "span" 元素中
PHP 页面
这个由 JavaScript 调用的服务器页面，是一个名为 "responsexml.php" 的简单的 PHP 文件。
该页面由 PHP 编写，并使用 MySQL 数据库。
代码会运行一段针对数据库的 SQL 查询，并以 XML 文档返回结果：
例子解释：
当查询从 JavaScript 送达 PHP 页面时，会发生：
PHP 文档的 content-type 被设置为 "text/xml"
PHP 文档被设置为 "no-cache"，以防止缓存
用 HTML 页面送来的数据设置 $q 变量
PHP 打开与 MySQL 服务器的连接
找到带有指定 id 的 "user"
以 XML 文档输出数据
PHP 和 AJAX Live Search
AJAX 可为用户提供更友好、交互性更强的搜索体验。
AJAX Live Search
在下面的 AJAX 例子中，我们将演示一个实时的搜索。
实时的搜索与传统搜索相比，具有很多优势：
当键入数据时，就会显示出匹配的结果
当继续键入数据时，对结果进行过滤
如果结果太少，删除字符就可以获得更宽的范围
在下面的文本框中搜索 W3School 的页面
本例包括四个元素：
简单的 HTML 表单
JavaScript
PHP 页面
XML 文档
在本例中，结果在一个 XML 文档 (links.xml) 中进行查找。为了让这个例子小而简单，我们只提供 8 个结果
HTML 表单
这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 JavaScript 的链接：
例子解释 - HTML 表单
正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。
表单是这样工作的：
当用户在文本框中按键并松开按键时，会触发一个事件
当事件触发时，会执行名为 showResult() 的函数
表单下面是名为 "livesearch" 的 <div> 元素。它用作 showResult() 所返回数据的占位符
JavaScript
JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中：
"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档 w3school.com.cn 上的一些页面的标题和 URL。
这些代码会搜索 XML 文件中匹配搜索字符串的标题，并以 HTML 返回结果：
例子解释：
如果从 JavaScript 送来了任何文本 (strlen($q) > 0)，会发生：
PHP 创建 "links.xml" 文件的一个 XML DOM 对象
遍历所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所传数据的 name
找到包含正确 title 的 link，并设置为 "$response" 变量。如果找到多于一个匹配，所有的匹配都会添加到变量
如果没有找到匹配，则把 $response 变量设置为 "no suggestion"
$result 是送往 "livesearch" 占位符的输出
PHP 和 AJAX RSS 阅读器
RSS 阅读器用于阅读 RSS Feed。
RSS 允许对新闻和更新进行快速浏览。
AJAX RSS 阅读器
在下面的 AJAX 实例中，我们将演示一个 RSS 阅读器，通过它，来自 RSS 的内容在不进行刷新的情况下载入网页。
在下面的列表框中选择一个 RSS 新闻订阅
在此列出 RSS Feed。
本例包括三个元素：
简单的 HTML 表单
JavaScript
PHP 页面
HTML 表单
这是 HTML 页面。它包含一个简单的 HTML 表单和执行一个 JavaScript 文件的链接：
例子解释 - HTML 表单
正如您看到的，上面的 HTML 页面包含一个简单的 HTML 表单，其中带有一个下拉列表框。
表单是这样工作的：
当用户选择下拉框中的选项时，会触发一个事件
当事件触发时，执行 showRSS() 函数
表单下面是名为 "rssOutput" 的一个 <div>。它用作 showRSS() 函数所返回的数据的占位符。
JavaScript
JavaScript 代码存储在 "getrss.js" 中，它与 HTML 文档相连接：
例子解释：
当一个选项从 JavaScript 发送时，会发生：
PHP 找出哪个 RSS feed 被选中
为选中的 RSS feed 创建 XML DOM 对象
找到并输出来自 RSS 频道的元素
遍历前三个 RSS 项目中的元素，并进行输出
PHP 和 AJAX 投票
AJAX 投票
在这个 AJAX 实例中，我们将演示一个投票程序，网页在不重新加载的情况下，就可以获得结果。
到目前为止，您喜欢 PHP 和 AJXA 吗？
本例包括四个元素：
HTML 表单
JavaScript
PHP 页面
存放结果的文本文件
HTML 表单
这是 HTML 页面。它包含一个简单的 HTML 表单，以及一个与 JavaScript 文件的连接：
例子解释 - HTML 表单
正如您看到的，上面的 HTML 页面包含一个简单的 HTML 表单，其中的 <div> 元素带有两个单选按钮。
表单这样工作：
当用户选择 "yes" 或 "no" 时，会触发一个事件
当事件触发时，执行 getVote() 函数
围绕该表单的是名为 "poll" 的 <div>。当数据从 getVote() 函数返回时，返回的数据会替代该表单。
文本文件
文本文件 (poll_result.txt) 中存储来自投票程序的数据。
它类似这样：
注释：记得只允许您的 web 服务器来编辑该文本文件。不要让其他人获得访问权，除了 web 服务器 (PHP)。
JavaScript
JavaScript 代码存储在 "poll.js" 中，并于 HTML 文档相连接：
定义发送到服务器的 url （文件名）
向 url 添加参数 (vote)，参数中带有输入字段的内容
添加一个随机数，以防止服务器使用缓存的文件
调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并告知该对象当触发一个变化时执行 stateChanged 函数
用给定的 url 来打开 XMLHTTP 对象
向服务器发送 HTTP 请求
PHP 页面
由 JavaScript 代码调用的服务器页面是名为 "poll_vote.php" 的一个简单的 PHP 文件。
例子解释：
所选的值从 JavaScript 传来，然后会发生：
获取 "poll_result.txt" 文件的内容
把文件内容放入变量，并向被选变量累加 1
把结果写入 "poll_result.txt" 文件
输出图形化的投票结果
