Jul 21

[原]Spry框架:XML数据集 晴

linuxing , 16:07 , 编程 » JavaScript , 评论(0) , 引用(0) , 阅读(9741) , Via 本站原创 | |
    之前的日志提到过,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库拷贝到对应的位置。

<?
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>

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 = "请输入需查询的公司名称";
  }
//-->

可见,当从点击输入框提交数据后,发出POST请求,观察者发出数据加载请求,观察者加入观察,当获取到相关的XML数据后,观察者根据数据生成相应的HTML代码。
但这方式有个很大的问题,就是无法借助Spry提供的动态表格实现更好的互助性。若希望一同实现Spry动态表格,请见这里。
Tags:
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]