<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="AjaxCalculatorPage.aspx.cs" Inherits="_Default" %>

<!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></title>
    <style type="text/css">
        .style1
        {
            width: 201px;
        }
    </style>
    
        <script type="text/javascript">
    var xmlRequest;
    
    function CreateXMLHttpRequest()
    {  
        try
        {
            // This works if XMLHttpRequest is part of JavaScript.
            xmlRequest = new XMLHttpRequest();
        }
        catch(err)
        {
            // Otherwise, the ActiveX object is required.
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    
    function CallServerForUpdate()
    {
       var txt1 = document.getElementById("txt1");
       var txt2 = document.getElementById("txt2");
    
       var url = "CalculatorCallbackHandler.ashx?value1=" + 
         txt1.value + "&value2=" + txt2.value;
       xmlRequest.open("GET", url);
       xmlRequest.onreadystatechange = ApplyUpdate;
       xmlRequest.send(null);
    }

    function ApplyUpdate()
    {
        // Check that the response was received successfully.
        if (xmlRequest.readyState == 4)
        {       
          if (xmlRequest.status == 200)
          {

            var lbl = document.getElementById("lblResponse");                 
          
            var response = xmlRequest.responseText;
 
            if (response == "-")
            {
                lbl.innerHTML = "You've entered invalid numbers.";
            }
            else
            {                
                var responseStrings = response.split(",");
                lbl.innerHTML = "The server returned the sum: " + 
                  responseStrings[0] + " at " + responseStrings[1];
            }
          }
        }
    }
</script>

    
</head>
<body onload="CreateXMLHttpRequest();">

    <form id="form1" runat="server">
    <div>
    
        <table style="width: 52%;">
            <tr>
                <td class="style1">
                    <asp:ImageButton ID="ImageButton1"  runat="server" AlternateText="Animated lamp" 
                        ImageUrl="~/lava_lamp.gif" />
                </td>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: xx-large">
                    This is animated GIF and won&#39;t pause.</td>
            </tr>
        </table>
    
    </div>
    <p style="font-family: Arial, Helvetica, sans-serif; font-size: x-large">
        Value 1 :&nbsp;&nbsp;
        <asp:TextBox ID="txt1" runat="server" onKeyUp = "CallServerForUpdate();" 
            style="top: 184px; left: 121px; position: absolute; height: 22px; width: 128px" ></asp:TextBox>
    </p>
    <p style="font-size: x-large; font-family: Arial, Helvetica, sans-serif">
        Value2 :
        <asp:TextBox ID="txt2" runat="server" onKeyUp = "CallServerForUpdate();" 
            style="top: 229px; left: 117px; position: absolute; height: 22px; width: 128px" ></asp:TextBox>
    </p>
    <p>
        <asp:Label ID="lblResponse" runat="server" Font-Bold="True"  ></asp:Label>
    </p>
    </form>
</body>
</html>
