PHP课程

浏览13319
更新时间2025-08-06

AJAX XML 实例

下例将演示网页如何使用 AJAX 从 XML 文件中获取信息:

实例

请选择一张 CD:

CD 信息将在此处列出...

实例解释 - HTML 页面

当用户在上面的下拉列表中选择 CD 时,会执行一个名为 showCD() 的函数。该函数由 onchange 事件触发:

<html>
<head>
<script>
function showCD(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getcd.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
请选择一个 CD:
<select name="cds" onchange="showCD(this.value)">
  <option value="">请选择一个 CD:</option>
  <option value="Bob Dylan">Bob Dylan</option>
  <option value="Bee Gees">Bee Gees</option>
  <option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD 信息将在此处列出...</b></div>

</body>
</html>

showCD() 函数执行以下操作:

  1. 检查是否选择了 CD
  2. 创建一个 XMLHttpRequest 对象
  3. 创建服务器响应就绪时要执行的函数
  4. 将请求发送到服务器上的文件
  5. 请注意,参数(q)已添加到 URL 中(带有下拉列表的内容)

PHP 文件

以上 JavaScript 调用的服务器上的页面是一个名为 "getcd.php" 的 PHP 文件。

PHP 脚本加载一个 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++) {
  // 仅处理元素节点
  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++) {
  // 仅处理元素节点
  if ($cd->item($i)->nodeType==1) {
    echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
    echo("<br>");
  }
}
?>

当 CD 查询从 JavaScript 发送到 PHP 页面时,会发生以下情况:

  1. PHP 创建一个 XML DOM 对象
  2. 查找所有与从 JavaScript 发送的名称匹配的 <artist> 元素
  3. 输出专辑信息(发送到 "txtHint" 占位符)

相关视频

更多

免费

php8,我来也
初级php8,我来也

33.5万次学习

收藏

免费

Thinkphp6.0正式版视频教程
中级Thinkphp6.0正式版视频教程

39.2万次学习

收藏

免费

细说PHP第一季
中级细说PHP第一季

30.3万次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

64.4万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

40.9万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

63.7万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

35.8万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

131.8万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7,16种组合,超全大合集

下载

VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载

php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版
SublimeText3汉化版

中文版,非常好用

下载

Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包,适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载