XQuery/增量搜尋

動機

您有一個大型資料集，並且希望使用 JavaScript 與伺服器非同步通訊以在使用者鍵入時縮小搜尋範圍。

美國郵政編碼示例

美國大約有 43,000 個 5 位郵政編碼。有很多應用程式可以將郵政編碼轉換為位置，例如 Ben Fry 的使用 Processing 編寫的 Java 小程式

此示例使用使用 Ajax 請求來自伺服器端搜尋的郵政編碼 XML 資料庫子集的客戶端 XHTML 頁面，並動態更新頁面。

HTML 頁面

由 XQuery 生成，雖然內容是靜態的。

 
declare option exist:serialize "method=xhtml media-type=text/html indent=yes";

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ZIP Code to City and State using XmlHttpRequest</title>
<script language="javascript" src="ajaxzip.js"/>
     </head>
     <body>
     <h1>US Zipcode decoder</h1>
     <form onSubmit="getList(); return false">
     <p>ZIP code:  
          <input type="text" size="5" name="zip" id="zip" onkeyup="getList();" onfocus="getList();" />
              e.g. 95472
       </p>
   </form>
   <div id="list"/>
    </body>
</html>

Javascript

使用 XMLHttpRequest 請求子集並使用 innerHTML 更新頁面。

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

function getList() {
  if (!isWorking && http) {
    var zipcode = document.getElementById("zip").value;
    http.open("GET", "getzip.xq?zipcode=" + escape(zipcode), true);
    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;

XQuery 搜尋

伺服器端 XQuery 用於在 XML 資料庫中執行搜尋並生成 XHTML。這使用 eXist 全文索引和 exist 特定的 &= 運算子。

let $zipcode := request:get-parameter("zipcode",())
return
<div>
 {if  (string-length($zipcode) > 1)  (: too slow :)
  then 
      let $search := concat('^',$zipcode)
      for $zip in //Zipcode[matches(Code,$search)]
      return 
         <div>{string-join(($zip/Code,$zip/Area,$zip/State),' ')}</div>
  else ()
 }
</div>

XML 資料檔案

資料最初是 CSV 檔案，使用 Excel 和 XML 載入項轉換為 XML。這是資料樣本。

<Zipcodes>
    <Zipcode>
        <Code>210</Code>
        <Area>Portsmouth</Area>
        <State>NH</State>
    </Zipcode>
    <Zipcode>
        <Code>211</Code>
        <Area>Portsmouth</Area>
        <State>NH</State>
    </Zipcode>
    <Zipcode>
        <Code>212</Code>
        <Area>Portsmouth</Area>
        <State>NH</State>
    </Zipcode>
    <Zipcode>
        <Code>213</Code>
        <Area>Portsmouth</Area>
        <State>NH</State>
    </Zipcode>
...

執行