<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"><html><head> <script type="text/javascript"> var request; var queryString; //will hold the POSTed data function sendData( ) { setQueryString( ); var url="http://www.parkerriver.com/s/sender"; httpRequest("POST",url,true); } //event handler for XMLHttpRequest function handleResponse( ) { if(request.readyState == 4) { if(request.status == 200) { var doc = request.responseXML; var info = getDocInfo(doc); stylizeDiv(info,document.getElementById(""docDisplay"")); } else { alert(""A problem occurred with communicating between ""+ ""the XMLHttpRequest object and the server program.""); } }//end outer if } /* Initialize a request object that is already constructed */ function initReq(reqType,url,bool) { /* Specify the function that will handle the HTTP response */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.setRequestHeader(""Content-Type"", ""application/x-www-form-urlencoded; charset=UTF-8""); /* Only works in Mozilla-based browsers */ //request.overrideMimeType(""text/xml""); request.send(queryString); } /* Wrapper function for constructing a request object. Parameters: reqType: The HTTP request type, such as GET or POST. url: The URL of the server program. asynch: Whether to send the request asynchronously or not. */ function httpRequest(reqType,url,asynch) { //Mozilla-based browsers if(window.XMLHttpRequest) { request = new XMLHttpRequest( ); } else if (window.ActiveXObject) { request=new ActiveXObject("Msxml2.XMLHTTP"); if (!request) { request=new ActiveXObject("Microsoft.XMLHTTP"); } } //the request could still be null if neither ActiveXObject //initialization succeeded if(request) { initReq(reqType,url,asynch); } else { alert("Your browser does not permit the use of all "+ "of this application's features!"); } } function setQueryString( ) { queryString=""; var frm = document.forms[0]; var numberElements = frm.elements.length; for(var i = 0; i < numberElements; i++) { if(i < numberElements-1) { queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value) + "&"; } else { queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value); } } } /* Provide the div element's content dynamically. We can add style information to this function if we want to jazz up the div */ function stylizeDiv(bdyTxt,div) { //reset DIV content div.innerHTML=""; div.style.backgroundColor="yellow"; div.innerHTML=bdyTxt; } /* Get information about an XML document via a DOM Document object */ function getDocInfo(doc) { var root = doc.documentElement; var info = "<h3>Document root element name: <h3 />"+ root.nodeName; var nds; if(root.hasChildNodes( )) { nds=root.childNodes; info+= "<h4>Root node's child node names/values:<h4/>"; for (var i = 0; i < nds.length; i++) { info += nds[i].nodeName; if(nds[i].hasChildNodes( )) { info += " : \\"+nds[i].firstChild.nodeValue+"\\"<br />"; } else { info += " : Empty<br />"; } } } return info; } </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Send a data tidbit</title></head><body><h3>A few facts about yourself...</h3><form action="javascript:void%200" onsubmit="sendData();return false"> <p>First name: <input type="text" name="firstname" size="20"></p> <p>Last name: <input type="text" name="lastname" size="20"></p> <p>Gender: <input type="text" name="gender" size="2"></p> <p>Country of origin: <input type="text" name="country" size="20"></p> <p><button type="submit">Send Data</button></p></form></body></html>