Ajax XML-запрос не работает должным образом

Question

Я пытаюсь выполнить простой ajax-запрос для загрузки какого-либо XML, когда выбрано значение в раскрывающемся списке. XML содержит пути к изображениям, которые я переключаю в зависимости от того, что выбрал пользователь. Он отлично работает в Firefox (я не получаю никаких ошибок Javascript), но по какой-то причине в Chrome ничего не происходит. Это то, что я имею до сих пор:

        <script type="text/javascript">
        function loadXMLDoc(url) {

            var xmlhttp;
            var txt, txtBase, txtOverlay1, txtOverlay2, txtBlack, name, img;

            if (window.XMLHttpRequest){
              // code for IE7+, Firefox, Chrome, Opera, & Safari
              xmlhttp=new XMLHttpRequest();
              xmlhttp.overrideMimeType("text/xml");
            }
            else { 
              // code for IE6 & IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {

                if (xmlhttp.readyState==4 && xmlhttp.status==200) { 

                    txtBase='<img id="original"';
                    txtOverlay1='<img id="overlay1" class="overlay"';
                    txtOverlay2='<img id="overlay2" class="overlay"';
                    txtBlack='<img id="opacity" class="overlay"';

                    img=xmlhttp.responseXML.documentElement.getElementsByTagName("IMG");
                    name=img[0].getElementsByTagName("NAME");

                    txtBase = txtBase + name[0].firstChild.nodeValue + '/>';
                    txtOverlay1 = txtOverlay1 + name[1].firstChild.nodeValue + '/>';
                    txtOverlay2 = txtOverlay2 + name[2].firstChild.nodeValue + '/>';
                    txtBlack = txtBlack + name[3].firstChild.nodeValue + '/>';

                    txt = txtBase + txtOverlay1 + txtOverlay2 + txtBlack;
                    document.getElementById('inner_container').innerHTML = txt;
                    $(".red").css({"font-size":"2.0em"});
                    $(".blue, .green").css({"font-size":"1.0em"});
                }
            }
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }
    </script>

И я называю это, используя это.

            <select>
                <option id="selected">Select a car</option>
                <option onclick="loadXMLDoc('http://www.brandybrowauto.com/files/nissan.xml')">Nissan</option>
                <option onclick="loadXMLDoc('http://www.brandybrowauto.com/files/mazdaspeed3.xml')">Mazdaspeed3</option>
            </select>

Буду очень признателен за любую помощь, чтобы заставить это работать в Chrome, а также за любые советы по улучшению кода. Я новичок в AJAX.

Answer 1

Какая часть этого кода работает в Chrome на вашем сайте для вас?Если да, то как далеко это зайдет?Если вы этого еще не сделали, вам следует использовать инструменты разработчика Chrome и установить точки останова в своем javascript и шагать по коду, пока он не перестанет работать так, как задумано.

Если бы мне пришлось догадываться о том, что происходит -- Chrome, вероятно, не нравится тот факт, что вы используете

xmlhttp.onreadystatechange

Эта строка, скорее всего, должна быть:

xmlhttp.onload

---

РЕДАКТИРОВАТЬ СОДЕРЖАНИЕ:

После просмотра вашего кода (на основе вашего ответа на комментарий) кажется, что вы никогда не сможете запустить событие onclick по вашему выбору.Я поиграл с кодом, чтобы проверить это, убедившись, что он не запустится.Следующее просто не произойдет, потому что это событие не сработает.

<option onclick="alert('test');">Nissan</option>

INSTEAD, не используйте события из опций.Используйте события onchange от избранных.

<select onchange="alert(options[selectedIndex].text);">

Пожалуйста, попробуйте это и скажите мне, если вам нравится.Вы можете использовать эту информацию для запуска вашей логики xmlhttp.

Answer 2

Пожалуйста, проверьте код состояния.Может случиться, что xml-файл запрашивался ранее, и сервер отправляет другой код состояния, например, 304

. JQuery автоматически добавляет случайный параметр в URL, чтобы предотвратить это (вы можете сделать это тоже).

---

Редактировать:

Кажется, что обработчик кликов не сработал.Вместо этого используйте эту разметку для выбора:

<select onchange="if(this.value)loadXMLDoc(this.value)">
  <option value="0" id="selected" selected="selected">Select a car</option>
  <option value="/files/nissan.xml">Nissan</option>
  <option value="/files/mazdaspeed3.xml">Mazdaspeed3</option>
</select>