“新浪”故障
500年一遇日全食
Jul
21
[原]Spry框架：XML数据集 
之前的日志提到过，Ajax Spry框架是一个JavaScript库，Web涉及人员使用它可以构建能够向站点访问者提供更丰富体验的Web页。Spry框架主要包括Spry效果、Spry构件及XML数据访问。关于Spry效果、Spry构件都已经做了简单介绍，而XML数据部分，在Dreamweaver CS3以上版本也提供了图形化的配置方式，使用与其他的Spry模块差不多，这里不再一一说明。
Spry也可以使用手动编程方式实现，这里特转一份国外博客的文章供参考。
一、完整的代码
原文来自这里：Integration of Spry and PHP/MySQL
以下代码包括HTML和PHP两部分，使用前，需把Spry的JavaScript库拷贝到对应的位置。
上述文档原作者在日本工作，所以编码默认为shift_jis，可修改为utf-8。
二、Ajax生成XML数据集
目前，我找到的资料都是在加载页面的时候一同生成Spry XML DataSet，即使像上面的代码中：
获取XML数据的位置也是固定的。而后续的引用代码，如spry:region等在使用前，必须先得到完整的XML数据结构，否则，页面加载时会报错。
经常遇到的情况是，如果希望根据用户的数据进行查询的工作，结果用Spry提供的Ajax XML数据来显示。
这时，可以参考下面的代码，使用区域观察者机制：
HTML输入框：
JavaScript处理代码：
可见，当从点击输入框提交数据后，发出POST请求，观察者发出数据加载请求，观察者加入观察，当获取到相关的XML数据后，观察者根据数据生成相应的HTML代码。
但这方式有个很大的问题，就是无法借助Spry提供的动态表格实现更好的互助性。若希望一同实现Spry动态表格，请见这里。
Spry也可以使用手动编程方式实现，这里特转一份国外博客的文章供参考。
一、完整的代码
原文来自这里：Integration of Spry and PHP/MySQL
以下代码包括HTML和PHP两部分，使用前，需把Spry的JavaScript库拷贝到对应的位置。
<?
require_once(getenv("DOCUMENT_ROOT")."/engine/utils.php"); //just some utils I use
if ($_REQUEST["action"]=="gen") {
$qstring = "select * from people";
$result = queryDB($qstring); //my own query function. you can just use mysq_query
$xml = createXML_fromSQLResult($result);
header("Content-type: text/xml");
echo $xml;
exit;
}
function createXML_fromSQLResult(&$result, $containerName="container", $elementName="element", $encoding="Shift_JIS")
{
//this functions creates XML output from the SQL result.
$xml = <<<EOF
<?xml version="1.0" encoding="{$encoding}" ?>
<{$containerName}>
EOF;
while ($stuff = mysql_fetch_assoc($result)) {
$xml .= "<{$elementName} id=\"{$stuff[id]}\">";
foreach($stuff as $key=>$value) {
$value = htmlspecialchars($value);
$xml .= <<<EOF
<{$key}>{$value}</{$key}>\n
EOF;
}
$xml .= "</{$elementName}>\n";
}
$xml .= <<<EOF
</{$containerName}>
EOF;
return $xml;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<script type="text/javascript" xsrc="includes/xpath.js"></script>
<script type="text/javascript" xsrc="includes/SpryData.js"></script>
<script type="text/javascript">
var dsTest = new Spry.Data.XMLDataSet("sprytest.html?action=gen", "container/element");
dsTest.setColumnType("id", "number");
</script>
</head>
<body>
testing stuff
<hr>
<input type="button" value="sort id" onclick="dsTest.sort('id','toggle')"">
<input type="button" value="sort title" onclick="dsTest.sort('title','toggle')"">
<input type="button" value="sort content" onclick="dsTest.sort('content','toggle')"">
<div spry:region="dsTest">
<table border="1">
<tr spry:repeat="dsTest">
<td>{@id}</td>
<td>{name}</td>
<td>{place}</td>
</tr>
</table>
</div>
</body>
</html>
require_once(getenv("DOCUMENT_ROOT")."/engine/utils.php"); //just some utils I use
if ($_REQUEST["action"]=="gen") {
$qstring = "select * from people";
$result = queryDB($qstring); //my own query function. you can just use mysq_query
$xml = createXML_fromSQLResult($result);
header("Content-type: text/xml");
echo $xml;
exit;
}
function createXML_fromSQLResult(&$result, $containerName="container", $elementName="element", $encoding="Shift_JIS")
{
//this functions creates XML output from the SQL result.
$xml = <<<EOF
<?xml version="1.0" encoding="{$encoding}" ?>
<{$containerName}>
EOF;
while ($stuff = mysql_fetch_assoc($result)) {
$xml .= "<{$elementName} id=\"{$stuff[id]}\">";
foreach($stuff as $key=>$value) {
$value = htmlspecialchars($value);
$xml .= <<<EOF
<{$key}>{$value}</{$key}>\n
EOF;
}
$xml .= "</{$elementName}>\n";
}
$xml .= <<<EOF
</{$containerName}>
EOF;
return $xml;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<script type="text/javascript" xsrc="includes/xpath.js"></script>
<script type="text/javascript" xsrc="includes/SpryData.js"></script>
<script type="text/javascript">
var dsTest = new Spry.Data.XMLDataSet("sprytest.html?action=gen", "container/element");
dsTest.setColumnType("id", "number");
</script>
</head>
<body>
testing stuff
<hr>
<input type="button" value="sort id" onclick="dsTest.sort('id','toggle')"">
<input type="button" value="sort title" onclick="dsTest.sort('title','toggle')"">
<input type="button" value="sort content" onclick="dsTest.sort('content','toggle')"">
<div spry:region="dsTest">
<table border="1">
<tr spry:repeat="dsTest">
<td>{@id}</td>
<td>{name}</td>
<td>{place}</td>
</tr>
</table>
</div>
</body>
</html>
上述文档原作者在日本工作，所以编码默认为shift_jis，可修改为utf-8。
二、Ajax生成XML数据集
目前，我找到的资料都是在加载页面的时候一同生成Spry XML DataSet，即使像上面的代码中：
var dsTest = new Spry.Data.XMLDataSet("sprytest.html?action=gen", "container/element");
获取XML数据的位置也是固定的。而后续的引用代码，如spry:region等在使用前，必须先得到完整的XML数据结构，否则，页面加载时会报错。
经常遇到的情况是，如果希望根据用户的数据进行查询的工作，结果用Spry提供的Ajax XML数据来显示。
这时，可以参考下面的代码，使用区域观察者机制：
引用
Spry框架支持一种观察者机制，使开发人员能够注册一个回调函数，使其在区域发生变化时接收通知。
HTML输入框：
<form name="searchCompanyForm" method="post" action="#" onsubmit="queryCompany();return false;">
<table cellspacing="1" width="700px" align="center" class="formbox">
<tr>
<td class="formbox-rowheader">客户公司：<span id="sprySearch">
<label>
<input name="searchStrings" type="text" id="searchStrings" size="60" />
</label><span class="textfieldRequiredMsg">需要提供一个值。</span></span>
<input type="submit" value="搜索" class="button"/> <input type="reset" value="重置" class="button"/>
</td></tr>
</table>
</form>
<div id="companyResults" >
</div>
<table cellspacing="1" width="700px" align="center" class="formbox">
<tr>
<td class="formbox-rowheader">客户公司：<span id="sprySearch">
<label>
<input name="searchStrings" type="text" id="searchStrings" size="60" />
</label><span class="textfieldRequiredMsg">需要提供一个值。</span></span>
<input type="submit" value="搜索" class="button"/> <input type="reset" value="重置" class="button"/>
</td></tr>
</table>
</form>
<div id="companyResults" >
</div>
JavaScript处理代码：
<script type="text/javascript">
<!--
var observer = function (notificationType,dataSet,data) {
if (notificationType=="onPostLoad") {
if (dataSet.getDataWasLoaded()) {
var rows=dataSet.getData();
if (String(rows[0]) != "undefined") {
var s='<table cellspacing="1" width="700px" align="center" class="formbox" >';
for (var i=0;i<rows.length;i++) {
s+='<tr>';
s+='<td class="formbox-rowheader" width="60px">客户名称</td>';
s+='<td class="formbox-content">'+rows[i].name+'</td>';
s+='</tr><tr>';
s+='<td class="formbox-rowheader" width="60px">地址</td>';
s+='<td class="formbox-content">'+rows[i].address+'</td>';
s+='</tr>';
}
s+='</table>';
} else {
s='<p align="center">未找到任何匹配的记录！</p>'.fontcolor("red");
}
document.getElementById("companyResults").innerHTML=s;
}
}
}
function queryCompany () {
var searchStrings = document.getElementById("searchStrings").value;
var query = "query_company";
if (String(searchStrings) != "") {
var dsCompany=new Spry.Data.XMLDataSet("../xmldata.php","companys/company",
{method:"POST",postData:"action=search&child="+query+"&"+query+"="+searchStrings,
headers:{"Content-Type":"application/x-www-form-urlencoded;charset=utf-8"},
useCache:false});
dsCompany.addObserver(observer);
dsCompany.loadData();
} else document.getElementById("searchStrings").value = "请输入需查询的公司名称";
}
//-->
<!--
var observer = function (notificationType,dataSet,data) {
if (notificationType=="onPostLoad") {
if (dataSet.getDataWasLoaded()) {
var rows=dataSet.getData();
if (String(rows[0]) != "undefined") {
var s='<table cellspacing="1" width="700px" align="center" class="formbox" >';
for (var i=0;i<rows.length;i++) {
s+='<tr>';
s+='<td class="formbox-rowheader" width="60px">客户名称</td>';
s+='<td class="formbox-content">'+rows[i].name+'</td>';
s+='</tr><tr>';
s+='<td class="formbox-rowheader" width="60px">地址</td>';
s+='<td class="formbox-content">'+rows[i].address+'</td>';
s+='</tr>';
}
s+='</table>';
} else {
s='<p align="center">未找到任何匹配的记录！</p>'.fontcolor("red");
}
document.getElementById("companyResults").innerHTML=s;
}
}
}
function queryCompany () {
var searchStrings = document.getElementById("searchStrings").value;
var query = "query_company";
if (String(searchStrings) != "") {
var dsCompany=new Spry.Data.XMLDataSet("../xmldata.php","companys/company",
{method:"POST",postData:"action=search&child="+query+"&"+query+"="+searchStrings,
headers:{"Content-Type":"application/x-www-form-urlencoded;charset=utf-8"},
useCache:false});
dsCompany.addObserver(observer);
dsCompany.loadData();
} else document.getElementById("searchStrings").value = "请输入需查询的公司名称";
}
//-->
可见，当从点击输入框提交数据后，发出POST请求，观察者发出数据加载请求，观察者加入观察，当获取到相关的XML数据后，观察者根据数据生成相应的HTML代码。
但这方式有个很大的问题，就是无法借助Spry提供的动态表格实现更好的互助性。若希望一同实现Spry动态表格，请见这里。
