var _ms_XMLHttpRequest_ActiveX="";var _ajax;var _logger=true;var _status_area;BASE_URL="." if(document.location.href.indexOf("www.clearnova.com")>0){BASE_URL="/ThinkCAP"} if(!window.Node||!window.Node.ELEMENT_NODE){var Node={ELEMENT_NODE:1,ATTRIBUTE_NODE:2,TEXT_NODE:3,CDATA_SECTION_NODE:4,ENTITY_REFERENCE_NODE:5,ENTITY_NODE:6,PROCESSING_INSTRUCTION_NODE:7,COMMENT_NODE:8,DOCUMENT_NODE:9,DOCUMENT_TYPE_NODE:10,DOCUMENT_FRAGMENT_NODE:11,NOTATION_NODE:12};} function $(){var elements=new Array();for(var i=0;ivar pingAJAX;function ping(text){logger("PING: Initializing XMLHttpRequest");if(window.XMLHttpRequest){pingAJAX=new XMLHttpRequest();}else{pingAJAX=new ActiveXObject("MSXML2.XMLHTTP");} logger("PING: Setting Callback"); pingAJAX.onreadystatechange=pingCallback; logger("PING: Opening POST Request (async)"); pingAJAX.open("POST",BASE_URL+"/servlet/ping?value="+encode(text),true); logger("PING: Sending Request"); pingAJAX.send(null);} function pingCallback(){logger("PING: pingCallback. readyState = "+pingAJAX.readyState);if(pingAJAX.readyState==4){logger("Response from server: "+pingAJAX.responseText);document.getElementById("ping_status").innerHTML="Ping Complete: "+pingAJAX.responseText;}} function spam(num){$('spam_time').innerHTML="Initiating "+num+" XMLHttpRequests.";var startTime=new Date();for(var i=1;i<=num;i++){new AJAXRequest("POST",BASE_URL+"/servlet/ping","hide=1&num="+i,function(){},false);} var endTime=new Date() var millis=endTime-startTime;logger("time to spam the server with "+num+" requests: "+(millis/1000).toFixed(2)+" seconds. "+(millis/1000/num).toFixed(2)+" seconds per request.");$('spam_time').innerHTML=num+" requests took "+(millis/1000).toFixed(2)+" seconds. "+(millis/1000/num).toFixed(2)+" seconds per request.";} function getBigFile(){self._myCount=0;self._big_file_status=$('big_file_status');self._big_file_status.value='Retrieving Large File...';$('big_file_status_button').style.display='inline';$('big_file_status_button').ajaxHandle=new AJAXRequest("POST",BASE_URL+"/servlet/getBigFile",null,function(AJAX){if(!(document.all)&&AJAX.readyState==3){self._myCount++;if((self._myCount%10)==0){self._big_file_status.value="readyState = 3 - called "+_myCount+" times.";}}else if(AJAX.readyState==4){if(AJAX.status==200){self._big_file_status.value="Done ("+AJAX.responseText.length+" bytes) | Server Message: "+AJAX.statusText;}else{alert("There was a problem retrieving the XML data:\n"+AJAX.statusText);self._big_file_status.value="** ERROR **"+AJAX.statusText;} $('big_file_status_button').style.display='none';}});} function stopBigFile(){var status=$('big_file_status_button');if(status){status.style.display='none';if(status.ajaxHandle){status.ajaxHandle.abort();status.ajaxHandle=null;}}}function trackChanges(field,event){var self=this;self.field=field;if(event){if(event.type=="keyup"){if(event.keyCode==16||event.keyCode==17||event.keyCode==18){return;}}} var type=field.type;var last_value=field.value;logger("TrackChanges: "+field.name+", value="+field.value);if(type=="checkbox"){last_value=field.checked;} var url=BASE_URL+"/servlet/field_tracker?field_name="+encode(field.name)+'&last_value='+encode(last_value);return AJAXRequest("POST",url,null,function(AJAX){if(AJAX.readyState==4){if(AJAX.status==200){var s=self.field.name+"_info";$(s).innerHTML=" -> From Server: "+AJAX.responseText+"";}else{alert("There was a problem retrieving the XML data:\n"+AJAX.statusText);}}},true);}function clearSelect(){for(var i=0;ifunction getFormData(value,dataset,target,parm2,parm3){return new AJAXRequest("POST",BASE_URL+"/servlet/get_formdata","dataset="+dataset+"&target="+target+"&value="+value);} function getFormValues(form){form=$(form);var field="";var value="";var valueString="";var replaceID="";var parentNode=form.parentNode;for(var i=0;i-1){value=field.options[field.selectedIndex].value;}}else{value=field.value;} valueString+=((i)?'&':'')+field.name+'='+encode(value);}} return valueString} function saveForm(form,extravalues,process){var form=$(form);if(!form.method){form=$(form.form);} if(form){var valueString=getFormValues(form)+(!!(extravalues)?extravalues:'');valueString+="&AJAX_FORM_NAME="+encode(form.id);var functionToCall=null;if(typeof process=='function'){functionToCall=process;}else{functionToCall=executeReturn;} new AJAXRequest('POST',BASE_URL+form.action,valueString,functionToCall);}} function saveCustomerForm(form){saveForm(form,null,function(AJAX){if(AJAX.readyState==4){if(AJAX.status==200){$('customerFormStatus').innerHTML=" "+AJAX.statusText;$('customerFormStatus').style.color=null;form.save.disabled=true}else{$('customerFormStatus').innerHTML=AJAX.statusText $('customerFormStatus').style.color='red';}}});return false;}function getCustomersByState(state,target){if(!state){clearCustomersByState();}else{var state1_div=$('state1_div');state1_div.style.visibility='visible';return new AJAXRequest("post",BASE_URL+"/servlet/get_customers","state="+encode(state),processGetCustomersByState);}} function clearCustomersByState(){var state1_div=$('state1_div');state1_div.innerHTML="";state1_div.style.visibility='hidden';document.getElementById("state1_info").innerHTML="";} function processGetCustomersByState(myAJAX){if(myAJAX.readyState==4){if(myAJAX.status==200){var response=myAJAX.responseText;var customers;var returnParms=response.split('&');for(var i=0;i
  • "+decode(custList.join("
  • "))+"
    • ";div.style.visibility="visible"}}else{alert("There was a problem retrieving the XML data:\n"+myAJAX.statusText);}}}function getCustomersByStateXML(state){if(!state){clearCustomersByStateXML();}else{return new AJAXRequest("post",BASE_URL+"/servlet/get_customersXML","state="+encode(state),processGetCustomersByStateXML);}} function clearCustomersByStateXML(){var state2_div=document.getElementById("state2_div");state2_div.innerHTML="Please enter a state...";$("state2_info").innerHTML="";} function processGetCustomersByStateXML(myAJAX){if(myAJAX.readyState==4){if(myAJAX.status==200){logger(myAJAX.responseText);xml=myAJAX.responseXML;var div="";if(xml.documentElement){var state=xml.documentElement.getElementsByTagName("state")[0].firstChild.nodeValue;var customers=xml.documentElement.getElementsByTagName("customer");if(customers.length<=0){div+="No customers found for state: "+state +"";}else{document.getElementById("state2_info").innerHTML=" "+customers.length+" customer"+ (customers.length==1?"":"s")+" found" div+="";for(var i=0;i" div+="";div+="";}} div+="
    "+id+""+name+"
    ";var state2_div=document.getElementById("state2_div");if(state2_div){state2_div.innerHTML=div;state2_div.style.display='block';}}}else{alert("There was a problem retrieving the XML data:\n"+myAJAX.statusText);}}}function getSuggest(field){return new AJAXRequest("POST",BASE_URL+"/servlet/ajax_suggest","qu="+encode(field.value));} function sendRPCDone(notUsed,search_term,term_array,results_array,unused_array){var div="";if(results_array.length==0){div+="";}else{for(var i=0;i";}} div+="
    No results found for "+search_term+"
    "+term_array[i]+''+results_array[i] +"
    ";var google_suggest_target=$("google_suggest_target");if(google_suggest_target){google_suggest_target.innerHTML=div;}}_description=new Object();_description.div_ping=function(){var desc="Ping
    Ping sends the current date to the server. Basic AJAX functionality. See server console for date.";desc+="

    Spam
    Sends 10 pings to the server to show how long it takes to send 1 request to the server.";desc+="

    Big File
    Returns up to 10 megs from the server. Shows # of times onreadystatechange has been called (its a lot!).";desc+="
    While the file is downloaded, you can work on other fields and see server activity. This shows that the behavior is truly asynchronous and multiple requests can be handled.";desc+="
    The server stops sending data after 60 seconds so your file size might be smaller if you have a slower connection.";desc+="
    If you shut down the server while downloading the big file, you will see an error message.";return desc;};_description.div_track_changes=function(){var desc="Track Changes As Fields Change
    ";desc+="As each field changes, the change is sent to the server. If all is well, the word OK shows up next to the field along with the text sent to the server.";desc+="
    The server console shows the values sent to the server.";desc+="

    Track Changes On Key Up
    ";desc+="As each key is released, the current value of the field is sent to the server. If all is well, the word OK shows up next to the field.";desc+="
    The server console shows the values sent to the server.";desc+="

    For Best Performance, Hide the Activity Log

    " return desc;};_description.div_dropdowns=function(){var desc="Drop Downs & Form Handling
    ";desc+="An AJAX call is made to the server to get the states and populate the select box (drop down). ";desc+="The server dynamically creates Javascript that is executed through an eval statement.";desc+="The final line of the Javascript calls the onchange event of the state drop down which then retrieves all the cities for that state.";desc+="

    The city drop down is populated and its onchange event retrieves all the customers for a given city.";desc+="

    When the customer changes, the server returns Javascript that replaces all customer fields with the appropriate values.";desc+="If you open the Track Changes section, you'll notice that both address fields on the page are updated.";desc+="

    In the samples, if you add a new INPUT field that matches a column in the customer table, it will be populated for you during runtime";desc+="

    The routines to retrieve the state, city, and customer dropdowns all use variations of encapsulating XMLHTTPRequests instead of using a global XMLHTTPRequest (_ajax).";desc+="

    Save
    Sends the contents of the customer form back to the server. A message is shown indicating a successful save or a failure.";desc+="

    For Best Performance, Hide the Activity Log

    " return desc;};_description.div_customers_by_state=function(){var desc="Retrieve Customers By State (non-XML)
    ";desc+="This calls the server when the state is changed. The server returns a data set that includes the customer ID and the customer name. ";desc+="

    Each pair is delimited by a comma, and each set is delimited by a !";desc+="

    To see all customers, enter a '%' sign.";desc+="

    For Best Performance, Hide the Activity Log

    " return desc;};_description.div_customers_by_state_xml=function(){var desc="Retrieve Customers By State (XML)
    ";desc+="This calls the server when the state is changed. The server returns a data set that includes the customer ID and the customer name. ";desc+="

    The data is returned back as an XML document and the returnXML property of the XMLHTTPRequest is parsed to pull out the data.";desc+="

    To see all customers, enter a '%' sign.";desc+="

    For Best Performance, Hide the Activity Log

    " return desc;};_description.div_google_suggest_hack=function(){var desc="Google Suggests Hack
    ";desc+="This fires on each keystroke and calls the server passing the current search field.";desc+="

    The server in turn calls the google suggest URL and then passes the results back to the user's browser.";desc+="

    Google returns a Javascript method call to sendRPCDone(). We have our own sendRPCDone that loops through the results and presents the top 10 hits + # of pages.";desc+="

    The reason Google is not called directly from the browser is that XMLHTTPRequest can only be used to call the orignal server or a trusted server setup in the Browser settings.";desc+="

    For Best Performance, Hide the Activity Log

    " return desc;};_description.div_activity_log=function(){var desc="Activity Log
    ";desc+="Shows various activity logs for each of the examples.";desc+="

    The log is shown with the most recent log item at the top of the list.";desc+="

    To write to this log, use the logger() function in the Javascript.";desc+="

    For Best Performance, Hide the Activity Log

    " return desc;};_description.default_text=function(){var desc="Basic AJAX Examples
    ";desc+="
    The downloadable samples include full JavaScript & Java Source, a sample database for any SQL database, and a PowerPoint presentation.";desc+="

    This sampler shows some basic techniques to demonstrate some of the possibilities of using AJAX/XMLHTTPRequest techniques in web applications.";desc+="

    Basic browser & server interaction is demonstrated along with dynamic population of visual elements such as DIVs and SELECT drop downs.";desc+="

    In addition, many ways of instantiating & encapsulating XMLHTTPRequest objects are shown in the Javascript.";desc+="

    This sample is freeware and has no copyright restrictions whatsoever. It is doesn't carry a warranty or a guarantee.";desc+="

    Written by Steve Benfield.
    sbenfield@clearnova.com";desc+="

    ClearNova provides ThinkCAP™, a framework & visual workbench ideally suited for building Rich Internet Applications using AJAX techniques. For information on ThinkCAP, visit www.clearnova.com" desc+="

    For Best Performance, Hide the Activity Log

    " desc+="

    This page is running on a development server--uptime is not guaranteed.

    " desc+="

    Last Updated: July 15, 2005 | Version 1.1";return desc;} function toggleDiv(element){var e=$(element);if(e){e.style.display=((e.style.display!='block')?'block':'none');$('div_upper_right').innerHTML=_description[e.id]();}} function toggleLog(button){var disp=$('status_area').style.display;if(disp=='none'){$('status_area').style.display='block';button.value='Stop & Hide Log';_logger=true;}else{$('status_area').style.display='none';button.value='Show Log';_logger=false;}}