精华内容
下载资源
问答

HTML 表单

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

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

<body>

<form> 
Select a CD:
<select name="cds" οnchange="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" 占位符
展开全文
json
  • XML+Ajax实现无刷新查询系统

    2020-10-14 00:01:29
    ASP读写XML文件的一个实例_XML留言本,注意,这个留言本从功能上来说不是很完善,它的目的是帮助解决如何用ASP操作XML文件,进行读出信息写入信息,因此留言本只具备浏览留言
  • XML Ajax的应用

    2008-06-04 22:21:10
    xml解析 Ajax应用 Ajax登陆验证
  • 04课 json,xmlajax封装.rar

    2021-09-13 20:51:23
    04课 json,xmlajax封装
    html
  • xml+ajax无刷新查询数据源码

    2021-03-25 14:23:03
    ASP环境下实现无刷新查询程序,基于xml+ajax技术,程序使用Access数据库,查询速度很快,输入关键字提交后在下面显示查询结果。另外程序还包括一个XML读取的程序。
  • Ajax和XML:借鉴最优秀的Ajax应用程序

    2021-03-03 08:17:40
    火龙果软件工程技术中心 本文内容包括:Google地图TaDaListCampfireYourMinis其他Web2.0站点结束语参考资料跟随本文一起游览Web2.0世界中的一些顶尖的AsynchronousJavaScript+XML(Ajax)应用程序。探索这些应用程序...
  • JSPServlet,XMLajax做的简易邮件系统

    2012-03-26 21:38:10
    这是使用jspServlet为主做的简易的邮件系统,使用xml做的小型数据库,ajax进行用户注册验证,ajax获取邮件列表,为了简单并没有实现附件上传,要想实现文件上传可以使用文件上传组件自己加上去。,解压后直接...
  • Ajax如何传输Json和xml数据

    2020-10-21 12:39:54
    主要为大家详细介绍了Ajax如何传输Json和xml数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • XML JSON和AJAX关系

    2018-05-16 15:43:22
    1、XML一种数据描述手段2、JSON一种数据描述手段,类似于JavaScript字面量方式,服务端采用JSON格式返回数据,客户端按照JSON格式解析数据3、AJAX使我们通过JavaScript直接发送网络请求,Web的可能就会更多,随之...

    1、XML一种数据描述手段

    2、JSON一种数据描述手段,类似于JavaScript字面量方式,服务端采用JSON格式返回数据,客户端按照JSON格式解析数据

    3、AJAX使我们通过JavaScript直接发送网络请求,Web的可能就会更多,随之能够实现的功能也就更多,至少不会是单机游戏。是浏览器进行网络编程(发送请求、接收响应)的技术方案,它使我们可以通过JavaScript直接获取服务端最新的内容而不必重新加载页面。让Web更能接近桌面应用的用户体验。

    AJAX就是浏览器提供的一套API,可以通过JavaScript调用,从而实现通过代码控制请求和响应。实现网络编程


    注意:

    不管是JSON还是XML,只是在AJAX请求过程中用到,并不代表他们之间有必然的联系,他们只是数据协议罢了

    不管服务端采用XML还是采用JSON本质上都是讲数据返回给客户端

    服务端应该设置一个合理的Content-Type

    展开全文
  • ajax传输xml

    2012-04-01 08:03:45
    ajax传输xml
  • 空空如也

    空空如也

    1 2 3 4 5 ... 20
    收藏数 201,761
    精华内容 80,704
    热门标签
    关键字:

    xml和ajax区别