THE WORLD'S LARGEST WEB DEVELOPER SITE

PHP 教程

PHP 教程 PHP 简介 PHP 安装 PHP 语法 PHP 变量 PHP 5 echo 和 print 语句 PHP 数据类型 PHP 字符串函数 PHP 常量 PHP 运算符 PHP if...else...elseif 语句 PHP Switch 语句 PHP while 循环 PHP for 循环 PHP 函数 PHP 数组 PHP 数组排序 PHP 全局变量 - 超全局变量

PHP 表单

PHP 表单处理 PHP 表单验证 PHP 表单验证 - 必填字段 PHP 表单验证 - 验证 E-mail 和 URL PHP 表单验证 - 完成表单实例

PHP 高级教程

PHP 多维数组 PHP 日期和时间 PHP Include 文件 PHP 文件处理 PHP 文件打开_读取_关闭 PHP 文件创建_写入 PHP 文件上传 PHP Cookies PHP Sessions PHP 发送电子邮件 PHP 安全的电子邮件 PHP 错误处理 PHP 异常处理 PHP 过滤器(Filter)

PHP 数据库

PHP MySQL 简介 PHP MySQL 连接数据库 PHP MySQL 创建数据库和表 PHP MySQL Insert Into PHP MySQL Select PHP MySQL Where 子句 PHP MySQL Order By 关键词 PHP MySQL Update PHP MySQL Delete From PHP Database ODBC

PHP XML

PHP XML Expat 解析器 PHP XML DOM PHP SimpleXML

AJAX

AJAX 简介 AJAX XMLHttpRequest PHP 和 AJAX 请求 PHP 和 AJAX XML 实例 PHP 和 AJAX MySQL 数据库实例 PHP 和 AJAX responseXML 实例 PHP 和 AJAX Live Search PHP 和 AJAX RSS 阅读器 PHP 和 AJAX 投票

PHP 参考手册

PHP Array 函数 PHP Calendar 函数 PHP Date _ Time 函数 PHP Directory 函数 PHP Error 和 Logging 函数 PHP Filesystem 函数 PHP Filter 函数 PHP FTP 函数 PHP HTTP 函数 PHP libxml 函数 PHP Mail 函数 PHP Math 函数 PHP MySQL 函数 PHP 5 MySQLi 函数 PHP SimpleXML 函数 PHP 5 String 函数 PHP XML Parser 函数 PHP Zip File 函数 PHP 杂项函数 PHP 时区 PHP 测验

PHP 和 AJAX XML 实例

AJAX 可与 XML 文件进行交互式通信。

AJAX XML 实例

在下面的 AJAX 实例中,我们将演示网页如何使用 AJAX 技术从 XML 文件中读取信息。

在下面的下列列表中选择一个 CD

在此列出 CD 信息。

本例包括三张页面:

  • 一个简单 HTML 表单
  • 一个 XML 文件
  • 一个 JavaScript 文件
  • 一张 PHP 页面

HTML 表单

上面的例子包含了一张简单的 HTML 表单,以及指向 JavaScript 的链接:

<html>
<head>
<script src="selectcd.js"></script>
</head>

<body>

<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>

<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>

</body>
</html>

例子解释:

正如您看到的,它仅仅是一张简单的 HTML 表单,其中带有名为 "cds" 的下拉列表。

表单下面的段落包含了一个名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的数据的占位符。

当用户选择数据时,会执行名为 "showCD" 的函数。这个函数的执行是由 "onchange" 事件触发的。

换句话说,每当用户改变了下拉列表中的值,就会调用 showCD 函数。

XML 文件

XML 文件是 "cd_catalog.xml"。该文件中包含了有关 CD 收藏的数据。

JavaScript

这是存储在 "selectcd.js" 文件中的 JavaScript 代码:

var xmlHttp

function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解释:

stateChanged() 和 GetXmlHttpObject 函数与上一节中的相同,您可以参阅上一页中的相关解释。

showCD() 函数

假如选择了下拉列表中的某个项目,则函数执行:

  1. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
  2. 定义发送到服务器的 URL(文件名)
  3. 向 URL 添加带有下拉列表内容的参数 (q)
  4. 添加一个随机数,以防服务器使用缓存的文件
  5. 当触发事件时调用 stateChanged
  6. 通过给定的 URL 打开 XMLHTTP 对象
  7. 向服务器发送 HTTP 请求

PHP 页面

这个被 JavaScript 调用的服务器页面,是一个名为 "getcd.php" 的简单 PHP 文件。

这张页面是用 PHP 编写的,使用 XML DOM 来加载 XML 文档 "cd_catalog.xml"。

代码运行针对 XML 文件的查询,并以 HTML 返回结果:

<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

例子解释

当请求从 JavaScript 发送到 PHP 页面时,发生:

  1. PHP 创建 "cd_catalog.xml" 文件的 XML DOM 对象
  2. 循环所有 "artist" 元素 (nodetypes = 1),查找与 JavaScript 所传数据向匹配的名字
  3. 找到 CD 包含的正确 artist
  4. 输出 album 的信息,并发送到 "txtHint" 占位符