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();
        }
    }

AJAX Call from ASP .NET Page

 

Javascript :

function newXMLHttpRequest() {
    var xmlreq = false;
    if (window.XMLHttpRequest) {
        xmlreq = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // Try ActiveX
        try {
            xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            // first method failed 
            try {
                xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                // both methods failed 
            }
        }
    }
    return xmlreq;
}

 

function GetUserInfo(PageURL) {
    var req = newXMLHttpRequest();

    req.open("POST", PageURL, true);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    req.setRequestHeader("content-length", "0"); req.send('');

    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                alert(req.responseText.toString());
            }
        }
    }

}