<HTML>
<!------------------------------------------------------------------------------------>
<!-- Display a server directory -->
<!-- Full Directory listing (with subdirectories) is obtained via AJAX call -->
<!-- Allow the user to open and close subdirectories -->
<!------------------------------------------------------------------------------------>
<HEAD>
<TITLE>Display a Server Directory</TITLE>
<script src=util/ajax.js></script>
</HEAD>
<BODY onLoad="requestDir()">
<H2>Display a Server Directory </H2>
Enter a Server Directory
<INPUT TYPE=TEXT ID=dir size=30 value='..'>
<BUTTON onclick="requestDir()">Show</BUTTON>
<INPUT TYPE=CHECKBOX ID=subdir> Show subdirectories
<DIV ID="output"> </DIV>
<!------------------------------------------------------------------------------------>
<script>
var url = "https://workshop.sps.nyu.edu/~sultans/php/demo/ws/directory.php"
//*******************************************************************************
// requestDir: Call directory.php via AJAX to retrieve a directory listing
//*******************************************************************************
function requestDir()
{
var directory = document.getElementById("dir").value;
var subdir = document.getElementById("subdir").checked ? 'y' : 'n'
var param = "dir=" + directory + "&subdir=" + subdir ;
var callback = responseDir; //setup a callback function
ajaxRequest(url, "GET", param, callback); //call ajax request
} //pass it the callback fucntion
//*******************************************************************************
// responseDir: Retrieve the XML DOM returned by the AJAX request
//*******************************************************************************
function responseDir(respText, respXML, respJSON, respHeaders)
{
dom = respXML; //get the XML DOM
dom = dom.documentElement; //navigate to the root <dir> element
processDir(dom);
}
//*******************************************************************************
// processDir: Show the entire Dir by calling DisplayNodes for the root node
//*******************************************************************************
function processDir(dom)
{
DisplayString = "<form name=form1>"; //Create an HTML form
DisplayString += "<FONT face=Arial size=-1>";
DisplayNodes(dom, 0, "", "", true) //Call DisplayNodes
DisplayString += "</form>";
document.getElementById("output").innerHTML = DisplayString; //Place in DIV area
}
//*******************************************************************************
// DisplayNodes: diplays a node and all its attributes
// The function calls itself recursively for all its child nodes
// Receives: node - a reference to a node
// indentLevel - an identation level
// id - a unique id for this node
// num - a child number starting at 0
// display - a true/false flag to display
//*******************************************************************************
function DisplayNodes (Node, IndentLevel, id, num, display) {
var i; //Define local variable
var Indent = "";
var IndentDelta = " ";
for (i=0; i < IndentLevel; i++) //Build indentation
Indent += IndentDelta;
id = id + "_" + num; //Append child num to id
boxName = "box" + id; //Create unique checkbox name
//Save box "checked" status
if (document.form1 && document.form1.elements[boxName]
&& document.form1.elements[boxName].checked == false)
boxState = ""
else
boxState = "CHECKED";
if (Node.hasChildNodes() ) //If there are children
box = "<input type=CHECKBOX name=" + boxName
+ " " + boxState + " onClick='processDir(dom)' />"; //Create a checkbox
else
box = " "; //else, indent the display
//************ Display an element (nodeName and NodeValue) *************************
if (display) {
if (is_all_spaces(Node)) //eliminate empty #text nodes
return;
if (Node.nodeValue == null) //clean-up null
value = "";
else
value = Node.nodeValue;
DisplayString += Indent + box
+ '<FONT COLOR=blue>< </FONT>'
+ '<FONT COLOR=brown>' + Node.nodeName + '</FONT>'
+ '<FONT COLOR=blue>> </FONT>'
+ '<FONT COLOR=black><B> ' + value + '</B></FONT>';
//********** Display every attribute for the element ***************************
for (i=0; Node.attributes != null && i < Node.attributes.length; i++)
DisplayString += ' '
+ '<FONT COLOR=red> ' + Node.attributes[i].nodeName + '</FONT>'
+ '<FONT COLOR=blue>="' + '</FONT>'
+ '<FONT COLOR=black><B>' + Node.attributes[i].value + '</B></FONT>'
+ '<FONT COLOR=blue>" </FONT>';
DisplayString += "<BR>";
}
//******* Recursively call displayNodes for every child element *********************
for (i=0; i < Node.childNodes.length; i++) {
//if not checked, display off
if (document.form1 && document.form1.elements[boxName]
&& document.form1.elements[boxName].checked == false)
display = false;
DisplayNodes(Node.childNodes[i], IndentLevel+1, id, i, display);
}
return;
}
//====================================================================================
// is_all_spaces: returns whether a node is all white space
//====================================================================================
function is_all_spaces(node)
{
if (node.nodeName == "#text" && node.nodeValue <= " ")
return(true)
}
</script>
<!------------------------------------------------------------------------------------>
</BODY>
</HTML>