Fill DropDownList with Ajax without Ajax ToolKit

 

CountriesAndStates.xml contain the following info/code:

 
    <country name="USA">
        <state>Alabama</state>
        <state>Alaska</state>
        <state>Arizona</state>
        <state>Arkansas</state> 
    </country>
    

Write following code in Ajaxclient.aspx page:

    <form id="Form1" method="post" runat="server">
        <asp:DropDownList id="countryList" onchange="return CountryListOnChange()" 
            style="Z-INDEX: 101; LEFT: 20px; POSITION: absolute; TOP: 28px" runat="server" Width="174px" Height="28px">
        </asp:DropDownList>
        
        <asp:DropDownList id="stateList" style="Z-INDEX: 102; LEFT: 218px; POSITION: absolute; TOP: 28px"
            runat="server" Width="174px">
        </asp:DropDownList>
    </form>

Page_Load Method of AjaxClient.aspx Page 

    private void Page_Load(object sender, System.EventArgs e)
    {
        CountryStateXml countryStateXml = new CountryStateXml();
        ArrayList countries = countryStateXml.GetCountryList();
        for(int index = 0; index < countries.Count; index++)
            {
                countryList.Items.Add(countries[index].ToString());
            }
        ArrayList states = countryStateXml.GetStateList(countries[0].ToString());
        for(int index = 0; index < states.Count; index++)
            {
                stateList.Items.Add(states[index].ToString());
            }
    }

Write Javascript code:
    function CountryListOnChange() 
    {
        var countryList = document.getElementById("countryList");
        var selectedCountry = countryList.options[countryList.selectedIndex].value;
        var requestUrl = AjaxServerPageName + "?SelectedCountry=" + encodeURIComponent(selectedCountry);
        CreateXmlHttp();
        if(XmlHttp)
        {
            XmlHttp.onreadystatechange = HandleResponse;
            XmlHttp.open("GET", requestUrl,  true);
            XmlHttp.send(null);
        }
    }

Function for Handling Response :
    function HandleResponse()
    {
        if(XmlHttp.readyState == 4)
        {
            if(XmlHttp.status == 200)
            {
                ClearAndSetStateListItems(XmlHttp.responseXML.documentElement);
            }
            else
            {
                alert("There was a problem retrieving data from the server." );
            }
        }
    }

Page_Load Method of the AjaxServer.aspx Page
    private void Page_Load(object sender, System.EventArgs e)
    {
        if(!IsPostBack )
        {
            string selectedCountry = Request["SelectedCountry"];
            if(selectedCountry.Length > 0)
            {
                Response.Clear();
                CountryStateXml countryStateXml = new CountryStateXml();
                string statesString = countryStateXml.GetStatesXMLString(selectedCountry);
                Response.Clear();
                Response.ContentType ="text/xml";
                Response.Write(statesString);
                Response.End();
            }
            else
            {
                Response.Clear();
                Response.End();
            }
        }
        else
        {
            Response.Clear();
            Response.End();
        }
    }