文档章节

Ajax与XML的通信

追梦java
 追梦java
发布于 2014/06/09 10:48
字数 531
阅读 8
收藏 0

AJAX XML 实例

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

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

选择 CD: Bob Dylan Bonnie Tyler Dolly Parton
TITLE: Greatest Hits
ARTIST: Dolly Parton
COUNTRY: USA
COMPANY: RCA
PRICE: 9.90
YEAR: 1982

AJAX 实例解释

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

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

<body>

<form>
选择 CD:
<select name="cds" onchange="showCD(this.value)" >
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>

<p>
<div id="txtHint" ><em>在此列出 CD 信息。</em></div>
</p>

</body>
</html>

正如您所看到的,它只是一个带有名为 "cds" 的下拉列表的简单 HTML 表单。

表单下面的段落包含一个名为 "txtHint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。

当用户选择列表时,名为 "showCD" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说,每当用户改变了下拉列表的值,这个 showCD 函数就会被调用。

下面列出了 JavaScript 代码。

AJAX JavaScript

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

var xmlHttp

function showCD(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcd.asp";
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)
{
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;
}

AJAX 服务器页面

被 JavaScript 调用的服务器页面,是名为 "getcd.asp" 的简单 ASP 文件。

该页面使用 VBScript 编写,针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言,简单地重写该页面。

请看在 PHP 中对应的例子(测试:缺具体页面)。

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

<%
response.expires=-1
q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%>

© 著作权归作者所有

追梦java
粉丝 3
博文 157
码字总数 157529
作品 0
南京
程序员
私信 提问
ajax-Ajax试题

ylbtech-doc:ajax-Ajax试题 Ajax 1.A,Ajax试题返回顶部 001.{Ajax题目}使用Ajax可带来便捷有()(选择3项) A)减轻服务器的负担 B)无刷新更新页面 C)可以调用外部数据 D)可以不使用Javas...

吞吞吐吐的
2017/10/11
0
0
【Java Web开发系列课程】Ajax快速入门

免费课程链接:【Java Web开发系列课程】Ajax快速入门 简介: Ajax是Asynchronous JavaScript and XML的缩写。Asynchronous,是任务的一种执行模式,程序的执行顺序与任务的排列顺序是不一致...

mcy0425
04/24
4
0
XMLHttpRequest

主要内容: 这里是列表文本这里是列表文本使用XMLHttpRequest 对象 使用XMLHttpRequest 事件 跨域ajax 通信的限制 ajax 全名:asynchronous javascript + xml 的简写 改变了web诞生依赖单击等...

中柠檬
2016/11/25
14
0
Ajax原理介绍及跨域解决方案

1.Ajax原理介绍 Ajax 全名叫"Asynchronous Javascript And XML" (异步的Javascript and XML),是一种创建交互式网页应用的网页开发技术 与传统的web应用比较,ajax 应用可以仅向服务器发送并...

陈小扁
2016/03/17
99
2
Prototype 使用 Ajax.Request类

如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建xmlhttprequest对象并且异步的跟踪它的进程, 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到...

红薯
2008/12/11
665
0

没有更多内容

加载失败,请刷新页面

加载更多

搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https://blog.51cto.com/kaliarch/2044618 一、概述 1.1 背景 ......

linjin200
14分钟前
4
0
CDH6.0.1集成tez-0.9.1计算引擎

参考文章: https://www.jianshu.com/p/9fb9f32e1f0f https://www.baidu.com/link?url=OgpwasnZi7H1dySN2T111sseEWDBaCCTC3DFV61G7756YbrkJCA8Y3UFaueyqnfN&wd=&eqid=daeb8b3500049cf3000000......

Sheav
16分钟前
4
0
Vue内置指令的使用

v-model(数据绑定) v-model常用于表单数据的双向绑定,它本质上是一个语法糖。它主要的有两种应用: 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用 <div id="app"> ...

凌兮洛
17分钟前
4
0
外部来源应用检查-烦死了,终于找到解决设置了

Android 连接usb调试应用的时候: 华为关闭方法:1、设置-安全-更多安全设置,关掉外部来源应用检查。2、设置-系统-开发人员选项-关闭“监控ADB安装应用” 不知道OPPO 怎么关闭的?...

QGlaunch
17分钟前
4
0
6个K8s日志系统建设中的典型问题,你遇到过几个?

作者 | 元乙 阿里云日志服务数据采集客户端负责人,目前采集客户端 logtail 在集团百万规模部署,每天采集上万应用数 PB 数据,经历多次双 11、双 12 考验。 导读:随着 K8s 不断更新迭代,使...

阿里云官方博客
20分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部