<?php
switch(
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
require('content/panel-'.
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
<?php
switch(
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id']){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
require('content/panel-'.
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'].'.html');
break;
default:
print("No such category<br>");
}
?>
|
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'].'.html');
$panel_id_next =
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
<?php
switch(
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id']){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
require('content/panel-'.
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'].'.html');
break;
default:
print("No such category<br>");
}
?>
|
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'] + 1;
$panel_id_prev =
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
<?php
switch(
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id']){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
require('content/panel-'.
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'].'.html');
break;
default:
print("No such category<br>");
}
?>
|
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'] - 1;
if($panel_id_prev >= 0){
print("
<span onclick=/"loadHTML('panels-ajax.php?panel_id=".$panel_id_prev."',
'content')/">Previous Panel</span>
");
if($panel_id_next <= 9)
print(" | ");
}
if($panel_id_next <= 9){
print("
<span onclick=/"loadHTML('panels-ajax.php?panel_id=".$panel_id_next."',
'content')/">Next Panel</span>
");
}
break;
default:
|
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id']){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
require('content/panel-'.
通过 PHP 和 Sajax 使用 Ajax （二）
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成
Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
构建 PHP 应用程序
这一节介绍使用 Ajax 创建 PHP 应用程序，程序将显示一个带有面板链接的教程。这一节会进一步开发在“什么是 Ajax？”一节中已经开始的应用程序。
设置 HTML 文档
首先从创建应用程序的 PHP 文件开始。请创建文件 ajax-app.php 并像下面这样指定文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
这一行把文档类型指定为正在使用的 HTML 和 XML 标准。稍后可能会注意到，如果所有工作都完成之后删除这一行，侧面板的显示会有轻微变化。
开始编写 HTML、指定编码方式并添加 CSS 样式代码，如清单 6 所示。
清单 6. 显示链接
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>
...
|
页面的标题是以前写的一个教程的名称。用 meta 标记指定编码方式，并把 HTML 文档设置成能够把 span 标记当作链接。然后再创建这些链接。
在侧面板中创建链接
在创建链接之前，需要设置侧面板。require 指令要求的头文件可以下载，和示例应用程序的所有文件在一起（请参阅参考资料）：
...
</style>
<?php require('content/header.html'); ?>
|
这个 header.html 文件包含 developerWorks 教程使用的 CSS 和其他 JavaScript 及格式化信息。它还对页面进行设置，这样就可以开始添加链接。这一部分有一个介绍和九个面板，所以需要创建 10 个链接，如清单 7 所示。
清单 7. 创建 10 个链接
...
<?php require('content/header.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=0',
'content')">Managing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=1',
'content')">Adding content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=2',
'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=3',
'content')">Editing content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=4',
'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=5',
'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=6',
'content')">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=7',
'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=8',
'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>
<span onclick="loadHTML('panels-ajax.php?panel_id=9',
'content')">Pulling it together:
The CMS control page</span>
|
每个链接都调用 loadHTML，把带有面板 ID 的 URL 传递给它，将用传递的 URL 确定要装入哪个面板，第二个参数指定放置新内容的目标 div 标记。每个链接之间还有一些 HTML 代码，为了简化教程，这些 HTML 被放在 between-link.html 中，这个文件也可以下载（请参阅参考资料）。请参阅图 1 中的浏览器输出示例。
图 1. 显示带有链接的侧面板
图片地址：https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig01.jpg
链接在左侧显示，就像 developerWorks 教程的小节标题列表一样。
初始化内容
侧面板已经就绪，现在需要添加小节标题，让主内容区就绪：
...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>
|
这会添加小节标题，并输出页面链接。然后要一个接一个，用全部面板对内容区进行初始化，都放在内容 div 标记内，如清单 8 所示。
清单 8. 初始化内容
...
<?php require('content/pre-content.html'); ?>
<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>
|
全部 10 个面板现在逐个显示出来，按照 IBM 的标准分节格式。为了完成这个 HTML，下一步是包含页脚文件：
<?php require('content/footer.html'); ?>
|
这就完成了页面的 HTML。请参阅图 2 中的浏览器输出示例。
图 2. 显示初始化的、完成的内容页面
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig02.jpg
内容已经初始化，链接也做好调用 JavaScript 指令的准备了。
JavaScript：添加 loadHTML 函数
现在要向示例应用程序插入异步 JavaScript 并添加 loadHTML 函数，这个函数由“在侧面板中创建链接”一节中创建的链接调用。
清单 9. 设置 XML HTTP 对象
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">
var request;
var dest;
...
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
}
}
}
</script>
<?php require('content/header.html'); ?>
...
|
这个代码装入在链接中指定的 URL：panels-ajax.php。然后，要插入 processStateChange 函数。
JavaScript：添加 processStateChange 函数
完成 processStateChange 函数的 JavaScript 代码，需要这个函数把装入的 HTML 内容放在前面“初始化内容”一节中初始化的 div 标记中。
清单 10. 处理状态变化，把新内容放进 div 标记
...
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}
}
}
function loadHTML(URL, destination){
...
|
现在完成了 ajax-app.php 文件。需要把 panels-ajax.php 文件定义成面板链接指向的文件。
返回内容
当点击应用程序中的某个链接时，Ajax 代码会试图装入 panels-ajax.php。创建这个文件，把它放在与 ajax-app.php 相同的目录中。这个文件将处理使用 GET 提交给它的 panel_id 变量。
清单 11. 处理 panel_id 变量并返回正确的面板内容
如果 panel_id 变量存在，就会返回正确的面板。可以在能够下载的 zip 文件中（ajax.sajax.source.zip，请参阅参考资料）找到内容 HTML，以及随带的图片。请参阅图 3，这是点击 “Avoid editing a panel that doesn't exist” 面板时的浏览器输出示例。
图 3. 显示单一面板输出
图片URL： https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig03.jpg
当链接活动而且Ajax 也工作时，点击链接会用特定于这个面板的内容替代初始化的内容。接下来，要添加导航链接。
添加导航链接
为了读者方便，要在每个面板的底部添加导航链接。点击下一个链接，会使后续的面板在内容区装入，替代当前内容。
清单 12. 处理 panel_id 变量，返回正确的面板内容
next 链接链接到当前请求的面板 ID 加 1 的面板，对于 previous 链接则是减 1 。只有存在前一个面板（这意味着它的 ID 值大于等于 0）时，才会显示 previous panel 链接；只有后一面板的 ID 值小于或等于 9，才会显示 next panel 链接。实际创建的链接与已经创建的其他链接相同，区别在于新创建的链接会根据当前面板的 ID 发生变化。请参阅图 4 中包含导航链接的浏览器输出示例。
图 4. 显示导航链接
图片URL: https://www6.software.ibm.com/developerworks/cn/education/opensource/os-phpajax/fig04.jpg
点击链接，就会按照希望的那样导航教程的小节，这样当读者到达一个面板的底部时，点击 next panel 链接，就会把他们带到下一个面板。而且，不必等候整个页面重新载入，当前面板的内容会被下一个面板的内容代替。
现在应用程序完成了。接下来，学习如何把应用程序与 Sajax 集成。
说明：
本文来自：http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有，本Blog只是处于转载学习更多技术目的
GET['panel_id'].'.html');
break;
default:
print("No such category<br>");
}
?>
|
相关推荐
在本教程中，将学习 Ajax 以及围绕它的应用的问题。将用 PHP 构建一个 Ajax 应用程序，显示以前写的一个教程中的...然后将把简单 Ajax 工具包（Sajax）集成进 Ajax 应用程序，它可以同步 Ajax 的使用，从而简化开发。
本书重点介绍ajax及相关的工具和技术，主要内容包括xmlhttprequest对象及其属性和方法、发送请求和处理响应、构建完备的ajax开发工具、使用jsunit测试javascript、分析javascript调试工具和技术，以及ajax开发模式和...
本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册，然后再用 Sajax 将其变成活动的 Web 应用程序。
本文将使用两种方法创建一个简单的相册：传统的 Web 应用程序和基于 Sajax 的应用程序。我们将用 PHP 编写一个相册，读取某一目录中的内容，显示缩略图组成的表格。如果用户单击一个缩略图，就会完全展开该图像。...
P("http://localhost/test/ajax/sajax/add.php",lcc,data) P("http://localhost/test/ajax/sajax/add.php",lcc) G("http://localhost/test/ajax/sajax/add.php",lcc,data) G(...
PHP环境下的Ajax框架大全，经典值得收藏！ cpaint_v2.1.0 HTML_AJAX-0.4.1<br>sajax-0.12<br>xajax_0.2.5<br>xoad-0.6.0.0-php5
“结合Ajax进行PHP开发”这个系列包括两部分，我们将完全使用PHP和SimpleAjaxToolkit(Sajax)创建一个简单的相册作为在线Web应用程序。我们首先用标准的PHP开发方法编写简单的相册，然后再用Sajax将其变成活动的Web...
“结合Ajax进行PHP开发”系列包括两部分，第1部分创建了Ajax相册应用程序，这一部分我们将使用JavaScript为其建立一个历史堆栈（historystack）。这个堆栈以Web浏览器中的历史记录工具为蓝本，为该应用程序提供后退...
Ajax框架就是提供模块化实现Ajax功能的集合，Ajax框架可以是各种语言实现的（比如SAJAX有各种语言的实现），Ajax只是jquery中的一部分, 实例1 代码如下: $.ajax({ type:’post’,//可选get url:’action.php’,//...
本文将使用两种方法创建一个简单的相册：传统的Web 应用程序和基于Sajax的应用程序。我们将用PHP编写一个相册，读取某一目录中的内容，显示缩略图组成的表格。如果用户单击一个缩略图，就会完全展开该图像。因为编写...
In this archive you will find a folder for each platform that is currently supported. Please see individual documentation in each folder for specific errata.
flxAJAX（Flexible AJAX）是PHP中AJAX技术的实现。 它是用php5-oop编写的，并允许从javascript调用已定义的php函数，类似于'sajax'中的实现，但基于oop且更灵活。