xmlHttpRequest issues in a Google-like autosuggestion script

I am trying to build up an autosuggestion search field similar to Google Suggestion (or Autosuggestion?).

I am using pure javaScript/AJAX and 2 files: index.php and ajax-submit.php (is the file where I will actually query the database). But for moment I am simply echo a text for debugging.

There are a few issues:

Issue 1: The issue is the firebug outputs: xmlhttp is not defined as soon as I type something in the search input [solved, see below].

Issue2: I would like also to echo the content of the search input something like this:

echo $_GET['search_text']; 

or

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

but I get the following error: *Undefined index: search_text in ajax-submit.php*

So here is my function suggest call:

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

And here is my function suggest():

<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>

and here is my php ajax-submit file:

<?php
echo 'Something';
?>

Can someone help me debug? It might be a scope issue but I have no clue.

The second question would be how would you normally debug an Ajax request in Firebug?

Thanks

Actually, it is

XMLHttpRequest()

not

xmlHttpRequest()

To have a true cross-browser compliant XHR object creation, go with this:

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

Use:

new XMLHttpRequest

not

new xmlHttpRequest

I wrote a better implementation: cross-browser/more readable code, function splits. Below is the code. Unfortunately tough reads php echo text it won't read the variable search_text, I don't know why:

    <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>

and HTML code:

<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>

and ajax-submit.php:

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