Example of XMLHttpRequest

by


 Posted
  Comments
 Catagories: Computers, Web, and Weblogs


Unknown

I’m working on this at work, and I’d like to use some of the ideas on my personal sites as well.  I thought I’d post this, as it doesn’t yet contain anything to amazing or too specific to my work’s enviroment.

1
2
3
4
5
6
7
8
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;script&gt;<br />// global flag<br />var isIE = false;
function searchforEmployee(SearchTerm) {<br />var url = "<a href="http://ednat.sce.com/edn/cgi-bin/empsearch32XML.pl?EmployeeName">http://ednat.sce.com/edn/cgi-bin/empsearch32XML.pl?EmployeeName</a>=" + SearchTerm<br />var XMLRequest = false;<br />var Response;<br /><a>/*@cc_on</a> @*/<br /><a>/*@if</a> (@_jscript_version &gt;= 5)<br />  // JScript gives us Conditional compilation, we can cope with old IE versions.<br />  // and security blocked creation of the objects.<br />  try {<br />   XMLRequest = new ActiveXObject("Msxml2.XMLHTTP");<br />   isIE = true;<br />  } <br />  catch (e) {<br />   try {<br />    XMLRequest = new ActiveXObject("Microsoft.XMLHTTP");<br />    isIE = true;<br />   } <br />   catch (E) {<br />      XMLRequest = false;<br />   }<br />  }<br />@end @*/<br />if (!XMLRequest && typeof XMLHttpRequest!='undefined') {<br />   XMLRequest = new XMLHttpRequest();<br />}<br />XMLRequest.open("GET", url ,true);<br />XMLRequest.onreadystatechange=function() {<br />  if (XMLRequest.readyState==4) { <br />   Response = XMLRequest.responseXML;<br />   <br />     var employees = Response.getElementsByTagName("EMPLOYEE");
   //Clear the previous results<br />   SearchResultsDiv.innerHTML="";<br />   <br />   // Add a table to the div<br />   var table = document.createElement("table");<br />   table.setAttribute("border","1");<br />   table.setAttribute("width","100%");<br />   SearchResultsDiv.appendChild(table);<br />   <br />   // Add a caption<br />   var caption = "Employee Search Results for '" +SearchTerm + "'";<br />   table.createCaption().appendChild(document.createTextNode(caption));
   // Add a Header<br />   var header = table.createTHead();<br />   var headerrow = header.insertRow(0);<br />   headerrow.insertCell(0).appendChild(document.createTextNode("Name"));<br />   headerrow.insertCell(0).appendChild(document.createTextNode("Last Name"));<br />   headerrow.insertCell(1).appendChild(document.createTextNode("PAX"));<br />   headerrow.insertCell(2).appendChild(document.createTextNode("Title"));<br />   headerrow.insertCell(3).appendChild(document.createTextNode("Pager"));<br />   headerrow.insertCell(4).appendChild(document.createTextNode("Email"));<br />   <br />   <br />   for (var i = 0; i &lt; employees.length ; i++) {<br />    thisEmployee = employees[i];<br />    // Parse the XML Document Node<br />    var thisEmp_last = thisEmployee.getElementsByTagName("emp_last")[0].firstChild.data;<br />    var thisEmp_first = thisEmployee.getElementsByTagName("emp_first")[0].firstChild.data;<br />    var thisPax_num = thisEmployee.getElementsByTagName("pax_num")[0].firstChild.data;<br />    var thisPin = thisEmployee.getElementsByTagName("pin")[0].firstChild.data;<br />    var thisTitle = thisEmployee.getElementsByTagName("title")[0].firstChild.data;<br />    var thisPagernum = thisEmployee.getElementsByTagName("pagernum")[0].firstChild.data;<br />    var thisPre_name_flag = thisEmployee.getElementsByTagName("pre_name_flag")[0].firstChild.data;<br />    var thisLegal_last = thisEmployee.getElementsByTagName("legal_last")[0].firstChild.data;<br />    var thisShortname = thisEmployee.getElementsByTagName("shortname")[0].firstChild.data;<br />    var thisDominoserver = thisEmployee.getElementsByTagName("dominoserver")[0].firstChild.data;<br />    var thisMfpd = thisEmployee.getElementsByTagName("mfpd")[0].firstChild.data;<br />    var thisPager_checked = thisEmployee.getElementsByTagName("pager_checked")[0].firstChild.data;<br />    var thisCell_checked = thisEmployee.getElementsByTagName("cell_checked")[0].firstChild.data;<br />    var thisBlackberry_checked = thisEmployee.getElementsByTagName("blackberry_checked")[0].firstChild.data;<br />    var thisMail_checked = thisEmployee.getElementsByTagName("mail_checked")[0].firstChild.data;<br />    var thisPager_publish = thisEmployee.getElementsByTagName("pager_publish")[0].firstChild.data;<br />    var thisCell_publish = thisEmployee.getElementsByTagName("cell_publish")[0].firstChild.data;<br />    var thisMfpd_publish = thisEmployee.getElementsByTagName("mfpd_publish")[0].firstChild.data;<br />    var thisCell_area = thisEmployee.getElementsByTagName("cell_publish")[0].firstChild.data;<br />    var thisCell_phone = thisEmployee.getElementsByTagName("cell_phone")[0].firstChild.data;<br />    // Process
    // Step 1. Create a new Search Results Set of divs to add to the page
    var row = table.insertRow(i+1);<br />    row.insertCell(0).appendChild(document.createTextNode(thisEmp_first+" "+thisEmp_last));<br />    row.insertCell(1).appendChild(document.createTextNode(thisEmp_last));<br />    row.insertCell(2).appendChild(document.createTextNode(thisPax_num));<br />    row.insertCell(3).appendChild(document.createTextNode(thisTitle));<br />    row.insertCell(4).appendChild(document.createTextNode(thisPagernum));<br />    row.insertCell(5).appendChild(document.createTextNode(thisDominoserver));
   }<br />  }<br />}<br />XMLRequest.send(null)<br />}<br />&lt;/script&gt;<br />&lt;body&gt;<br />&lt;form id="employeeSearchForm" name="employeeSearchForm"&gt;<br />&lt;input type="text" id="searchterm" &gt;   &lt;!---           onkeypress="(employeeSearchForm.searchterm.value.length &gt; 2) ? searchforEmployee(employeeSearchForm.searchterm.value) : SearchResultsDiv.innerHTML='';  searchlength.value = employeeSearchForm.searchterm.value.length;" &gt; ---&gt;<br />&lt;input type="button"<br />    onclick="searchforEmployee(employeeSearchForm.searchterm.value);"<br />    id="Search"<br />    value="Search"&gt;<br />&lt;/form&gt;<br />&lt;div id="searchlength"&gt;&lt;/div&gt;<br />&lt;div id="SearchResultsDiv"&gt;<br />&lt;/div&gt;
&lt;/body&gt;<br />&lt;/html&gt;<