PHP 实例 - AJAX 与 XML-AJAX XML 实例
PHP 实例 - AJAX 与 XML
AJAX 可用来与 XML 文件进行交互式通信。
AJAX XML 实例
下面的实例将演示网页如何通过 AJAX 从 XML 文件读取信息：
实例
Select a CD:
Bob Dylan
Bee Gees
Cat Stevens
实例解释 - HTML 页面
当用户在上面的下拉列表中选择某张 CD 时，会执行名为 "showCD()" 的函数。该函数由 "onchange" 事件触发：
<html>
<head>
<script>
function showCD(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body> <form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div> </body>
</html>
showCD() 函数会执行以下步骤：
- 检查是否有 CD 被选择
- 创建 XMLHttpRequest 对象
- 创建在服务器响应就绪时执行的函数
- 向服务器上的文件发送请求
- 请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）
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 页面时，将发生：
- PHP 创建 XML DOM 对象
- 查找所有 <artist> 元素中与 JavaScript 所传数据相匹配的名字
- 输出 album 的信息，并发送回 "txtHint" 占位符
参考：https://www.cgewang.com/category-15.html
PHP 实例 - AJAX 与 XML-AJAX XML 实例的更多相关文章
- 原生AJAX入门讲解（含实例）
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例
()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...
- Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- PHP 实例 - AJAX 实时搜索-AJAX Live Search
PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好.交互性更强的搜索体验. AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...
- 自己动手之使用反射和泛型，动态读取XML创建类实例并赋值
前言: 最近小匹夫参与的游戏项目到了需要读取数据的阶段了,那么觉得自己业余时间也该实践下数据相关的内容.那么从哪入手呢?因为用的是Unity3d的游戏引擎,思来想去就选择了C#读取XML文件这个小功能 ...
- 11月15日下午 ajax返回数据类型为XML数据的处理
ajax返回数据类型为XML数据的处理 /*XML:可扩展标记语言 HTML:超文本标记语言 标签:<标签名></标签名> 特点: 1.必须要有一个根 2.标签名自定义 3.对 ...
- jquery ajax 访问webServer的xml文件
最近项目中要使用到通过ajax访问webServer的xml文件,通过下面的方式可以直接访问webServer的xml文件,不需要在web.xml中进行任何配置.它的返回参数就是服务器上的xml文件. ...
- JavaScript调用后台的三种方法实例(包含两种Ajax)
方法一:直接使用<%=%>调用(ASPX页面) 前台JS,代码如下: <script type="text/javascript"> var methodS ...
- XML&AJAX
AJAX: Asynchronous Javascript and XML 1. 客户端触发异步操作 2. 创建新的XMLHttpRequest, 是重要的js对象,通过它提起对服务器端的请求 3. ...
随机推荐
- python字符串与文本操作(一)
1.一个字符串分割为多个字段,但是分隔符 (还有周围的空格) 并不是固定的 #string 对象的split()方法只适应于非常简单的字符串分割情形,它并不允许有 多个分隔符或者是分隔符周围不确定的空 ...
- java NIO 实例之多人聊天
关键抽象 1.定义一个HashMap<String,SocketChannel>用户存储每个用户的管道. 2.服务端监听read事件,获取消息后轮询hashmap发送消息给用户模型内的所有 ...
- CTFHub_技能树_文件上传
文件上传 无限制 直接上传一句话后门,使用蚁剑连接: 获得flag: 前端验证 尝试直接上传后门,发现被拦截,经过判断为Javascript前端验证: 这里可以使用Firefox浏览器插件禁用页面js ...
- 基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
本机环境: nodejs v12.16.3 npm 6.14. vue-cli 4.3. 初始化项目 vue init simulatedgreg/electron-vue my-project // ...
- element-ui的upload组件的clearFiles方法的调用
element-ui使用中碰到的问题 <template> <div> <el-button @click="clearFiles">重新上传& ...
- JVM 学习笔记（四）
回顾: 在之前的文章中,我们主要体现了当堆内存设置的比较小的情况下,比如:-Xmx20M -Xms20M,在项目运行的过程中,不断往内存中去添加对象, 这时候就会出现OOM,也就是内存溢出,本文章将展 ...
- www.215wd.com
www.215wd.com 传奇销售系统 QQ:1479528000
- Python-01矩阵、数组和列表等的总结
python的基础知识总结 使用到了numpy库,所以第一步需要 import numpy as np 1.创建矩阵 1.1一般矩阵的创建 创建一个二维的矩阵,并使用ndim.shape.size分别 ...
- 爬虫01 /jupyter、爬虫概述、requests基本使用
爬虫02 /jupyter.爬虫概述.requests基本使用 目录 爬虫02 /jupyter.爬虫概述.requests基本使用 1. jupyter的基本使用 2. 爬虫概述 3. reques ...
- linux专题（九）：磁盘管理
http://dwz.date/UDf 概述 Linux磁盘管理好坏直接关系到整个系统的性能问题. Linux磁盘管理常用命令为 df.du. df :列出文件系统的整体磁盘使用量 du:检查磁盘空间 ...