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<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
editfunction 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
editdeclare 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>