Comet - For Ajax Guru - Updating Client During Long Running Server Process

gsdevEE
gsdevEE used Ask the Experts™
on
So I am hoping someone can provide me with some sample code that exemplifies an ajx "Long Polling" or "Comet" transaction (I am not the greatest w/Jscript|javascript) .  I have a long running function that verifies a user, takes DB values, and configures a mail message to send after passing through two webservices.  My web app is ajax enabled, and I use a lot of different scripts and the toolkit - I would like to able to show the progress and ultimately the completion of the function, however when I tried to show a modal popup and update it's contents during the function, I could not (EX:
        protected void TestMail_Click(object sender, EventArgs e)
        {
            btnTestMail.Enabled = false;
            modalAjax.Show();
ISecurityService service = ServiceFactory.GetSecurityService();
            try
            {
                if (string.IsNullOrEmpty(uxSendMailAddressTxt.Text))
                {
                    modalText.Text = "Enter valid address";
                    nestedUpdatePanelOnModal.Update();
                    return;
                }
                if (service.TestMailConfiguration(GetConfigTable(), uxSendMailAddressTxt.Text))
                {
                            modalText.Text = "Mail sent";
                    nestedUpdatePanelOnModal.Update();
return;
                }
                else
                {
                            modalText.Text = "SSend failed";
                    nestedUpdatePanelOnModal.Update();return;
                }

            }
            catch (System.Web.Services.Protocols.SoapException ex)
            {
                        modalText.Text = ex.Message;
                    nestedUpdatePanelOnModal.Update();
            }
            finally
            {
                this.btnTestMail.CssClass = "formButton";
                this.btnTestMail.Enabled = true;
                pnlUpdateConfig.Update();
            }


So basically I nedd to do an ajax request that checks the status, but I have no idea how to do so - your help is much appreciated
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
http://www.ajaxtoolbox.com/request/

I use an AJAX library that I love.. its relatively simple and lightweight.. but it does something you might want to look into..

A.  it allows you to assign groupnames to ajax calls
B. You can show activity status for each group and for the ajax engine as a whole..
imagine you have 4 ajax calls going each a different group and each with an indicator that it is doing something.. and also another indicator that ajax (the page) as a whole is processing data...

for myself I use that and I incorporate my ajax calls into a state machine so I can guarantee things finish and start in a particular order..

imagine a state machine "case statement"

case state of
0: {
finished processing
turn off all indicators and status tags
}
 1:{
set indicators and status tags
get data for report  (nextstate if successful 4)
}
 2:{
an error occured maybe..
set indicators etc..
}
3:{
some other ajax, or js call..
}
4:{
here we came from 1 most likely
set indicators and status tags
we should be here because get data for report was successful
function to process data
show data
}
 
Ajax call  Set state=1, set nextstate=3

Author

Commented:
I am a little confused - what do you mean by state machine ?  Is this a class object, or an actual server, as I would not be able add to the system arch. w a new machine ?
no not an actulal object or anything it is a method of programming.. a technique actually..
You could implement it anyplace.. but the basic idea is keep track of what you are doing with some variable and pass it around so each function knows what it is doing and what to do after it is done. instead of letting your ajax just fire all at once.. its very good for making sure things happen in the right sequence and such..


totally not necessary for just using the ajaxrequest and group/ajax activity monitors..
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!



function ajaxQueue(step) {
  switch(step) {
    case 1: Step1 (2); //validate URT form
             break;
    case 2: Step2 (3); //Download and Upload test
                    break;
    case 3: Step3 (4); //Ping Test 1
                    break;
    case 4: Step3 (5); //Ping Test 2
                    break;
    case 5: Step3 (6); //Ping Test 3
                    break;
    case 6: Step3 (7); //Ping Test 4
                    break;
    case 7: Step3 (8); //Ping Test 5
                    break;
    case 8: PingSummary (9); //Ping Summary Stats
                    break;
    case 9: Step4 (10); //Save Data
                    break;
    case 10: Step5 (0); //finalize messages
                    break;
  }
}

function StepResults(step, status) {
    if (status == 'passed') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", true);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", true); //show results
    }
    if (status == 'failed') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", true);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", true); //show results
    }
    if (status == 'warning') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", true);
        Visible("step" + step + "result", true); //show results
    }
    if (status == 'off') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", false); //show results
    }
    if (status == 'start') {
        Visible("step" + step, true);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", false); //show results
    }
}


