Internet Explorer 8.0中的Ajax

Question

i have written code according to which on basis of first dropdown second dropdown is populated the code is working in mozilla but it is not working in internet explorer 8.0

function stateListOnChange(str1) {

var xmlhttp;
if (str1 == "") {
    document.getElementById("CityList").innerHTML = "";
    return;
}
if (str1 == "") {
    document.getElementById("CityList").disabled = true;
}
else {
    document.getElementById("CityList").disabled = false;
}
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
}
else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("CityList").innerHTML = xmlhttp.responseText;
     }
}
xmlhttp.open("GET", "../includes/xml_cities.asp?q1=" + str1, true);
xmlhttp.send();

but the code is not working in ie 8.0 please give me the solution

Answer 1

Can you replace this:

if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
}
else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

with this:

try  
{  
    // Internet Explorer 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)  
{  
    try   
    { 
        // Firefox, Opera 8.0+, Safari  
        xmlHttp=new XMLHttpRequest();
    }  
    catch (e)    
    {   
        try     
        {      
            xmlHttp= new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }    
        catch (e)      
        {      
            alert("Your browser does not support AJAX!");      
            return false;      
        }    
    }  
}

This code will provide more options for initializing the request, and will provide feedback when an unsupported browser is used.

Answer 2

add the jQuery script into your code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

then use

function stateListOnChange(state) {
    if (state == "") {
        $("#CityList").html("").prop("disabled", true);
        return false;
    }
    else {
        $("#CityList").prop("disabled", false);
    }

    $.get("../includes/xml_cities.asp", { "q1" : state }, function(data) {
        $("#CityList").html(data);
    }); 
}

and you hook up the event, either

<input id="CityList" ... onchange="stateListOnChange(this.value);" />

or simply using jQuery as well

$(document).ready(function() {
     $("#CityList").bind("change", function() {
         stateListOnChange( $(this).val() );
     });
});

and it works in any browser ... even a mobile one !