Проблемы с xmlHttpRequest в Google-подобном скрипте самовнушения

Question

Я пытаюсь создать поле поиска для автоматического предложения, аналогичное предложению Google (или автоматическое предложение?).

Я использую чистый javaScript / AJAX и 2 файла: index.php и ajax-submit.php (это файл, в котором я на самом деле буду запрашивать базу данных). Но на данный момент я просто повторяю текст для отладки.

Есть несколько проблем:

Проблема 1: Проблема заключается в выходных данных firebug: xmlhttp не определяется, как только я что-то ввожу в поисковый запрос [решено, см. Ниже].

Issue2: Я также хотел бы повторить содержимое поискового ввода примерно так:

echo $_GET['search_text']; 

или

if(isset($_GET['search_text'])) {
    echo $search_text = $_GET['search_text'];
}

но я получаю следующую ошибку: * Неопределенный индекс: search_text в ajax-submit.php *

Итак, вот моя функция предложить вызов:

<form action="" name="search" id="search">
        <input type="text" name="search_text" id="search_text" onkeydown="suggest();" />
</form>
<div id="results" style="background:yellow"></div>

А вот моя функция предложить ():

<script type="text/javascript">
    //function does not needs params because is unique to the input search_text
    function suggest() {
    //browser object check
    if(window.xmlHttpRequest) {
    xmlhttp = new xmlHttpRequest();
    }
    else if (window.ActiveXObject) {
    //console.log("error");
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //when the onreadystatechange event occurs
    xmlhttp.onreadystatechange = function() {

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

        document.getElementByID('results').innerHTML = xmlhttp.responseText;
        }

    }//end onready

    xmlhttp.open('GET', 'ajax-submit.php', true);
    xmlhttp.send();

    }//end suggest

</script>

и вот мой файл php ajax-submit:

<?php
echo 'Something';
?>

Может кто-нибудь помочь мне отладить? Это может быть проблемой, но я понятия не имею.

Второй вопрос: как бы вы обычно отлаживали Ajax-запрос в Firebug?

Спасибо

Answer 1

На самом деле, это

XMLHttpRequest()

не

xmlHttpRequest()

---

Чтобы создать действительно XHR-объект, совместимый с различными браузерами, сделайте следующее:

var _msxml_progid = [
    'Microsoft.XMLHTTP', 
    'MSXML2.XMLHTTP.3.0',
    'MSXML3.XMLHTTP',
    'MSXML2.XMLHTTP.6.0'
];

var xhr = ( function() {
    var req;
    try {
        req = new XMLHttpRequest();
    } catch( e ) {
        var len = _msxml_progid.length;
        while( len-- ) {
            try {
                req = new ActiveXObject(_msxml_progid[len]);
                break;
            } catch(e2) { }
        }
    } finally {
        return req;
    }
}());

Answer 2

Я написал лучшую реализацию: кросс-браузерный / более читаемый код, разделение функций. Ниже приведен код. К сожалению, жестко читает текст php echo, он не будет читать переменную search_text, я не знаю почему:

    <script type="text/javascript">
    /*note xmlHttp needs to be a global variable. Because it is not it requires that function handleStateChange to pass the xmlHttp
    handleStateChange is written in such a way that is expects xmlHttp to be a global variable.*/
    function startRequest(getURL){
        var xmlHttp = false;
        xmlHttp = createXMLHttpRequest();
        //xmlHttp.onreadystatechange=handleStateChange;
            xmlHttp.onreadystatechange=function(){handleStateChange(xmlHttp);}
        xmlHttp.open("GET", getURL ,true);
        xmlHttp.send();
}

function createXMLHttpRequest() {
        var _msxml_progid = [
        'Microsoft.XMLHTTP', 
        'MSXML2.XMLHTTP.3.0',
        'MSXML3.XMLHTTP',
        'MSXML2.XMLHTTP.6.0'
        ];
        //req is assiqning to xmlhttp through a self invoking function
        var xmlHttp = (function() {
        var req;
        try {
    req = new XMLHttpRequest();
        } catch( e ) {
    var len = _msxml_progid.length;
    while( len-- ) {
        try {
            req = new ActiveXObject(_msxml_progid[len]);
            break;
        } catch(e2) { }
    }
        } finally {
    return req;
        }
        }());

    return xmlHttp;
        }

//handleStateChange is written in such a way that is expects xmlHttp to be a global variable. 
function handleStateChange(xmlHttp){
        if(xmlHttp.readyState == 4){
                if(xmlHttp.status == 200){
                        //alert(xmlHttp.status);
                        //alert(xmlHttp.responseText);
                        document.getElementById("results").innerHTML = xmlHttp.responseText;
                }
        }
}

    function suggest() {

        startRequest("ajax-submit.php?search_text="+document.search.search_text.value");
    }
    </script>

и HTML-код:

<body>
        <form action="" name="search" id="search">
        <input type="text" name="search_text" id="search_text" onkeydown="suggest();" />
        </form>
        <div id="results" style="background:yellow"></div>
</body>

и ajax-submit.php:

<?php
//echo 'Something';//'while typing it displays Something in result div
echo $_GET['search_text'];
?>

Answer 3

Использование:

new XMLHttpRequest

не

new xmlHttpRequest