XQuery/Employee Search
< XQuery
This example shows JavaScript and XQuery combining to provide a directly updated Web page. AJAX is used in a form sometimes referred to as AHAH in which the server-side XQuery script returns an XHTML node (in this case a table containing the information about an employee) which is updated into the DOM using innerHTML.
The search page
[edit | edit source]<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Emp query using AJAX</title> <script language="javascript" src="ajaxemp.js"/> <style> th {{background-color:yellow}} </style> </head> <body> <h1>Emp query using AJAX</h1> <form action="javascript:getEmp();"> <label for="EmpNo" title="e.g. 7369, 7499 and 7521."> Employee Number</label> <input type="text" size="5" name="empNo" id="empNo" /> <input type="submit" value="Find"/> </form> <div id="emp"/> </body> </html> The JavaScript script
[edit | edit source]function updateEmp() { if (http.readyState == 4) { var divlist = document.getElementById('emp'); divlist.innerHTML = http.responseText; isWorking = false; } } function getEmp() { if (!isWorking && http) { var empNo = document.getElementById("empNo").value; http.open("GET", "getemp.xq?empNo=" + empNo, true); http.onreadystatechange = updateEmp; 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; The get script
[edit | edit source]declare function local:element-to-table($element) { <table> {for $node in $element/* return <tr> <th>{name($node)}</th> <td> { $node/text() } </td> </tr> } </table> }; let $empNo := request:get-parameter("empNo",()) let $emp := //Emp[EmpNo=$empNo] return if (exists($emp)) then local:element-to-table($emp) else <p>Employee Number {$empNo} not found.</p>