function Step1(nextstep) {
    StepResults('1', 'start');
    URTResult = 'passed';
    //Check the email address
            if (isValidEmail(document.getElementById("txtEmail")) ==false) {
                  URTResult = 'failed';
                  URTResultText = 'Invalid email address.<br>';
            }
            if (isBlank(document.getElementById("txtFirstName")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing first name. <br>';
            }
            if (isBlank(document.getElementById("txtLastName")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing last name. <br>';
            }
            if (isBlank(document.getElementById("txtCompany")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing company. <br>';
            }
            if (isBlank(document.getElementById("txtCountry")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing country. <br>';
            }
            if (isBlank(document.getElementById("txtState")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing state. <br>';
            }
            if (isBlank(document.getElementById("txtCity")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing city. <br>';
            }
            
    if (URTResult == 'failed') {
                  document.getElementById("step1result").innerHTML = 'Contact form incomplete.';
            }
    StepResults('1', URTResult);
        ajaxQueue(nextstep);
}

Author

Commented:
One more question before I implement this - can you show how the example above would tie into the markup (aspx page), and if possible, the code (cs/vb)?
As a note you should avoid modal windows..

so it looks like you are
creating a form  and asking the user to enter an email and when he presses a button it sends an email via SOAP?  

Do you have other files I could look at before giving you a solid answer?  all needed to simulate on my machine?

Author

Commented:
sorry, i havent gotten back to you - so you need to see something else ? because our arch. is huge, i could just give you the code that sends the mail ? or did you need something else ?  ill sign in when i get to work tomoro thanks again

Author

Commented:
sorry, i havent gotten back to you - so you need to see something else ? because our arch. is huge, i could just give you the code that sends the mail ? or did you need something else ?  ill sign in when i get to work tomoro thanks again
well I was thinking that if I had just enough server side/client side code I could test it and see if I can come up with a solution.  It would help me to understand your problem better also..
I reread and wonder why you are wanting to use comet/long polling..

Author

Commented:
So here is the deal - when doing a long server interaction, I would like to display the progress to the user as it goes forward, ie, --> retrieving settings --> sending... --> sucess...

So it is not possible to fireback updates to the modal popup like so (I tried) so when I researched doing it a different way, this looked like the viable option... So I am posting a stripped down version of what I am trying to do, and let me know if it is possible  - Thanks again (I included the update panel in the modal to show you what I was going for, unfortunately, you cannot update the modal several times during the long server interaction :()


Code (Markup)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalPopupDemo_New._Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Modal Popup Demo (3.5.40412.0)</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <h3>
     
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
        </h3>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <table>
                <tr>
                    <td style="width: 100px">
                       Show:</td>
                    <td>
                        <asp:Button ID="drpCourt" runat="server"   OnClick="showModal" />
                    </td>
                    <td>
                    </td>
                </tr>

            </table>
         
       
         <asp:Panel ID="pnlPopup" runat="server" Width="550px">
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%" id="tblPopup">
                <tr>
                    <td class="heading">
                       Information</td>
                </tr>
                <tr>
                    <td class="body">
              <%--      This actualy does not work, putting an update panel in the Modal box and updating it from the server,
                    but will give you an idea of what I am trying to acomplish--%>
                    <asp:UpdatePanel ID="updatePanelInModalTemplate" runat="server" UpdateMode="Conditional">        `                              <ContentTemplate>
                        <asp:Label ID="lblInfo" runat="server"></asp:Label>
                       
                        </ContentTemplate>
                        </asp:UpdatePanel>
                       
                       
                       
                       
                        </td>
                       
                </tr>
                <tr>
                    <td class="footer">
                        <asp:Button ID="btnDlgOK" runat="server" Text="OK" />
                        </td>
                </tr>
            </table>
        </asp:Panel>
       
        <asp:Button ID="btnDummy" runat="server" Text="Button" />
       
        <asp:ModalPopupExtender ID="btnDummy_ModalPopupExtender" runat="server"
            TargetControlID="btnDummy"
            OkControlID="btnDlgOK"
            PopupControlID="pnlPopup"
            DynamicControlID="lblInfo"
            BackgroundCssClass="modal"
            DropShadow=true
            >
        </asp:ModalPopupExtender>
        <br />
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


Code (Page Class)

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ModalPopupDemo_New
{
    public partial class _Default : System.Web.UI.Page
    {
   

        protected void Page_Load(object sender, EventArgs e)
        {
            btnDummy.Style.Add("display", "none");
        }

        protected void showModal(object sender, EventArgs e)
        {    
            this.btnDlgOK.Enabled = false;
            this.lblInfo.Text = "Getting data...";
            btnDummy_ModalPopupExtender.Show();
           
            //Update the text
            System.Threading.Thread.Sleep(4000);
            this.lblInfo.Text = "Doing stuff on the server...";
            this.updatePanelInModalTemplate.Update();

            //Update the text
            System.Threading.Thread.Sleep(4000);
            this.lblInfo.Text = "Doing some more stuff on the server...";
            this.updatePanelInModalTemplate.Update();

            //Update the text
            System.Threading.Thread.Sleep(4000);
            this.lblInfo.Text = "Finishing doing stuff on the server...";
            this.updatePanelInModalTemplate.Update();

            //Update the text and enable a control in the pop up
            System.Threading.Thread.Sleep(4000);
            this.lblInfo.Text = "Done !";
            this.btnDlgOK.Enabled = true;
            this.updatePanelInModalTemplate.Update();
        }
    }
}



ah I see..
is it possible that the client could perform each of the requests instead of the server performing them and the client updating the progress as the states complete?  

looking at it now

Author

Commented:
I do not thinjk that would be feasible to tranlate the server side code to js requests (there is some intricate error handling, etc so I would prefer to do this n the server and just use whatever mechanisk I can to retrieve the results as they come in//

Author

Commented:
anu luck with this ...?
well looking at it I found several different ways of doing it none were particular to ASP  most were javascript but it should be possible with asp also
you would set the http header to be a multipart heater so that it expects more than one piece of data
then each of your requests will have a separate id when it sends it to the client.   this allows the long polling via multipart
but your asp is server side code that generates the HTML correct?  
so what on the server handles the client requests?  
Is the server really requesting the data and such or are you trying to request the data in the asp code that is generating the client response?  
normally they are separated.   meaning your asp would generate a page and that page would call for some data and the server "other aps script" would send requests to other servers and such and package the data and send back to theclient..  
Maybe the whole problem is that you are trying to do too much with only half of the solution.  Maybe it isnt divided up properly..   lets think about that and discuss how it is working fundamentally.

Author

Commented:
javascript is fine - just post how it would be placed into the page example I posted.  I looked at a few different comet implementations.  Because there are only three functions that require this kind of push to the client, I am hoping for an xample that shows how to poll the server as it processes a function or a handler I can call from the server side during the request.  I am trying to do anything that will update the clent from the server during a long running function - javascript is fine, please just show an example of how it would work with the code I posted and I will be more than happy - thanks again for your help.

Author

Commented:
Giving Up on me ?
ok not quite giving up..
one question..
your server is polling data from where?  
You mentioned that you had several things going on that took a long time could you list them and the proper order of completion and how they relate if possible.

I will provide a sample that I hope you can work with.. ok.. :)

Author

Commented:
Sounds good - thanks alot @
I have looked at it a bit, even wrote a server push app to update an image or text.. but
to use it with Ajax isn't particularly easy.  most of the items I have read seem to point to using  a frame or iframe to receive the data.  but even if that happened you would have to be returning data that updated the main page not just that frame/iframe.    While it is possible and probably has some good uses someplace, I have to believe there is a better way.  

Although html5 does have sockets and you could do it with that very easily I think.

I dont think that I will be able to give you a good server push solution.. I still think though.. that we could solve this with ajax.  Especially if you can make or trigger the calls client side.   example
client
  start do state1,  set state = 1,  on success goto state 2 on fail goto state 99
  if success
  do state 2, set state = 2, on success goto state 3 on fail goto state 99
etc..

where state1 and state2 are functions that call the server via ajax to do something.   if the server is successful then the next state is activated else do the error function..

I have done things like this before quite successfully

Author

Commented:
Sounds good - I just am not that great with javascript, so I could use the syntax if you please good sir
ok..
several parts..


first bandwidthtest.js



/*
Used for custom functions and features specific to BandwidthTest.htm

implement this at a later date.....


*/

//Constants that you might want to change
var currentTime = new Date();
var obj;
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var month = currentTime.getMonth() + 1;
var aTimeStamp;
var kilobytes;
var kilobits;
var KBs;
var Kbps;
var kbps;
var megabytes;
var megabits;
var MBs;
var Mbps;
var mbps;
var SessionID;
var aNiceTime;
var aNiceDate;
var pingMessage = '';
var pingMin = 999999; //everything is lower
var pingMax = 0; //everything is higher
var pingAvg = 0;
var pingSent = 0;
var pingTotal = 0;
var pingReceived = 0;
var pingResult = '';
var pingStats = '';
var pingLost = 0;
var Mbps_up = 0;
var Mbps_down = 0;
var Kbps_up = 0;
var Kbps_down = 0;
var URTform;
var URTResult; // this holds the result of the test passed/failed/warning
var URTResultText = '';
//warnings are considered passing. for the URTResult
var URTBandwidthFail = 100; //Kbps below this value is a fail
var URTBandwidthPass = 105; //Kbps Above this value is a pass
var URTLatencyFail = 1000; //ms above this value fail
var URTLatencyPass = 500; //ms below this value pass


var log = document.getElementById("log"); //this is an element on out form that we use for logging messages

//var AJAXServerIP='190.149.80.159'; //Jacks Server Live  this is the ip of the server that you will be making AJAX Calls to
//var AJAXServerIP='127.0.0.1'; //Jacks Server Live  this is the ip of the server that you will be making AJAX Calls to
var AJAXServerIP = '192.168.80.130'; //Jacks Development Server this is the ip of the server that you will be making AJAX Calls to
var AJAXScript = 'GTISAPI.DLL';
var AJAXurl = 'HTTP://' + AJAXServerIP + '/scripts/' + AJAXScript + '/';
var AJAXImageURL = 'HTTP://' + AJAXServerIP + '/images/';
var DownloadBlockSize = 100; //KB kilobytes
var UploadBlockSize = 50; //kilobytes
var DefaultTimeout = 20000; //20 seconds as milliseconds
var DefaultPacketSize = 512; //bytes (windows default)
var DefaultPingSize = 32; //bytes
var DefaultPingTimeout = 4000; //4 seconds
var numPings = 5;
var EmailFrom = 'Honeywell@atcc.net';
var EmailAlert = 'jtackett@atcc.net'; //coordinator
var EmailAlertBodyHeader = 'This is the header for the admin';
var EmailAlertSubject = 'H.U.R.T. Coordinator: Bandwidth Test Results';
var NotifyUser = true;
var EmailUserSubject = '(Honeywell) - Bandwidth Test Results';
var EmailUserBodyHeader = 'your avg ping was This is the header for a customer';
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i


function ajaxQueue(step) {
  switch(step) {
    case 1: Step1 (2); //validate URT form
             break;
    case 2: Step2 (3); //Download and Upload test
                    break;
    case 3: Step3 (4); //Ping Test 1
                    break;
    case 4: Step3 (5); //Ping Test 2
                    break;
    case 5: Step3 (6); //Ping Test 3
                    break;
    case 6: Step3 (7); //Ping Test 4
                    break;
    case 7: Step3 (8); //Ping Test 5
                    break;
    case 8: PingSummary (9); //Ping Summary Stats
                    break;
    case 9: Step4 (10); //Save Data
                    break;
    case 10: Step5 (0); //finalize messages
                    break;
  }
}

//===================================================================================
//function Visible(ID)
//Purpose: This routine allows the user to set the visibility of an object
//===================================================================================
function Visible(ID, isvisible) {
    obj = document.getElementById(ID);
    if (obj !== null) {
        if (isvisible === false) {
            obj.style.display = 'none';
        } else {
            obj.style.display = '';
        }
    }
}

//===================================================================================
//VALIDATION STUFF
function isValidEmail(e){
var returnval=emailfilter.test(e.value)
return returnval
}

//===================================================================================
//VALIDATION STUFF
function isBlank(e){
  if (e.value == '') {
    return true;
  }
      else  {
    return false;
  }
}
//===================================================================================

//===================================================================================
//function StepResults(step,status)
//controls images for user interaction display
//===================================================================================
function StepResults(step, status) {
    if (status == 'passed') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", true);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", true); //show results
    }
    if (status == 'failed') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", true);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", true); //show results
    }
    if (status == 'warning') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", true);
        Visible("step" + step + "result", true); //show results
    }
    if (status == 'off') {
        Visible("step" + step, false);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", false); //show results
    }
    if (status == 'start') {
        Visible("step" + step, true);
        Visible("step" + step + "passed", false);
        Visible("step" + step + "failed", false);
        Visible("step" + step + "warning", false);
        Visible("step" + step + "result", false); //show results
    }
}

function CalcMbps(Kilobytes, elapsedtime) {
    seconds = elapsedtime / 1000; //convert ms to seconds
    KBs = Kilobytes / seconds; //  Kilobytes/second
    Mbps = Math.round((KBs * 0.008) * 1000) / 1000; // Megabits / second
    return Mbps;
}



function Calckbps(Kilobytes, elapsedtime) {
    seconds = elapsedtime / 1000; //convert ms to seconds
    KBs = Kilobytes / seconds; //  Kilobytes/second
    MBs = KBs * 0.001; // Megabytes/second
    Kbps = Math.round((KBs * 8) * 1000) / 1000; // Kilobits/second
    return Kbps;
}



function CalcBandwidth(filesize, elapsedtime, ID) {
    var data;
    seconds = elapsedtime / 1000; //convert ms to seconds
    //filesize is presumed to be in Kilobytes
            //Formulas....
    //1 Kilobyte/sec = 0.008 Mbps = 8 Kbps = 0.001 MB/sec
    //1 MB/sec = 8 Mbps = 8000 Kbps = 1000 KB/sec

    kilobytes = filesize;
    KBs = kilobytes / seconds; //  Kilobytes/second
    MBs = KBs * 0.001; // Megabytes/second
    Kbps = KBs * 8; // Kilobits/second
    Mbps = KBs * 0.008; // Megabits / second
    kilobits = kilobytes * 8;
    megabits = kilobits / 1000;
    megabytes = Math.round((kilobytes / 1024) * 1000) / 1000;
    kbps = Math.round((kilobits / seconds) * 1000) / 1000;
    mbps = Math.round((megabits / seconds) * 1000) / 1000;

    data = "";
    data = data + kilobytes + " KB in (" + elapsedtime + "ms) = "+Math.round(Kbps * 1000) / 1000 + " Kbps<br>";
//    data = data + kilobytes + " KB's (kilobytes) = " + megabytes + " MB's (megabytes)<br>";
//    data = data + kilobits + " kb's (kilobits) = " + megabits + " mb's (megabits)<br>";
//    data = data + "---Elapsed Time-------------------------------------------------<br>";
//    data = data + "Time : " + seconds + " seconds (" + elapsedtime + "ms) <br>";
//    data = data + "---Speed--------------------------------------------------------<br>";
//    data = data + Math.round(Kbps * 1000) / 1000 + " Kbps (Kilobits/second)<br>";
//    data = data + Math.round(Mbps * 1000) / 1000 + " Mbps (Megabits/second)<br>";
//    data = data + "-----------------------------------------------------------<br>";
    obj = document.getElementById(ID);
    obj.innerHTML = data;
}

// Functions called by global begin/end shows the progress bar.. while Ajax calls are active.
function AjaxRequestBegin() {
    obj = document.getElementById('ProgressBar');
    if (obj !== null) {
        if (obj.style.display == 'none') {
            obj.style.display = '';
        }
    }
}


function AjaxRequestEnd() {
    obj = document.getElementById('ProgressBar');
    if (obj !== null) {
        if (obj.style.display == '') {
            obj.style.display = 'none';
        }
    }
}


// Build a standard timestamp
function timestamp() {
    aTimeStamp = month + "/" + day + "/" + year + "  ";
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    aTimeStamp = aTimeStamp + hours + ":" + minutes + ":" + seconds + " ";
    return aTimeStamp;
}


function PingSummary(nextstep) {
//Summarize and display ping statistics      
            document.getElementById("step3result").innerHTML = pingResult +'<br />'+ pingStats;
            if (pingAvg > URTLatencyFail) {
                URTResult = 'failed';
                URTResultText = URTResultText + 'Latency is too high. <br>';
                StepResults('3', 'failed');
                                    }
                                    if (pingAvg >= URTLatencyPass &&  pingAvg <= URTLatencyFail) {
                   if (URTResult != 'failed') {
                                                         URTResult = 'warning';
                     URTResultText = URTResultText + 'Latency is borderline. <br>';
                        }
                StepResults('3', 'warning');
                                    }

            if (pingAvg < URTLatencyPass) {
                StepResults('3', 'passed');
                                    }
                ajaxQueue(nextstep);
}



function Step1(nextstep) {
    StepResults('1', 'start');
    URTResult = 'passed';
    //Check the email address
            if (isValidEmail(document.getElementById("txtEmail")) ==false) {
                  URTResult = 'failed';
                  URTResultText = 'Invalid email address.<br>';
            }
            if (isBlank(document.getElementById("txtFirstName")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing first name. <br>';
            }
            if (isBlank(document.getElementById("txtLastName")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing last name. <br>';
            }
            if (isBlank(document.getElementById("txtCompany")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing company. <br>';
            }
            if (isBlank(document.getElementById("txtCountry")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing country. <br>';
            }
            if (isBlank(document.getElementById("txtState")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing state. <br>';
            }
            if (isBlank(document.getElementById("txtCity")) ==true) {
                  URTResult = 'failed';
                  URTResultText = URTResultText + 'Missing city. <br>';
            }
            
    if (URTResult == 'failed') {
                  document.getElementById("step1result").innerHTML = 'Contact form incomplete.';
            }
    StepResults('1', URTResult);
        ajaxQueue(nextstep);
}

function Step2(nextstep) {
    StepResults('2', 'start');
    AjaxRequest.get({
        'url': AJAXurl + 'GetDataBlock',
        'parameters': {
            'Size': DownloadBlockSize
        } //this is the size of the data to download
        ,
        'timeout': DefaultTimeout,
        'onTimeout': function (req) {
            document.getElementById("step2result").innerHTML = 'Bandwidth(DL) test timed out.';
            StepResults('2', 'failed');
                        URTResult = 'failed';
                         URTResultText = URTResultText + 'Bandwidth(DL) test timed out. <br>';
        ajaxQueue(nextstep);
                                    
        },
        'onSuccess': function (req) {
            CalcBandwidth(DownloadBlockSize, req.elapsedTime, 'step2result');
            Mbps_down = CalcMbps(DownloadBlockSize, req.elapsedTime); //set result variable so we can save it later.
            Kbps_down = Calckbps(DownloadBlockSize, req.elapsedTime); //set result variable so we can save it later.
            document.getElementById("step2result").innerHTML ='DL: '+document.getElementById("step2result").innerHTML;

            if (Kbps_down < URTBandwidthFail) {
                                                 URTResult = 'failed';
                             URTResultText = URTResultText + 'Bandwidth(DL) datarate is too low. <br>';
                StepResults('2', 'failed');
                                    }
                                    if (Kbps_down >= URTBandwidthFail &&  Kbps_down <= URTBandwidthPass) {
                  if (URTResult != 'failed') {
                                           URTResult = 'warning';
                      URTResultText = URTResultText + 'Bandwidth(DL) datarate may be too low. <br>';
                        }

                StepResults('2', 'warning');
                                    }

            if (Kbps_down > URTBandwidthPass) {
                StepResults('2', 'passed');
                                    }
                                    Visible('Step2',true);
                                                //End of Step 2. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                                    
            //Step 2b.  Upload Test ================================================================
            //post a block of data to the server this will be in the form of a hidden field and the content the size of the UploadBlock size
            //make sure the number of lines of passed parrameters match tht block upload size variable at the top
            var fData; // data to send
            //this is a 1k block
            fData = '-------- Start of 1K -------<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '1111111111111111111111111111<br>';
            fData = fData + '0000000000000000000000000000<br>';
            fData = fData + '-------- End of 1K ---------<br>';

            AjaxRequest.post({
                'url': AJAXurl + 'SetDataBlock',
                'parameters': {
                    'Size': UploadBlockSize,
                    'Data1': fData,
                    'Data2': fData,
                    'Data3': fData,
                    'Data4': fData,
                    'Data5': fData,
                    'Data6': fData,
                    'Data7': fData,
                    'Data8': fData,
                    'Data9': fData,
                    'Data10': fData,
                    'Data11': fData,
                    'Data12': fData,
                    'Data13': fData,
                    'Data14': fData,
                    'Data15': fData,
                    'Data16': fData,
                    'Data17': fData,
                    'Data18': fData,
                    'Data19': fData,
                    'Data20': fData,
                    'Data21': fData,
                    'Data22': fData,
                    'Data23': fData,
                    'Data24': fData,
                    'Data25': fData,
                    'Data26': fData,
                    'Data27': fData,
                    'Data28': fData,
                    'Data29': fData,
                    'Data30': fData,
                    'Data31': fData,
                    'Data32': fData,
                    'Data33': fData,
                    'Data34': fData,
                    'Data35': fData,
                    'Data36': fData,
                    'Data37': fData,
                    'Data38': fData,
                    'Data39': fData,
                    'Data40': fData,
                    'Data41': fData,
                    'Data42': fData,
                    'Data43': fData,
                    'Data44': fData,
                    'Data45': fData,
                    'Data46': fData,
                    'Data47': fData,
                    'Data48': fData,
                    'Data49': fData,
                    'Data50': fData
                },
                'timeout': DefaultTimeout,
                'onTimeout': function (req) {
                    document.getElementById("step2bresult").innerHTML = 'Bandwidth(UL) test timed out.';
                                            Visible("step2bresult", true);
                                            Visible('Step2',false);
                         ajaxQueue(nextstep);
                },
                'onSuccess': function (req) {
                    CalcBandwidth(UploadBlockSize, req.elapsedTime, 'step2bresult');
                    Mbps_up = CalcMbps(UploadBlockSize, req.elapsedTime); //set result variable so we can save it later.
                    Kbps_up = Calckbps(UploadBlockSize, req.elapsedTime); //set result variable so we can save it later.
                    document.getElementById("step2bresult").innerHTML ='UL : '+document.getElementById("step2bresult").innerHTML;
                                            Visible("step2bresult", true);
                                            Visible('Step2',false);
                        ajaxQueue(nextstep);
                   } //end onSuccess
               } //end parameters
            ); //End Ajax Get 2b
        } //end onSuccess
    } //end parameters
    ); //End Ajax Get 2
}
function Step3(nextstep) {
// Ping
                    StepResults('3', 'start');
                        AjaxRequest.post({
                            'url': AJAXurl + 'Ping',
                            'parameters': {'Size': DefaultPingSize}, //this is the size of the data to download
                            'timeout': DefaultPingTimeout,
                            'onTimeout': function (req) {
                                pingSent++;
                                pingMessage = 'Request timed out.';
                                pingLost++;
                                pingAvg = Math.round((pingTotal / pingReceived) * 100) / 100;
                                pingResult = pingResult + pingMessage + '\n';
                                pingStats = 'Packets: Sent = ' + pingSent + ', Received = ' + pingReceived + ', Lost = ' + pingLost;
                                pingStats = pingStats + 'Minimum = ' + pingMin + 'ms, Maximum = ' + pingMax + 'ms, Average = ' + pingAvg + 'ms';
                                        ajaxQueue(nextstep);
                            },
                            'onSuccess': function (req) {
                                pingSent++;
                                pingReceived++;
                                pingTotal = pingTotal + req.elapsedTime;
                                if (req.elapsedTime > pingMax) {
                                    pingMax = req.elapsedTime;
                                }
                                if (req.elapsedTime < pingMin) {
                                    pingMin = req.elapsedTime;
                                }
                                pingMessage = 'Reply from ' + AJAXServerIP + ': bytes=32 time=' + req.elapsedTime + 'ms \n';
                                                                                                if (pingReceived != 0) {
                                  pingAvg = Math.round((pingTotal / pingReceived) * 100) / 100;
                                                                                                }
                                pingResult = pingResult + pingMessage + '<br />';
                                pingStats = 'Packets: Sent = ' + pingSent + ', Received = ' + pingReceived + ', Lost = ' + pingLost + '<br />';
                                pingStats = pingStats + 'Minimum = ' + pingMin + 'ms, Maximum = ' + pingMax + 'ms, Average = ' + pingAvg + 'ms';
                                     ajaxQueue(nextstep);
                            } //end onSuccess
                        } //end parameters
                        ); //End Ajax ping which is step 3
}

function Step4(nextstep) {
//Submit URT
        StepResults('4', 'start');
        var status = AjaxRequest.submit(
                               URTform, {
            'url': AJAXurl + 'URTAddContactData',
            'parameters': {
                'SID': SessionID,
                'Mbps_down': Mbps_down,
                'Kbps_down': Kbps_down,
                'Mbps_up': Mbps_up,
                'Kbps_up': Kbps_up,
                'pingMin': pingMin,
                'pingMax': pingMax,
                'pingAvg': pingAvg,
                'pingSent': pingSent,
                'status':URTResult,
                'NotifyUser': NotifyUser,
                'EmailAlert': EmailAlert,
                'EmailFrom': EmailFrom,
                'EmailUserSubject': EmailUserSubject,
                'EmailAlertSubject': EmailAlertSubject,
                'EmailUserBodyHeader': EmailUserBodyHeader,
                'EmailAlertBodyHeader': EmailAlertBodyHeader,
                'pingReceived': pingReceived,
                'pingLost': pingLost,
                'ClientTime': aNiceTime,
                'ClientDate': aNiceDate,
                'ClientGMT': currentTime.toGMTString()
            }, //is sent as a content fields
           
            'timeout': DefaultTimeout,
            'onTimeout': function (req) {
                                                URTResult = 'failed';
                            URTResultText = URTResultText + 'Submit data to server timed out. <br>';
                StepResults('4', 'failed');
                    ajaxQueue(nextstep);
            },
            'onSuccess': function (req) {
                document.getElementById("step4result").innerHTML = 'Elapsed Time: ' + req.elapsedTime + 'ms';
                if (req.responseText == 'failed') {
                   if (URTResult != 'failed') {
                                                         URTResult = 'failed';
                        }
                                                      
                    StepResults('4', 'failed');
                } else {

                    StepResults('4', 'passed');
                }
                    ajaxQueue(nextstep);
            } //end onSuccess
        } //end parameters
        ); //End Ajax submit 4
}
function Step5(nextstep) {
   StepResults('5', 'start');
      //show the results..
      if (URTResult == 'failed') {
   document.getElementById("step5result").innerHTML = 'URT Failed <br>' + URTResultText;
   StepResults('5', 'failed');
      }
      if (URTResult == 'warning') {
   document.getElementById("step5result").innerHTML = 'URT Warning <br>' + URTResultText;
   StepResults('5', 'warning');
      }
      if (URTResult == 'passed') {
   document.getElementById("step5result").innerHTML = 'URT Passed';
   StepResults('5', 'passed');
      }

}

function StartURT(theform) {
//clear our globals..      
    URTResult = 'Passed'; //by default they pass the test
    URTResultText = '';            
    pingMessage = '';
     pingMin = 999999; //everything is lower
     pingMax = 0; //everything is higher
     pingAvg = 0;
     pingSent = 0;
     pingTotal = 0;
     pingReceived = 0;
     pingResult = '';
     pingStats = '';
     pingLost = 0;                                    
    //clear our images
    URTform = theform;
            
            //clear any images
    StepResults('1', 'off');
    StepResults('2', 'off');
    StepResults('3', 'off');
    StepResults('4', 'off');
    StepResults('5', 'off');
    StepResults('6', 'off');
    Visible("step2bresult", false); //special case since we hide part of step 2
    //end Clear images

//    aTime = new Date().getTime();
    SessionID = 'SID_' + Math.round(Math.random() * 20000) + currentTime.getTime();
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    aNiceTime = hours + ":" + minutes + ":" + seconds + " ";
    aNiceDate = month + "/" + day + "/" + year;
    ajaxQueue(1);

} //end of Start Test
//remove an object from the DOM
function remove(selection) {
    selection.parentNode.removeChild(selection);
}

// Show/Hide function for my rollup boxes
function showhide(id, io) { // id is what we are hiding and io is the image tag plus minus
    var imgobj;
    obj = document.getElementById(id);
    imgobj = document.getElementById(io);

    if (obj.style.display == '') {
        obj.style.display = 'none';
        imgobj.src = './images/switch_plus.gif';
    } else {
        obj.style.display = '';
        imgobj.src = './images/switch_minus.gif';
    }
}

//getImage will return bandwidth statistics for an image that is downloaded.  
function getImage(pExistingImageID, pImageURL, filesize) {
    var time = new Date();
    var time1;
    var time2;
    var ttime;
    var img;
    time1 = time.getTime();
    img = document.createElement('img');
    img.onload = function (evt) {
        document.getElementById(pExistingImageID).src = this.src;
        document.getElementById(pExistingImageID).width = this.width;
        document.getElementById(pExistingImageID).height = this.height;
        time = new Date();
        time2 = time.getTime();
        ttime = time2 - time1;
        if (ttime === 0) {
            ttime = 0.1;
            CalcBandwidth(filesize, ttime, "BandwidthResults");
        }
        img.src = pImageURL;
        return false;
    };
}
bandwidthtest.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Honeywell User Readiness Test</title>
<link rel="shortcut icon" href="./images/Network.ico" />
<link rel="stylesheet" type="text/css" href="BandwidthTest.css" />
<script type="text/javascript" src="/AjaxRequest.js"></script>
<script type="text/javascript" src="/BandwidthTest.js"></script>
</head>
<body>
<table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td class="BeigeBox_topleft">&nbsp;</td>
    <td class="BeigeBox_top">&nbsp;</td>
    <td class="BeigeBox_topright">&nbsp;</td>
  </tr>
  <tr>
    <td class="BeigeBox_left">&nbsp;</td>
    <td class="BeigeBox_body"><table width="100%" border="0">
        <tr>
          <td width="19%" valign="middle"><img src="./images/Honeywell_Red_Transparent_texture.png" alt="" width="209" height="38" hspace="2" />&nbsp;</td>
          <td width="5%" valign="middle"><img src="./images/Signup.png" width="50" height="47" /></td>
          <td width="35%">&nbsp;</td>
          <td width="21%" valign="top"></td>
          <td width="20%" valign="top" align="right">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="3" valign="bottom"><strong>Remote Training User Readiness Test</strong></td>
          <td colspan="2" valign="bottom" align="right">Server Location: (<strong>Deer Valley, AZ</strong>) </td>
        </tr>
      </table></td>
    <td class="BeigeBox_right">&nbsp;</td>
  </tr>
  <tr>
    <td class="BeigeBox_bottomleft">&nbsp;</td>
    <td  class="BeigeBox_bottom">&nbsp;</td>
    <td  class="BeigeBox_bottomright">&nbsp;</td>
  </tr>
</table>
<!-- My table -->
<table width="100%"  cellspacing="0" id="layout-table" >
  <tr>
    <td id="left-column"><div id="Content" style="width=100%">
        <table  width ="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="20" class="WhiteBox_topleft">&nbsp;</td>
            <td  class="WhiteBox_top">&nbsp;</td>
            <td width="20" class="WhiteBox_topright">&nbsp;</td>
          </tr>
          <tr id="contentheader">
            <td class="WhiteBox_left">&nbsp;</td>
            <td  class="WhiteBox_body" ><a href="javascript:showhide('contentbody', 'contentswitch');"><img id="contentswitch" src="./images/switch_minus.gif" border="0"  align="right" /> </a><strong>U.R.T. - Registration and Bandwidth Test </strong></td>
            <td class="WhiteBox_right">&nbsp;</td>
          </tr>
          <tr id="contentbody">
            <td class="WhiteBox_left">&nbsp;</td>
            <td valign="top" class="WhiteBox_body" ><table width="100%" border="0">
                <tr>
                  <td colspan="2" valign="top"><p>Instructions:</p>
                    <ol>
                      <li>Fill out all of the forms and click the &quot;Start URT&quot; button. </li>
                    </ol></td>
                </tr>
                <tr>
                  <td valign="top"><form id="RegistrationForm" name="RegistrationForm" method="post"  action="" onsubmit="javascript:StartURT(this); return false;">
                      <fieldset  id="fsRequiredInfo">
                      <legend>Personal Information</legend>
                      <label for="txtCompany">Company:</label>
                      <input name="txtCompany" type="text" id="txtCompany" value="" />
                      <br />
                      <label for="txtFirstName">First Name:</label>
                      <input name="txtFirstName" type="text" id="txtFirstName" value="" />
                      <br />
                      <label for="txtLastName">Last Name:</label>
                      <input name="txtLastName" type="text" id="txtLastName" value="" />
                      <br />
                      <label for="txtEmail">Email:</label>
                      <input name="txtEmail" type="text" id="txtEmail" value="" />
                      <br />
                      <label for="txtPhone">Phone Number:</label>
                      <input name="txtPhone" type="text" id="txtPhone" value="" />
                      </fieldset>
                      <fieldset  id="fsAddressInfo">
                      <legend>Address</legend>
                      <label for="txtAddress">Address:</label>
                      <input name="txtAddress" type="text" id="txtAddress" value="" />
                      <br />
                      <label for="txtCity">City:</label>
                      <input name="txtCity" type="text" id="txtCity" value="" />
                      <br />
                      <label for="txtState">State:</label>
                      <input name="txtState" type="text" id="txtState" value="" />
                      <br />
                      <label for="txtZip">Postal Code:</label>
                      <input name="txtZip" type="text" id="txtZip" value="" />
                      <br />
                      <label for="txtCountry">Country:</label>
                      <select id= "txtCountry" name="txtCountry" class="select">
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="&Aring;land Islands">&Aring;land Islands</option>
                        <option value="Albania">Albania</option>
                        <option value="Algeria">Algeria</option>
                        <option value="American Samoa">American Samoa</option>
                        <option value="Andorra">Andorra</option>
                        <option value="Angola">Angola</option>
                        <option value="Anguilla">Anguilla</option>
                        <option value="Antarctica">Antarctica</option>
                        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                        <option value="Argentina">Argentina</option>
                        <option value="Armenia">Armenia</option>
                        <option value="Aruba">Aruba</option>
                        <option value="Australia">Australia</option>
                        <option value="Austria">Austria</option>
                        <option value="Azerbaijan">Azerbaijan</option>
                        <option value="Bahamas">Bahamas</option>
                        <option value="Bahrain">Bahrain</option>
                        <option value="Bangladesh">Bangladesh</option>
                        <option value="Barbados">Barbados</option>
                        <option value="Belarus">Belarus</option>
                        <option value="Belgium">Belgium</option>
                        <option value="Belize">Belize</option>
                        <option value="Benin">Benin</option>
                        <option value="Bermuda">Bermuda</option>
                        <option value="Bhutan">Bhutan</option>
                        <option value="Bolivia">Bolivia</option>
                        <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                        <option value="Botswana">Botswana</option>
                        <option value="Bouvet Island">Bouvet Island</option>
                        <option value="Brazil">Brazil</option>
                        <option value="British Indian Ocean territory">British Indian Ocean territory</option>
                        <option value="Brunei Darussalam">Brunei Darussalam</option>
                        <option value="Bulgaria">Bulgaria</option>
                        <option value="Burkina Faso">Burkina Faso</option>
                        <option value="Burundi">Burundi</option>
                        <option value="Cambodia">Cambodia</option>
                        <option value="Cameroon">Cameroon</option>
                        <option value="Canada">Canada</option>
                        <option value="Cape Verde">Cape Verde</option>
                        <option value="Cayman Islands">Cayman Islands</option>
                        <option value="Central African Republic">Central African Republic</option>
                        <option value="Chad">Chad</option>
                        <option value="Chile">Chile</option>
                        <option value="China">China</option>
                        <option value="Christmas Island">Christmas Island</option>
                        <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                        <option value="Colombia">Colombia</option>
                        <option value="Comoros">Comoros</option>
                        <option value="Congo">Congo</option>
                        <option value="Congo, Democratic Republic">Congo, Democratic Republic</option>
                        <option value="Cook Islands">Cook Islands</option>
                        <option value="Costa Rica">Costa Rica</option>
                        <option value="C&ocirc;te d'Ivoire (Ivory Coast)">C&ocirc;te d'Ivoire (Ivory Coast)</option>
                        <option value="Croatia (Hrvatska)">Croatia (Hrvatska)</option>
                        <option value="Cuba">Cuba</option>
                        <option value="Cyprus">Cyprus</option>
                        <option value="Czech Republic">Czech Republic</option>
                        <option value="Denmark">Denmark</option>
                        <option value="Djibouti">Djibouti</option>
                        <option value="Dominica">Dominica</option>
                        <option value="Dominican Republic">Dominican Republic</option>
                        <option value="East Timor">East Timor</option>
                        <option value="Ecuador">Ecuador</option>
                        <option value="Egypt">Egypt</option>
                        <option value="El Salvador">El Salvador</option>
                        <option value="Equatorial Guinea">Equatorial Guinea</option>
                        <option value="Eritrea">Eritrea</option>
                        <option value="Estonia">Estonia</option>
                        <option value="Ethiopia">Ethiopia</option>
                        <option value="Falkland Islands">Falkland Islands</option>
                        <option value="Faroe Islands">Faroe Islands</option>
                        <option value="Fiji">Fiji</option>
                        <option value="Finland">Finland</option>
                        <option value="France">France</option>
                        <option value="French Guiana">French Guiana</option>
                        <option value="French Polynesia">French Polynesia</option>
                        <option value="French Southern Territories">French Southern Territories</option>
                        <option value="Gabon">Gabon</option>
                        <option value="Gambia">Gambia</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Germany">Germany</option>
                        <option value="Ghana">Ghana</option>
                        <option value="Gibraltar">Gibraltar</option>
                        <option value="Greece">Greece</option>
                        <option value="Greenland">Greenland</option>
                        <option value="Grenada">Grenada</option>
                        <option value="Guadeloupe">Guadeloupe</option>
                        <option value="Guam">Guam</option>
                        <option value="Guatemala">Guatemala</option>
                        <option value="Guinea">Guinea</option>
                        <option value="Guinea-Bissau">Guinea-Bissau</option>
                        <option value="Guyana">Guyana</option>
                        <option value="Haiti">Haiti</option>
                        <option value="Heard and McDonald Islands">Heard and McDonald Islands</option>
                        <option value="Honduras">Honduras</option>
                        <option value="Hong Kong">Hong Kong</option>
                        <option value="Hungary">Hungary</option>
                        <option value="Iceland">Iceland</option>
                        <option value="India">India</option>
                        <option value="Indonesia">Indonesia</option>
                        <option value="Iran">Iran</option>
                        <option value="Iraq">Iraq</option>
                        <option value="Ireland">Ireland</option>
                        <option value="Israel">Israel</option>
                        <option value="Italy">Italy</option>
                        <option value="Jamaica">Jamaica</option>
                        <option value="Japan">Japan</option>
                        <option value="Jordan">Jordan</option>
                        <option value="Kazakhstan">Kazakhstan</option>
                        <option value="Kenya">Kenya</option>
                        <option value="Kiribati">Kiribati</option>
                        <option value="Korea (north)">Korea (north)</option>
                        <option value="Korea (south)">Korea (south)</option>
                        <option value="Kuwait">Kuwait</option>
                        <option value="Kyrgyzstan">Kyrgyzstan</option>
                        <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                        <option value="Latvia">Latvia</option>
                        <option value="Lebanon">Lebanon</option>
                        <option value="Lesotho">Lesotho</option>
                        <option value="Liberia">Liberia</option>
                        <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                        <option value="Liechtenstein">Liechtenstein</option>
                        <option value="Lithuania">Lithuania</option>
                        <option value="Luxembourg">Luxembourg</option>
                        <option value="Macao">Macao</option>
                        <option value="Macedonia, Former Yugoslav Republic Of">Macedonia, Former Yugoslav Republic Of</option>
                        <option value="Madagascar">Madagascar</option>
                        <option value="Malawi">Malawi</option>
                        <option value="Malaysia">Malaysia</option>
                        <option value="Maldives">Maldives</option>
                        <option value="Mali">Mali</option>
                        <option value="Malta">Malta</option>
                        <option value="Marshall Islands">Marshall Islands</option>
                        <option value="Martinique">Martinique</option>
                        <option value="Mauritania">Mauritania</option>
                        <option value="Mauritius">Mauritius</option>
                        <option value="Mayotte">Mayotte</option>
                        <option value="Mexico">Mexico</option>
                        <option value="Micronesia">Micronesia</option>
                        <option value="Moldova">Moldova</option>
                        <option value="Monaco">Monaco</option>
                        <option value="Mongolia">Mongolia</option>
                        <option value="Montenegro">Montenegro</option>
                        <option value="Montserrat">Montserrat</option>
                        <option value="Morocco">Morocco</option>
                        <option value="Mozambique">Mozambique</option>
                        <option value="Myanmar">Myanmar</option>
                        <option value="Namibia">Namibia</option>
                        <option value="Nauru">Nauru</option>
                        <option value="Nepal">Nepal</option>
                        <option value="Netherlands">Netherlands</option>
                        <option value="Netherlands Antilles">Netherlands Antilles</option>
                        <option value="New Caledonia">New Caledonia</option>
                        <option value="New Zealand">New Zealand</option>
                        <option value="Nicaragua">Nicaragua</option>
                        <option value="Niger">Niger</option>
                        <option value="Nigeria">Nigeria</option>
                        <option value="Niue">Niue</option>
                        <option value="Norfolk Island">Norfolk Island</option>
                        <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                        <option value="Norway">Norway</option>
                        <option value="Oman">Oman</option>
                        <option value="Pakistan">Pakistan</option>
                        <option value="Palau">Palau</option>
                        <option value="Palestinian Territories">Palestinian Territories</option>
                        <option value="Panama">Panama</option>
                        <option value="Papua New Guinea">Papua New Guinea</option>
                        <option value="Paraguay">Paraguay</option>
                        <option value="Peru">Peru</option>
                        <option value="Philippines">Philippines</option>
                        <option value="Pitcairn">Pitcairn</option>
                        <option value="Poland">Poland</option>
                        <option value="Portugal">Portugal</option>
                        <option value="Puerto Rico">Puerto Rico</option>
                        <option value="Qatar">Qatar</option>
                        <option value="R&eacute;union">R&eacute;union</option>
                        <option value="Romania">Romania</option>
                        <option value="Russian Federation">Russian Federation</option>
                        <option value="Rwanda">Rwanda</option>
                        <option value="Saint Helena">Saint Helena</option>
                        <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                        <option value="Saint Lucia">Saint Lucia</option>
                        <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
                        <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                        <option value="Samoa">Samoa</option>
                        <option value="San Marino">San Marino</option>
                        <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                        <option value="Saudi Arabia">Saudi Arabia</option>
                        <option value="Senegal">Senegal</option>
                        <option value="Serbia">Serbia</option>
                        <option value="Seychelles">Seychelles</option>
                        <option value="Sierra Leone">Sierra Leone</option>
                        <option value="Singapore">Singapore</option>
                        <option value="Slovakia">Slovakia</option>
                        <option value="Slovenia">Slovenia</option>
                        <option value="Solomon Islands">Solomon Islands</option>
                        <option value="Somalia">Somalia</option>
                        <option value="South Africa">South Africa</option>
                        <option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
                        <option value="Spain">Spain</option>
                        <option value="Sri Lanka">Sri Lanka</option>
                        <option value="Sudan">Sudan</option>
                        <option value="Suriname">Suriname</option>
                        <option value="Svalbard and Jan Mayen Islands">Svalbard and Jan Mayen Islands</option>
                        <option value="Swaziland">Swaziland</option>
                        <option value="Sweden">Sweden</option>
                        <option value="Switzerland">Switzerland</option>
                        <option value="Syria">Syria</option>
                        <option value="Taiwan">Taiwan</option>
                        <option value="Tajikistan">Tajikistan</option>
                        <option value="Tanzania">Tanzania</option>
                        <option value="Thailand">Thailand</option>
                        <option value="Togo">Togo</option>
                        <option value="Tokelau">Tokelau</option>
                        <option value="Tonga">Tonga</option>
                        <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                        <option value="Tunisia">Tunisia</option>
                        <option value="Turkey">Turkey</option>
                        <option value="Turkmenistan">Turkmenistan</option>
                        <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                        <option value="Tuvalu">Tuvalu</option>
                        <option value="Uganda">Uganda</option>
                        <option value="Ukraine">Ukraine</option>
                        <option value="United Arab Emirates">United Arab Emirates</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="United States of America" selected="selected">United States of America</option>
                        <option value="Uruguay">Uruguay</option>
                        <option value="Uzbekistan">Uzbekistan</option>
                        <option value="Vanuatu">Vanuatu</option>
                        <option value="Vatican City">Vatican City</option>
                        <option value="Venezuela">Venezuela</option>
                        <option value="Vietnam">Vietnam</option>
                        <option value="Virgin Islands (British)">Virgin Islands (British)</option>
                        <option value="Virgin Islands (US)">Virgin Islands (US)</option>
                        <option value="Wallis and Futuna Islands">Wallis and Futuna Islands</option>
                        <option value="Western Sahara">Western Sahara</option>
                        <option value="Yemen">Yemen</option>
                        <option value="Zaire">Zaire</option>
                        <option value="Zambia">Zambia</option>
                        <option value="Zimbabwe">Zimbabwe</option>                      </select>
                      </fieldset>
                      <p>
                        <input id="URTSubmit" type="submit" value="Click to Start (URT)" class="button" />
                      </p>
                    </form></td>
                  <td valign="top"><form id="StatusForm" name="StatusForm" method="post"  action="" >
                      <fieldset id="fsAJAXStatusPanel">
                      <legend>Status Panel</legend>
                      <div id="ProgressBar" align="center" style="display:none">Processing please wait...<br />
                        <img src="Images/pleasewait.gif" alt="Please wait..." width="214" height="15" /><br />
                        <hr />
                      </div>
                      <table width="100%" border="0">
                        <tr>
                          <th width="62%" scope="row"><div align="left"><span class="DialogTextDimmed"> Step 1.  Verify contact form.</span></div></th>
                          <td width="38%"><div align="left"><img src="Images/circle-ball-dark-antialiased.gif" alt="BallWait"  width="16" height="16"  style="display:none" id="step1" /> <img src="Images/failed.gif" alt="This step failed" width="16" height="16" style="display:none" id="step1failed" /> <img src="Images/CheckmarkBox.gif" alt="This step passed" width="16" height="16" style="display:none" id="step1passed"/> <img src="Images/incomplete.gif" alt="Warning, mixed results" width="16" height="16" style="display:none" id="step1warning"/> </div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><Div class="DialogTextDimmedResults" style="display:none"  id="step1result"></Div></td>
                        </tr>
                        <tr>
                          <th scope="row"><div align="left"><span class="DialogTextDimmed">Step 2.  Check  Bandwidth.</span></div></th>
                          <td><div align="left"><img src="Images/circle-ball-dark-antialiased.gif" alt="BallWait"  width="16" height="16"  style="display:none" id="step2" /> <img src="Images/failed.gif" alt="This step failed" width="16" height="16" style="display:none" id="step2failed" /> <img src="Images/CheckmarkBox.gif" alt="This step passed" width="16" height="16" style="display:none" id="step2passed"/> <img src="Images/incomplete.gif" alt="Warning, mixed results" width="16" height="16" style="display:none" id="step2warning"/> </div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><Div class="DialogTextDimmedResults" style="display:none"  id="step2result"> </Div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><Div class="DialogTextDimmedResults" style="display:none"  id="step2bresult"> </Div></td>
                        </tr>
                        <tr>
                          <th scope="row"><div align="left"><span class="DialogTextDimmed">Step 3.  Check Latency.</span></div></th>
                          <td><div align="left"><img src="Images/circle-ball-dark-antialiased.gif" alt="BallWait"  width="16" height="16"  style="display:none" id="step3" /> <img src="Images/failed.gif" alt="This step failed" width="16" height="16" style="display:none" id="step3failed" /> <img src="Images/CheckmarkBox.gif" alt="This step passed" width="16" height="16" style="display:none" id="step3passed"/> <img src="Images/incomplete.gif" alt="Warning, mixed results" width="16" height="16" style="display:none" id="step3warning"/> </div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row" align="left"><Div class="DialogTextDimmedResults" style="display:none" id="step3result"></Div></td>
                        </tr>
                        <tr>
                          <th scope="row"><div align="left"><span class="DialogTextDimmed">Step 4.  Saving Results.</span></div></th>
                          <td><div align="left"><img src="Images/circle-ball-dark-antialiased.gif" alt="BallWait"  width="16" height="16"  style="display:none" id="step4" /> <img src="Images/failed.gif" alt="This step failed" width="16" height="16" style="display:none" id="step4failed" /> <img src="Images/CheckmarkBox.gif" alt="This step passed" width="16" height="16" style="display:none" id="step4passed"/> <img src="Images/incomplete.gif" alt="Warning, mixed results" width="16" height="16" style="display:none" id="step4warning"/> </div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><Div class="DialogTextDimmedResults" style="display:none"  id="step4result"> </Div></td>
                        </tr>
                        <tr>
                          <th scope="row"><div align="left"><span class="DialogTextDimmed">Step 5. Display URT Results. </span></div></th>
                          <td><div align="left"><img src="Images/circle-ball-dark-antialiased.gif" alt="BallWait"  width="16" height="16"  style="display:none" id="step5" /> <img src="Images/failed.gif" alt="This step failed" width="16" height="16" style="display:none" id="step5failed" /> <img src="Images/CheckmarkBox.gif" alt="This step passed" width="16" height="16" style="display:none" id="step5passed"/> <img src="Images/incomplete.gif" alt="Warning, mixed results" width="16" height="16" style="display:none" id="step5warning"/> </div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><Div class="DialogTextDimmedResults" style="display:none"  id="step5result"> </Div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><div align="left"></div></td>
                        </tr>
                        <tr>
                          <td colspan="2" scope="row"><div align="left"><strong>If you got a green checkmark on all of the tests, you will have passed the URT and will receive an email.</strong></div></td>
                        </tr>
                      </table>
                      </fieldset>
                      <textarea name="textarea" cols="45" rows="25" wrap="off" id="log" style="display:none"> </textarea>
                    </form></td>
                </tr>
              </table>
              <div id="BandwidthResults"> </div></td>
            <td class="WhiteBox_right">&nbsp;</td>
          </tr>
          <tr>
            <td class="WhiteBox_bottomleft">&nbsp;</td>
            <td  class="WhiteBox_bottom">&nbsp;</td>
            <td  class="WhiteBox_bottomright">&nbsp;</td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
<!-- My table -->
<div id="FormFields"> </div>
<br />
<div id="Results"> </div>
<br />
<div id="et"> </div>
<p align="center"><img title="About" src="./images/docs.gif" alt="" align="top" /> Copyright 2006-2010 Honeywell Inc. All Rights Reserved. </p>
</body>
</html>

Open in new window

Bandwidthtest.css


/* Honeywell Basic Intraweb with Boxes CSS Document */
/* Author: General Jackson Tackett III              */

body {
  font-size: xx-small;
  color: #333333;
  font-family: verdana, arial, helvetica, sans-serif;
  margin: 0;
  padding: 0
  background-image: url(/images//images/bg.jpg);
}
a:link,
a:visited {
  color: #116699;
  text-decoration: none;
}
a:hover {
  color: #0066FF;
  text-decoration: underline;
}
hr {
  color: #F1ECE6;
  background-color: #F1ECE6;
  border-style: none;
}
span.arrow {
  font-family: Arial,Helvetica,Courier,sans-serif;
  font-size: 80%;
}
form {
  margin-bottom:0;
}

table {
      border-spacing: 0;
      border-collapse: collapse;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: x-small;
}

.breadcrumb {
  float:left;
  margin:0.2em 0;
 color:#aaa;
}

.breadcrumb ul {
  padding:0;
  margin:0;
  text-indent:0;
  list-style:none;
}
.breadcrumb li {
  display:inline;
}

a img {
  border:none;
}
#layout-table {
  width:100%;
  border-collapse:separate;
  margin-top: 8px;
}
#layout-table #left-column,
#layout-table #middle-column,
#layout-table #right-column
{
  vertical-align:top;
}

#layout-table #middle-column {
  padding-left:12px;
  padding-right:8x;
}

.WhiteBox_body {
      background-repeat: repeat-x;
      background-position: top;
      background-color: #ffffff;
}
.WhiteBox_show {
   visibility:hidden;
}
.WhiteBox_bottom {
      background-repeat: repeat-x;
      background-position: top;
      background-image: url(/images/White_Bottom_Line.png);
      height: 14px;
}
.WhiteBox_bottomleft {
      background-repeat: no-repeat;
      background-position: right top;
      background-image: url(/images/White_Bottom_Left.png);
      height: 14px;
      width: 14px;
}
.WhiteBox_bottomright {
      background-repeat: no-repeat;
      background-position: left top;
      background-image: url(/images/White_Bottom_Right.png);
      height: 14px;
      width: 14px;
}
.WhiteBox_left {
      background-repeat: repeat-y;
      background-position: right bottom;
      background-image: url(/images/White_Left_Line.png);
      width: 14px;
}
.WhiteBox_right {
      background-repeat: repeat-y;
      background-position: left bottom;
      background-image: url(/images/White_Right_Line.png);
      width: 14px;
}
.WhiteBox_top {
      background-repeat: repeat-x;
      background-position: bottom;
      background-image: url(/images/White_Top_Line.png);
      height: 14px;
}
.WhiteBox_topleft {
      background-repeat: no-repeat;
      background-position: right bottom;
      background-image: url(/images/White_Top_Left.png);
      height: 14px;
      width: 14px;
}
.WhiteBox_topright {
      background-repeat: no-repeat;
      background-position: left bottom;
      background-image: url(/images/White_Top_Right.png);
      height: 14px;
      width: 14px;
      
}
.BeigeBox_body {
      background-repeat: repeat-x;
      background-position: top;
      background-color: #f1ece6;
}
.BeigeBox_show {
   visibility:hidden;
}
.BeigeBox_bottom {
      background-repeat: repeat-x;
      background-position: top;
      background-image: url(/images/Beige_Bottom_Line.png);
      height: 14px;
}
.BeigeBox_bottomleft {
      background-repeat: no-repeat;
      background-position: right top;
      background-image: url(/images/Beige_Bottom_Left.png);
      height: 14px;
      width: 14px;
}
.BeigeBox_bottomright {
      background-repeat: no-repeat;
      background-position: left top;
      background-image: url(/images/Beige_Bottom_Right.png);
      height: 14px;
      width: 14px;
}
.BeigeBox_left {
      background-repeat: repeat-y;
      background-position: right bottom;
      background-image: url(/images/Beige_Left_Line.png);
      width: 14px;
}
.BeigeBox_right {
      background-repeat: repeat-y;
      background-position: left bottom;
      background-image: url(/images/Beige_Right_Line.png);
      width: 14px;
}
.BeigeBox_top {
      background-repeat: repeat-x;
      background-position: bottom;
      background-image: url(/images/Beige_Top_Line.png);
      height: 14px;
}
.BeigeBox_topleft {
      background-repeat: no-repeat;
      background-position: right bottom;
      background-image: url(/images/Beige_Top_Left.png);
      height: 14px;
      width: 14px;
}
.BeigeBox_topright {
      background-repeat: no-repeat;
      background-position: left bottom;
      background-image: url(/images/Beige_Top_Right.png);
      height: 14px;
      width: 14px;
      
}
.SmallBoldText {
      font-size: x-small;
      font-weight: bold;
}
.VerySmallText {font-size: xx-small; }
.SmallText {
      font-size: x-small;
      font-weight: normal;
}

   span.checkbox {
      width: 19px;
      height: 25px;
      padding: 0 5px 0 0;
      background: url(/images/checkbox.gif) no-repeat;
      display: block;
      clear: left;
      float: left;
   }
   span.radio {
     width: 19px;
     height: 25px;
     padding: 0 5px 0 0;
     background: url(/images/radio.gif) no-repeat;
     display: block;
     clear: left;
     float: left;
   }
   span.select {
     position: absolute;
     width: 190px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
     height: 21px;
     padding: 0 24px 0 8px;
     color: #FFFFFF;
     font: 12px/21px arial,sans-serif;
     background: url(/images/select.gif) no-repeat;
     overflow: hidden;
  }
      
/*
---------------------------------------------------------------------------
Frameset CSS
---------------------------------------------------------------------------
*/


form fieldset{
      background-color:#e9f9ac;
      
      border-width:2px 2px 2px 10px;
      border-style:solid;
      border-color:#cee574;
      
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
            
      margin:20px 0px 20px 20px;
      /* */
      width:350px;

      position:relative;
      display:block;
      padding: 0px 10px 10px 10px;
}

form fieldset legend{      
      background-color:#ecefcb;
      
      border-width:1px 1px 1px 10px;
      border-color:#ff9900;
      border-style:solid;
      
      color:#5c71a2;
      font-weight:bold;
      text-transform:uppercase;
      font-size:90%;
      text-align:center;
            
      width:186px;
      padding:3px 5px;
      margin:0px 0px 10px -40px;
      position:relative;
      top: -14px;
      
}
      
form fieldset legend img{
      padding:0px 5px 0px 5px;      
}

label{
      color:#5c71a2;
      font-size:10pt;
      font-weight:bold;
      
      display:block;
      float:left;
      width:100px;
      text-align:right;
      margin:4px 5px 0px 0px;
}


input{
      background-color:#e9f9ac;
      margin:2px 0px 0px 0px;
      
      border-width: 0px 0px 1px 0px;
      border-style: solid solid dotted solid;
      border-color:#809431;
      
      color:#5c71a2;
      font-family:"Courier New", Courier, mono;
      
      padding:1px 2px;
      
}
.inputfocused {
      background-color:#32938c;
}

.button{
      background-color:#e9f9ac;
      background-image:none;
      
      border-width:1px;
      border-style:solid;
      border-color:#809431;
      
      font-weight:bold;
      font-family:Arial, Helvetica, sans-serif;
      
      width:380px;
      padding:2px;
      margin:0px 0px 0px 20px
}

.button:focus{
      background-color:#FFCCFF;
      color:#333333;
      background-image:none;
}
.DialogTextDimmed {

      color:#5c71a2;
      font-size:10pt;
      font-weight:bold;
      
      display:block;
      float:left;
      text-align:right;
      margin:4px 5px 0px 0px;
}
.hidden {
      display: none;
}
.DialogTextDimmedResults {


      color:#000000;
      font-size:90%;
      font-weight:bold;
      
      display:block;
      float:left;
      text-align:left;
      margin:4px 5px 0px 0px;
}
select {

      background-color:#e9f9ac;
      
      width:200px;
      margin:2px 0px 0px 0px;
      
      border-width: 0px 0px 1px 0px;
      border-style: solid solid dotted solid;
      border-color:#809431;
      
      color:#5c71a2;
      font-family:"Courier New", Courier, mono;
      
      padding:1px 2px;
}
ajaxrequest.js

// How to use this library in your html
/* in the <HEAD> section include:

  <script type="text/javascript" src="/include/AjaxRequest.js"></script>
      

//--------------Simple GET----------------------------------------------------------------------------------------------
AjaxRequest.get(
  {
    'url':'junk.html'
    ,'onSuccess':function(req){ alert('Success!'); }
    ,'onError':function(req){ alert('Error!\nStatusText='+req.statusText+'\nContents='+req.responseText);}
  }
);
//---------------A Timeout------------------------------------------------------------------------------------------------

AjaxRequest.get(
  {
    'url':'sleep.pl'
    ,'onSuccess':function(){ alert('Success!'); }
    ,'timeout':2000
    ,'onTimeout':function(req){ alert('Timed Out!'); }
  }
);

//------------Multiple requests using internal sequential id----------------------------------------------------
//HTML
<INPUT TYPE="text" NAME="input1" VALUE=""> <INPUT TYPE="button" VALUE="getResponse(this.form.input1);" onClick="getResponse(this.form.input1);">
<INPUT TYPE="text" NAME="input2" VALUE=""> <INPUT TYPE="button" VALUE="getResponse(this.form.input2);" onClick="getResponse(this.form.input2);">
<INPUT TYPE="text" NAME="input3" VALUE=""> <INPUT TYPE="button" VALUE="getResponse(this.form.input3);" onClick="getResponse(this.form.input3);">
<INPUT TYPE="text" NAME="input4" VALUE=""> <INPUT TYPE="button" VALUE="getResponse(this.form.input4);" onClick="getResponse(this.form.input4);">

function getResponse(target) {
  AjaxRequest.get(
    {
      'url':'sleep.pl'
      ,'onSuccess':function(req){ target.value=req.responseText; }
    }
  );
}

//-----------Groups  --------------------------------------------------------------------------------------
// Simple functions to update the page
function makeActive(o) { o.innerHTML = "Active"; o.style.backgroundColor = "#00ff00"; }
function makeInactive(o) { o.innerHTML = "Inactive"; o.style.backgroundColor = "#ff0000"; }

// Functions called by global begin/end
function AjaxRequestBegin() { makeActive(getElementById('ajaxActivity')); }
function AjaxRequestEnd() { makeInactive(getElementById('ajaxActivity')); }

// Functions called by group begin/end
// html will include something like:
<div id="group1Activity" class="activityMonitor">Inactive</div>
<INPUT TYPE="text" NAME="activity1_1" VALUE="">
<INPUT TYPE="button" VALUE="getResponse2(this.form.activity1_1,'group1')" onClick="getResponse2(this.form.activity1_1,'group1');">

function AjaxRequestGroupBegin(groupName) { makeActive(getElementById(groupName+"Activity")); }
function AjaxRequestGroupEnd(groupName) { makeInactive(getElementById(groupName+"Activity")); }

function getResponse2(target,groupName) {
  AjaxRequest.get(
    {
      'url':'sleep.pl'
      ,'onSuccess':function(req){ target.value=req.responseText; }
      ,'groupName':groupName                    // Assigns this request to the group passed in
      ,'onGroupBegin':AjaxRequestGroupBegin     // Map to the function called when this group starts
      ,'onGroupEnd':AjaxRequestGroupEnd         // Map to the function called when this group ends
    }
  );
}


//-----------------------Form submission ------------------------------------------------------------------------------------
//HTML
<form name="form2" action="echo.pl" method="post" target="_blank" onSubmit="submitForm(this);return false;">
//form elements
//Submitting a form via AjaxRequest is trivial. The result of the submit() call is true if the Ajax submission was successful, or false if it was not. This can then be used in a form's onSubmit //handler to fall back to a normal form submit. The form will be submitted as it would in a normal submission, maintaining proper element order, ignoring disabled fields, and handling multiple //fields of the same name. Since Javascript cannot access file input contents, file inputs are ignored.

function submitForm(theform) {
  var status = AjaxRequest.submit(
    theform
    ,{
      'onSuccess':function(req){ forms['form2'].submitResults.value = req.responseText; }
    }
  );
  return status;
}

//-------------------Assigning Event Handlers ------------------------------------------------------------------------------------
AjaxRequest.get(
  {
    'onLoading':function() { alert("Loading"); }
    ,'onLoaded':function() { alert("Loaded"); }
    ,'onInteractive':function() { alert("Interactive"); }
    ,'onComplete':function() { alert("Complete"); }
    ,'onSuccess':function() { alert("Success"); }
  }
);

//------------------Queue a series of requests -----------------------------------------------------------------------------------------------
//This example shows how requests are queued according to HTTP/1.1 connection limits by using long sleep times (20 seconds) for each request.
//Only two requests are active at any given time, unless you have changed your browser's settings.

//HTML
      <INPUT TYPE="text" NAME="input1" VALUE=""> <INPUT TYPE="button" VALUE="getQueuedResponse(this.form.input1);" onClick="getQueuedResponse(this.form.input1);"><br>
      <INPUT TYPE="text" NAME="input2" VALUE=""> <INPUT TYPE="button" VALUE="getQueuedResponse(this.form.input2);" onClick="getQueuedResponse(this.form.input2);"><br>

function getQueuedResponse(target) {
  AjaxRequest.get(
    {
      'url':'sleeplong.pl'
        ,'onLoading':function(req){ target.value=req.xmlHttpRequest.readyState; }
        ,'onLoaded':function(req){ target.value=req.xmlHttpRequest.readyState; }
        ,'onInteractive':function(req){ target.value=req.xmlHttpRequest.readyState; }
      ,'onSuccess':function(req){ target.value=req.xmlHttpRequest.readyState; }
    }
  );
}
//--------------Setting request parameters-----------------------------------------------------------------------------------------------
//Parameters (whether in the URL for GET requests or in the body for POST requests) can be easily added to a request. The "parameters"
//attribute of the AjaxRequest is an object of name/value pairs to add to the request, and it can be built manually. In addition, any
//argument given to the get(), post(), or submit() functions which is not an internal attribute will be treated as a parameter.
//If the "generateUniqueUrl" parameter is true (default) then a parameter of "AjaxRequestUniqueId" be added with each request so that GET requests are not cached.
//Generated url looks like
// http://127.0.0.1/AjaxRequestClassDemoPage.html?a=1&b=2&c=3&anotherParameter=true&AjaxRequestUniqueId=125593295548330

AjaxRequest.get(
  {
    'parameters':{ 'a':'1', 'b':'2', 'c':'3' }
    ,'anotherParameter':'true'
    ,'onSuccess':function(req) { forms["parameterForm"].exampleUrl.value = req.url; }
  }
);

*/
//===================================================================================

function AjaxRequest() {
  var req = new Object();
//===================================================================================
// Properties
//===================================================================================
  req.timeout = null; //Pperiod (in ms) until the request is aborted  and onTimeout called
  req.generateUniqueUrl = true; //used to prevent a brower from caching the GET requests
  req.url = window.location.href; //The url that you are requesting data from defaults to current url
  req.method = "GET"; //Method type (GET,POST,HEAD)
  req.async = true; //asynchronous or not
  req.username = null; //username
  req.password = null; //password
  req.parameters = new Object(); //parameters in the form of name=value
  req.requestIndex = AjaxRequest.numAjaxRequests++; //Sequential index number (internal)
  req.responseReceived = false; //Response recieved yet?
  req.groupName = null; //Group name of request (Activity Monitoring)
  req.queryString = ""; //Query string to add to the request in URIEncoded format
  req.responseText = null; //Response as text
  req.responseXML = null; //Response in XML
  req.status = null; //Response Status Code
  req.statusText = null; //Response status text
  req.aborted = false; //Was the request aborted?
  req.xmlHttpRequest = null; //XMLHttpRequest object that is used internally
      req.startTime = null; //This is created when the object is created
      req.endTime = null; //set whenever onreadystatechange changes so we can time for each state
  req.elapsedTime = -1; //the amount of time the request took
//===================================================================================
// Events
//===================================================================================
  req.onTimeout = null;  //Timeout
  req.onLoading = null; //Event called when readyState=1
  req.onLoaded = null; //Event called when readyState=2
  req.onInteractive = null; //Event called when readyState=3
  req.onComplete = null; //Event called when readyState=4
  req.onSuccess = null; //Event called after onComplete assuming the statusCode=200
  req.onError = null; //Event called after onComplete assuming the statusCode <> 200
  req.onGroupBegin = null; //If groupname is assigned this is called when the first request completes
  req.onGroupEnd = null; //If groupname assigned this is called when the last request completes
  req.xmlHttpRequest = AjaxRequest.getXmlHttpRequest(); //Get the XMLHttpRequest object
  if (req.xmlHttpRequest==null) { return null; }
 
//===================================================================================
// Event Implementation section - This attaches a function to an event declared above
//===================================================================================

  req.xmlHttpRequest.onreadystatechange =
  function() {
    if (req==null || req.xmlHttpRequest==null) {
              return;  //if req is null then exit
            }
            req.endTime = new Date();
            req.elapsedTime = req.endTime.getTime() - req.startTime.getTime();
    if (req.xmlHttpRequest.readyState==1) { req.onLoadingInternal(req); }
    if (req.xmlHttpRequest.readyState==2) { req.onLoadedInternal(req); }
    if (req.xmlHttpRequest.readyState==3) { req.onInteractiveInternal(req); }
    if (req.xmlHttpRequest.readyState==4) { req.onCompleteInternal(req); }
  };
 
// ---------------------------------------------------------------------------
// Internal event handlers that fire, and in turn fire the user event handlers
// ---------------------------------------------------------------------------
// Flags to keep track if each event has been handled, in case of
// multiple calls (some browsers may call the onreadystatechange
// multiple times for the same state)
//      
  req.onLoadingInternalHandled = false;
  req.onLoadedInternalHandled = false;
  req.onInteractiveInternalHandled = false;
  req.onCompleteInternalHandled = false;
      
  req.onLoadingInternal =
    function() {
      if (req.onLoadingInternalHandled) {
                        return;  //if handled dont handle again
                  }
      AjaxRequest.numActiveAjaxRequests++;
      if (AjaxRequest.numActiveAjaxRequests==1 && typeof(window['AjaxRequestBegin'])=="function") {
        AjaxRequestBegin();
      }
      if (req.groupName!=null) {
        if (typeof(AjaxRequest.numActiveAjaxGroupRequests[req.groupName])=="undefined") {
          AjaxRequest.numActiveAjaxGroupRequests[req.groupName] = 0;
        }
        AjaxRequest.numActiveAjaxGroupRequests[req.groupName]++;
        if (AjaxRequest.numActiveAjaxGroupRequests[req.groupName]==1 && typeof(req.onGroupBegin)=="function") {
          req.onGroupBegin(req.groupName); //if assigned then fire the user created function
        }
      }
      if (typeof(req.onLoading)=="function") {
        req.onLoading(req); //if assigned then fire the user created function
      }
      req.onLoadingInternalHandled = true;
    };
            
  req.onLoadedInternal =
    function() {
      if (req.onLoadedInternalHandled) {
                        return; //if handled dont handle again
                  }
      if (typeof(req.onLoaded)=="function") {
        req.onLoaded(req); //if assigned then fire the user created function
      }
      req.onLoadedInternalHandled = true;
    };
            
  req.onInteractiveInternal =
    function() {
      if (req.onInteractiveInternalHandled) {
                    return; //if handled dont handle again
                  }
      if (typeof(req.onInteractive)=="function") {
        req.onInteractive(req); //if assigned then fire the user created function
      }
      req.onInteractiveInternalHandled = true;
    };
            
  req.onCompleteInternal =
    function() {
      if (req.onCompleteInternalHandled || req.aborted) {
                        return;  //if handled dont handle again
                  }
      req.onCompleteInternalHandled = true;
      AjaxRequest.numActiveAjaxRequests--;
      if (AjaxRequest.numActiveAjaxRequests==0 && typeof(window['AjaxRequestEnd'])=="function") {
        AjaxRequestEnd(req.groupName); //if assigned then fire the user created function
      }
      if (req.groupName!=null) {
        AjaxRequest.numActiveAjaxGroupRequests[req.groupName]--;
        if (AjaxRequest.numActiveAjaxGroupRequests[req.groupName]==0 && typeof(req.onGroupEnd)=="function") {
          req.onGroupEnd(req.groupName); //if assigned then fire the user created function
        }
      }
      req.responseReceived = true;
      req.status = req.xmlHttpRequest.status;
      req.statusText = req.xmlHttpRequest.statusText;
      req.responseText = req.xmlHttpRequest.responseText;
      req.responseXML = req.xmlHttpRequest.responseXML;
                  

      if (typeof(req.onComplete)=="function") {
        req.onComplete(req); //if assigned then fire the user created function
      }
      if (req.xmlHttpRequest.status==200 && typeof(req.onSuccess)=="function") {
        req.onSuccess(req); //if assigned then fire the user created function
      }
      else if (typeof(req.onError)=="function") {
        req.onError(req); //if assigned then fire the user created function
      }

      // Clean up so  IE doesn't leak memory
      delete req.xmlHttpRequest['onreadystatechange'];
      req.xmlHttpRequest = null;
    };
            
  req.onTimeoutInternal =
    function() {
      if (req!=null && req.xmlHttpRequest!=null && !req.onCompleteInternalHandled) {
        req.aborted = true; //yes we aborted "we timed out"
        req.xmlHttpRequest.abort(); //abort the request
        AjaxRequest.numActiveAjaxRequests--;
        if (AjaxRequest.numActiveAjaxRequests==0 && typeof(window['AjaxRequestEnd'])=="function") {
          AjaxRequestEnd(req.groupName); //if assigned then fire the user created function
        }
        if (req.groupName!=null) {
          AjaxRequest.numActiveAjaxGroupRequests[req.groupName]--;
          if (AjaxRequest.numActiveAjaxGroupRequests[req.groupName]==0 && typeof(req.onGroupEnd)=="function") {
            req.onGroupEnd(req.groupName); //if assigned then fire the user created function
          }
        }
        if (typeof(req.onTimeout)=="function") {
          req.onTimeout(req); //if assigned then fire the user created function
        }
      // Opera won't fire onreadystatechange after abort, but other browsers do.
      // So we can't rely on the onreadystate function getting called. Clean up here!
      delete req.xmlHttpRequest['onreadystatechange'];
      req.xmlHttpRequest = null;
      }
    };

//===================================================================================
// The Instance method implementations
//===================================================================================



//===================================================================================
// Process method
//===================================================================================
//
// The process method actually makes the request.
// 1. Build the querystring (GET)
// or
// 2. Build the content (POST)
// 3. Set the HTTP headers
// 4. Calls XMLHttpRequest.send()
//
  req.process =
    function() {
      if (req.xmlHttpRequest!=null) {
                        
        // Some logic to get the real request URL
        if (req.generateUniqueUrl && req.method=="GET") {
          req.parameters["AjaxRequestUniqueId"] = new Date().getTime() + "" + req.requestIndex;
        }
        var content = null; // For POST requests, to hold query string
        for (var i in req.parameters) {
          if (req.queryString.length>0) { req.queryString += "&"; }
          req.queryString += encodeURIComponent(i) + "=" + encodeURIComponent(req.parameters[i]);
        }
        if (req.method=="GET") {
          if (req.queryString.length>0) {
            req.url += ((req.url.indexOf("?")>-1)?"&":"?") + req.queryString;
          }
        }
        req.xmlHttpRequest.open(req.method,req.url,req.async,req.username,req.password);
                        
        if (req.method=="POST") {
          if (typeof(req.xmlHttpRequest.setRequestHeader)!="undefined") {
            req.xmlHttpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
          }
          content = req.queryString;
        }
        if (req.timeout>0) {
          setTimeout(req.onTimeoutInternal,req.timeout);
        }
        req.xmlHttpRequest.send(content);

                        
      }
    };

//===================================================================================
// handleArguments method
//===================================================================================
// handles its object parameter which could contain either AjaxRequest field values or
// name/value pairs
//
  req.handleArguments =
    function(args) {
      for (var i in args) {
        // If the AjaxRequest object doesn't have a property which was passed, treat it as a url parameter
        if (typeof(req[i])=="undefined") {
          req.parameters[i] = args[i];
        }
        else {
          req[i] = args[i];
        }
      }
    };

//===================================================================================
// getAllResponseHeaders method
//===================================================================================
// Returns the results of XMLHttpRequest.getAllResponseHeaders() after a response has been returned
//       
  req.getAllResponseHeaders =
    function() {
      if (req.xmlHttpRequest!=null) {
        if (req.responseReceived) {
          return req.xmlHttpRequest.getAllResponseHeaders();
        }
        alert("Cannot getAllResponseHeaders because a response has not yet been received");
      }
    };

//===================================================================================
// getResponseHeader method
//===================================================================================
// Returns the the value of a response header after a response has been returned
//
  req.getResponseHeader =
    function(headerName) {
      if (req.xmlHttpRequest!=null) {
        if (req.responseReceived) {
          return req.xmlHttpRequest.getResponseHeader(headerName);
        }
        alert("Cannot getResponseHeader because a response has not yet been received");
      }
    };

  return req;
}

// ---------------------------------------
// Static methods of the AjaxRequest class
// ---------------------------------------

//===================================================================================
// getXmlHttpRequest method
//===================================================================================
// Returns an XMLHttpRequest object, either as a core object or an ActiveX
// implementation. If an object cannot be instantiated, it will return null;
//
AjaxRequest.getXmlHttpRequest = function() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    // Based on http://jibbering.com/2002/4/httprequest.html
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        return null;
      }
    }
    @end @*/
  }
  else {
    return null;
  }
};

//===================================================================================
// isActive method
//===================================================================================
// See if any request is active in the background
//
AjaxRequest.isActive = function() {
  return (AjaxRequest.numActiveAjaxRequests>0);
};


//===================================================================================
// get method
//===================================================================================
// Make a GET request. Pass an object containing parameters and arguments as
// the second argument. These areguments may be either AjaxRequest properties to set
// on the request object or name/values to set in the request querystring.
//
 
AjaxRequest.get = function(args) {      
  AjaxRequest.doRequest("GET",args);
};

//===================================================================================
// post method
//===================================================================================
// Make a POST request. Pass an object containing parameters and arguments as
// the second argument.  These areguments may be either AjaxRequest properties to set
// on the request object or name/values to set in the request querystring.
//
AjaxRequest.post = function(args) {
  AjaxRequest.doRequest("POST",args);
};


//===================================================================================
// doRequest method
//===================================================================================
//The internal method used by the .get() and .post() methods
//
 
AjaxRequest.doRequest = function(method,args) {
  if (typeof(args)!="undefined" && args!=null) {
    var myRequest = new AjaxRequest();
     myRequest.startTime = new Date();
     myRequest.method = method;
     myRequest.handleArguments(args);
     myRequest.process();
  }
}  ;

//===================================================================================
// submit method
//===================================================================================
// Submit a form. The requested URL will be the form's ACTION, and the request
// method will be the form's METHOD.
// Returns true if the submittal was handled successfully, else false so it
// can easily be used with an onSubmit event for a form, and fallback to
// submitting the form normally.
//
AjaxRequest.submit = function(theform, args) {
  var myRequest = new AjaxRequest();
   myRequest.startTime = new Date();
  if (myRequest==null) {
        return false; //request is null
      }
  var serializedForm = AjaxRequest.serializeForm(theform);
  myRequest.method = theform.method.toUpperCase();
  myRequest.url = theform.action;
  myRequest.handleArguments(args);
  myRequest.queryString = serializedForm;
  myRequest.process();
  return true;
};

//===================================================================================
// serializeForm method
//===================================================================================
//
// Serialize a form into a format which can be sent as a GET string or a POST
// content.It correctly ignores disabled fields, maintains order of the fields
// as in the elements[] array. The 'file' input type is not supported, as
// its content is not available to javascript. This method is used internally
// by the submit class method.
//
AjaxRequest.serializeForm = function(theform) {
  var els = theform.elements;
  var len = els.length;
  var queryString = "";
  this.addField =
    function(name,value) {
      if (queryString.length>0) {
        queryString += "&";
      }
      queryString += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    };
  for (var i=0; i<len; i++) {
    var el = els[i];
    if (!el.disabled) {
      switch(el.type) {
        case 'text': case 'password': case 'hidden': case 'textarea':
          this.addField(el.name,el.value);
          break;
        case 'select-one':
          if (el.selectedIndex>=0) {
            this.addField(el.name,el.options[el.selectedIndex].value);
          }
          break;
        case 'select-multiple':
          for (var j=0; j<el.options.length; j++) {
            if (el.options[j].selected) {
              this.addField(el.name,el.options[j].value);
            }
          }
          break;
        case 'checkbox': case 'radio':
          if (el.checked) {
            this.addField(el.name,el.value);
          }
          break;
      }
    }
  }
  return queryString;
};

// -----------------------
// Static Class variables
// -----------------------

AjaxRequest.numActiveAjaxRequests = 0; // The number of total AjaxRequest objects currently active and running
AjaxRequest.numActiveAjaxGroupRequests = new Object(); // An object holding the number of active requests for each group
AjaxRequest.numAjaxRequests = 0; // The total number of AjaxRequest objects instantiated

Well the interesting part is in the bandwidthtest.js.. notice where it has the state machine and it calls different functions and passes the state and next state around.  

I couldnt upload it all here  if you want it all we have to do this offline not here.

finally the isapi dll that serves the data..

rename it to gtisapi.dll..

Here is the inifile which needs to be in c:\windows\system32\inetsvr

[Setup]
DBpath=C:\Inetpub\wwwroot\GTISAPI\data
UploadPath=C:\Inetpub\wwwroot\GTISAPI\Uploads
BackupDBpath=C:\Inetpub\wwwroot\GTISAPI\data\backup
SQLPath=C:\Inetpub\wwwroot\GTISAPI\SQL
logPath=C:\Inetpub\wwwroot\GTISAPI\LOGs
templatepath=C:\Inetpub\wwwroot\GTISAPI
sessionpath=C:\Inetpub\wwwroot\GTISAPI\sessions
userIDfield=email
serverip=192.168.85.12
uploadpath=
uploadurl=
mailhost=mail.atcc.net
mailusername=honeywell
mailpassword=honeywell
help=help.htm
log=1
debug=1
[Areas]

Shoot it wont let me upload the isapi..


Author

Commented:
Wow, now that is what I call a solution ! you can send as a zip if you like tejohnsen@comcast.net - thank you for your hard work, even if this solution doesnnot work for my needs, I am awarding you the points anyway - it is much appreciated.  Let me know when you send the zip, Thanks Again

Author

Commented:
This is prob to advanced in js if something were to go wrong, but I am gonna play with it - thanks for your help good sir

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial