ASP.NET Javascript Zip Code Lookup for CIty and State w/ Mootools, jQuery, or Ajax

I'm trying to write a Javascript Zip Code lookup utility.

1) The User will select a State from a drop down.

2) The City Drown Down will then be populated based on the State selected

3) A textbox be开发者_运维问答low is then populated with the corresponding Zip Code(s) based on Selected State and Zip Code on an ASP.NET page.

Problem: I get the error Request() is not defined which causes the application to hault when a State is selected.

What should I cahnge in the following code?

  <script language="javascript">
   var request = new Request();
   var url = "";

   function getZipCode()
   {    
request.GetNoCache(url + "getZipCode.aspx?City=" +document.getElementById("drpCity").options[document.getElementById("drpCity").selectedIndex].value+ "&State=" +document.getElementById("drpStateSearch").options[document.getElementById("drpStateSearch").selectedIndex].value,      
function(result)
{
    if (result.readyState!=ReadyState.Complete)
        return;             
    if (result.status==HttpStatus.OK && result.responseText != "")
    {
        var zip = result.responseText;
        document.getElementById("txtZip").value = zip;
    }
    else
    {
        document.getElementById("txtZip").value = "No Zip Found";
    }
}
)
  }



   function selectCity()
   {    
request.GetNoCache(url + "getCities.aspx?State=" +document.getElementById("drpStateSearch").options[document.getElementById("drpStateSearch").selectedIndex].value,         

function(result)
{

    if (result.readyState!=ReadyState.Complete)
        return;             
    if (result.status==HttpStatus.OK && result.responseText != "")
    {
        var cities = result.responseText;
        var city_array=cities.split(",");
        var len = document.getElementById("drpCity").options.length;

        for( var j=len; j>=0;j--)
        {
            document.getElementById("drpCity").options[j]=null;
        }

        var option_i = new Option("--Select--","--Select--");
        document.getElementById("drpCity").options[0] = option_i;

        for(var i=1; i<=city_array.length-1;i++)
        {
            var option_c = new Option(city_array[i-1],city_array[i-1]);
            document.getElementById("drpCity").options[i] = option_c;
        }
    }
    else
    {
        var option_c = new Option("No City","");
        document.getElementById("drpCity").options[0] = option_c;
    }
}
)
   }

            </script>
   <script language="javascript" type="text/javascript">
   <!--
function __doPostBack(eventTarget, eventArgument) {
    var theform;
    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
        theform = document.Form2;
    }
    else {
        theform = document.forms["Form2"];
    }
    theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
    theform.__EVENTARGUMENT.value = eventArgument;
    theform.submit();
}
   // -->
   </script>

            City: <select id="drpStateSearch" name="drpStateSearch" 
                onchange="Javascript:selectCity();" style="width: 120px;">
                <option value="">---Select---</option>
                <option value="AK">Alaska</option>
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="AZ">Arizona</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DC">District of Columbia</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="IA">Iowa</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MA">Massachusetts</option>
                <option value="MD">Maryland</option>
                <option value="ME">Maine</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MO">Missouri</option>
                <option value="MS">Mississippi</option>
                <option value="MT">Montana</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="NE">Nebraska</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NV">Nevada</option>
                <option value="NY">New York</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VA">Virginia</option>
                <option value="VT">Vermont</option>
                <option value="WA">Washington</option>
                <option value="WI">Wisconsin</option>
                <option value="WV">West Virginia</option>
                <option value="WY">Wyoming</option>
            </select> <br />
            State: <select id="drpCity" name="drpCity" onchange="javascript:getZipCode()">
                <option selected="">Select State to Populate</option>
            </select>
            <br />
            <table id="Table6" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td height="28" width="38%">
                        Zipcode:</td>
                    <td height="28" width="62%">
                        <input id="txtZip" name="txtZip" type="text" /></td>

Thanks!

Are you using MooTools? If so you need to make certain the mootools lib is brought in before you attempt to make a new Request object. If not Request isn't the proper object to create for an ajax request.

if(window.XMLHttpRequest){
   request = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
   request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET", url, true);
request.onreadystatechange = callback;
request.send(null);
function callback()
{
   if(request.readyState == 4)
   {
       if(request.status == 200)
       {
             /* do your call back stuff here */
       }
    }
 }

Note is is really basic and kind of a pain and I would suggest using a framework lib such as jQuery or Mootools to do ajax calls to your server code.

/****** UPDATE *******************/ Here is the code for a basic Jquery ajax request:

$.ajax({ url: "test.html", 
         context: document.body, 
         data:{"info":"I'm sending this back to the server"}, 
         success: function(data){ 
              /* do your callback stuff here */ 
         },
         error(jqXHR, textStatus, errorThrown){
              /* let's you know where you went wrong */
         }
});

The api def is here.