AJAX формы выпуска IE

Question

У меня есть следующий код, который работает в любом браузере, кроме IE. При нажатии на кнопку отправки формы я не получаю никакого ответа от IE.

форма имеет это значение: onsubmit="sendform(this);return false;"

<script type="text/javascript">
    function makeRequest(url) {
        var http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = function() {

            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    alert(http_request.status);
                    //alert(http_request.responseText);
                    toggleDiv('stylized');
                    showtoggleDiv('success');
                } else {
                    alert('There was a problem with the request.');
                }
            }
        };
        http_request.open('GET', url, true);
        http_request.send(null);
    }

    function sendform(el) {
        var sub = el.getElementsByTagName('input');
        query = new Array();
        for (i in sub) {
            if (sub[i].name) {
                query.push(sub[i].name + '=' + sub[i].value);
            }
        }
        query = '?' + query.join('&');

        makeRequest("http://markburnettinternational.com/sitelokpw/members/test.php" + query);
    }
</script>
<script language="javascript">
    function toggleDiv(divid) {
        if (document.getElementById(divid).style.display == 'none') {
            document.getElementById(divid).style.display = 'block';
        } else {
            document.getElementById(divid).style.display = 'none';
        }
    }
</script>
<script>
    function showtoggleDiv(divid) {

        document.getElementById(divid).style.display = 'block';

    }
</script>

Answer 1

Существует как минимум три проблемы с этим фрагментом кода:

var sub = el.getElementsByTagName('input');
query = new Array();
for (i in sub) {
    if (sub[i].name) {
        query.push(sub[i].name + '=' + sub[i].value);
    }
}

Во-первых, всегда объявляйте свои переменные в локальной области, используя var, поэтому используйте

var query = new Array();
for (var i in sub) {

Во-вторых, getElementsByTagName возвращает NodeList, который является массивоподобным объектом. Никогда итерация по массиву (подобному объекту) с использованием цикла for … in, всегда используйте обычный цикл for.

В-третьих, всегда используйте encodeURIComponent для правильного кодирования параметров запроса:

for (var i = 0, len = sub.length; i < len; i++) {
    if (sub[i].name) {
        query.push(sub[i].name + '=' + encodeURIComponent(sub[i].value));
    }
}

Это может решить вашу проблему с IE.

Answer 2

Включите отладчик браузера и установите точку останова в sendform (), пройдитесь по ней и посмотрите, что произойдет. Альтернативное включение консоли javascript может дать вам жизненно важную информацию о происходящем.