化學元素的 XQuery/增量搜尋

簡介

在本例中，AJAX 以其 AHAH 形式實現了化學元素的增量搜尋。這也是使用正則表示式匹配的一個例子。

執行

主頁

主頁是一個簡單的 HTML 檔案。id 為 list 的 div 元素是生成的內容放置的位置。當多個介面事件中的任何一個發生時，將呼叫 JavaScript 函式 getList()。

declare option exist:serialize "method=xhtml media-type=text/html
        doctype-public=-//W3C//DTD&#160;HTML&#160;4.01&#160;Transitional//EN
        doctype-system=http://www.w3.org/TR/loose.dtd";

<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
     <title>Chemical Elements</title>
      <script language="javascript" src="ajaxelement.js"/>
      <style type="text/css">
       td {{background-color: #efe; font-size:14px;}}
       th {{background-color: #ded; text-align: right; font-variant:small-caps;padding:3px; font-size:12px;}}
       </style> 
   </head>
    <body>
    <h1>Chemical Elements</h1>
    <table class="page">
    <tr>
    <td valign="top" width="30%"><form onSubmit="getList(); return false">
      <span><label for="name">Element Name </label> 
                     <input type="text" size="5" name="name" id="name" title="e.g. Silver"
                                   onkeyup="getList();" onfocus="getList();" />
       </span>
    </form>
    </td>
    <td id="list"/>
    </tr>
    </table>
    </body>
</html>

JavaScript

JavaScript 實現了一個簡單的功能，即使用在搜尋框中輸入的字串呼叫伺服器端指令碼 getElement.xq，並在回撥中將返回的 XHTML 貼上到 div 中。[ 此 JavaScript 不使用任何支援庫，儘管使用例如 jQuery 可以簡化它 ]

function updateList() {
  if (http.readyState == 4) {
      var divlist = document.getElementById('list');
      divlist.innerHTML = http.responseText;
      isWorking = false;
  }
}

function getList() {
  if (!isWorking && http) {
    var name = document.getElementById("name").value;
    http.open("GET", "getElement.xq?name=" + name);
    http.onreadystatechange = updateList;  
          // this sets the call-back function to be invoked when a response from the HTTP request is returned
    isWorking = true;
    http.send(null);
  }
}

function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.overrideMimeType("text/xml"); 
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}

var http = getHTTPObject(); //  create the HTTP Object
var isWorking = false;

伺服器端搜尋

當輸入部分原子名稱時，此指令碼由 getlist() 函式呼叫。該字串被轉換為一個簡單的正則表示式，並在 eXist 自由文字匹配函式中使用，以檢索匹配的原子。響應取決於找到的匹配項數量

如果只有一個匹配項，則返回一個詳細的表格
如果有多個匹配項，則返回一個匹配項列表
如果沒有匹配項，則返回“沒有匹配項”

一個函式將 ATOM 節點轉換為一個表，將每個子節點對映到一個行，節點名稱作為圖例。

declare function local:atom-to-table($element ) {
   <table class="element">
      {for $node in $element/*
      let $label := replace(name($node),"_"," ") 
      return 
            <tr>
                 <th>{$label}</th> 
                 <td>
                   { $node/text()   }
                   </td>
             </tr>       
        }
    </table>
 };
  
let $name := request:get-parameter("name",())
return
  if ($name != "")
  then
      let $search := concat('^',$name)  (: anchor the term to the start of the string :)
      let $elements := doc("periodicTable.xml")/PERIODIC_TABLE
      let $matches := $elements/ATOM[matches(NAME,$search,"i")]
      return 
         if (count($matches) = 0)
         then 
            <span>No matches</span>
         else 
         if (count($matches) =1)
          then 
             local:atom-to-table($matches)
         else 
         (: multiple matches :)
             <table class="list">
               <tr>
                <th>Name</th>
                <th>Symbol</th>
                <th>Atomic Weight</th>
               </tr>
               {for $match in $matches
                order by $match/NAME
                return 
                 <tr>
                    <th>{string($match/NAME)}</th>
                    <td>{string($match/SYMBOL)}</td>
                    <td>{string($match/ATOMIC_WEIGHT)} </td>
                 </tr>
              }
            </table>
  else ()

待辦事項

這裡有一些命名問題 - 需要整理。需要包含單位