简明现代魔法 -> Ajax技术 -> Ajax responseXML 实例

Ajax responseXML 实例

2010-01-25

AJAX 可用于以 XML 的形式返回数据库信息。

AJAX Database 转 XML 实例

在下面的 AJAX 实例中,我们将演示网页如何从 MySQL 数据库中读取信息,把数据转换为 XML 文档,并在不同的地方使用这个文档来显示信息。在本例中,我们通过使用 responseXML 函数从 PHP 页面得到的是 XML 形式的数据。把 XML 文档作为响应来接收,使我们有能力更新页面的多个位置,而不仅仅是接收一个 PHP 输出并显示出来。

在本例中,我们将使用从数据库接收到的信息来更新多个 <span> 元素。

效果演示

Select a User:

此列由四个元素组成:

  1. MySQL 数据库
  2. 简单的 HTML 表单
  3. JavaScript
  4. PHP 页面

数据库

create table user
(
  id int unsigned not null auto_increment primary key,
  FirstName varchar(20) not null,
  LastName varchar(20) not null,
  Age varchar(20) not null,
  Hometown varchar(20) not null,
  Job varchar(20) not null
)default charset=utf8;  

HTML 表单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="responsexml.js"></script>
</head>
<body>

<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Gonn</option>
<option value="2">Ang</option>
<option value="3">Zhu</option>
<option value="4">Meo</option>
</select>
</form>

<h2><span id="firstname"></span> <span id="lastname"></span></h2>
<span id="job"></span>
<div style="text-align: right">
  <span id="age_text"></span>
  <span id="age"></span>
  <span id="hometown_text"></span>
  <span id="hometown"></span>
</div>

</body>
</html>  

例子解释 - HTML 表单

换句话说,每当用户在下拉列表中改变了值,函数 showUser() 就会执行,并在指定的 <span> 元素中输出结果。

JavaScript 文件 responsexml.js

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

var xmlhttp;

function showUser(str)
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
  	{
  	alert ("Browser does not support HTTP Request");
  		return;
  	}
	var url="responsexml.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)
  	{
  		xmlDoc=xmlhttp.responseXML;
  		document.getElementById("firstname").innerHTML=
  		xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
  		document.getElementById("lastname").innerHTML=
  		xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
  		document.getElementById("job").innerHTML=
  		xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
  		document.getElementById("age_text").innerHTML="Age: ";
  		document.getElementById("age").innerHTML=
  		xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
  		document.getElementById("hometown_text").innerHTML="
From: "; document.getElementById("hometown").innerHTML= xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; }

例子解释:

showUser() 与 GetXmlHttpObject 函数与 PHP 和 AJAX MySQL 数据库实例 这一节中的例子是相同的。您可以参阅其中的相关解释。

stateChanged() 函数:如果选择了下拉列表中的项目,该函数执行:

PHP 页面

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

该页面由 PHP 编写,并使用 MySQL 数据库。

代码会运行一段针对数据库的 SQL 查询,并以 XML 文档返回结果:

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

	$con = mysql_connect('localhost', 'root', '');
	if (!$con)
  	{
  		die('Could not connect: ' . mysql_error());
  	}

	mysql_select_db("therecycler", $con);

	$sql="select * from user where id = ".$q."";

	$result = mysql_query($sql);
	header('Content-type: text/xml');
	echo '<?xml version="1.0" encoding="ISO-8859-1"?>
	<person>';
	while($row = mysql_fetch_array($result))
  	{
  		echo "<firstname>" . $row['FirstName'] . "</firstname>";
  		echo "<lastname>" . $row['LastName'] . "</lastname>";
  		echo "<age>" . $row['Age'] . "</age>";
  		echo "<hometown>" . $row['Hometown'] . "</hometown>";
  		echo "<job>" . $row['Job'] . "</job>";
  	}
	echo "</person>";

	mysql_close($con);
?>  

例子解释:

当查询从 JavaScript 送达 PHP 页面时,会发生:

代码下载

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们