[转] 通过 PHP 和 Sajax 使用 Ajax(二)

标签: ajaxphpjavascripthtmlxmlhttprequesturl
2158人阅读 评论(0) 收藏 举报
分类:

 

通过 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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量,返回正确的面板内容

___FCKpd___10

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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量,返回正确的面板内容

___FCKpd___10

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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量,返回正确的面板内容

___FCKpd___10

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 变量并返回正确的面板内容

___FCKpd___9

如果 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 变量,返回正确的面板内容

___FCKpd___10

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 变量,返回正确的面板内容

___FCKpd___10

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只是处于转载学习更多技术目的

 

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3845985次
    • 积分:41696
    • 等级:
    • 排名:第85名
    • 原创:331篇
    • 转载:508篇
    • 译文:5篇
    • 评论:1254条
    文章存档
    最新评论