Javascript 类似Google的自动建议脚本中的xmlHttpRequest问题

我正在尝试建立一个类似谷歌建议（或自动建议？）的自动建议搜索字段

我使用的是纯javaScript/AJAX和两个文件：index.php和AJAX-submit.php（我将实际查询数据库的文件）。但现在我只是简单地回显一个文本以进行调试

有几个问题：

问题1:问题是firebug输出：在搜索输入中键入内容后，就没有定义xmlhttp[已解决，请参见下文]

问题2:我还想回复搜索输入的内容，如下所示：

echo $_GET['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>

下面是我的函数suggest（）：

//函数不需要参数，因为它对于输入搜索文本是唯一的
函数建议（）{
//浏览器对象检查
if（window.xmlHttpRequest）{
xmlhttp=新的xmlHttpRequest（）；
}
else if（window.ActiveXObject）{
//控制台日志（“错误”）；
xmlhttp=newActiveXObject（'Microsoft.xmlhttp'）；
}
//当onreadystatechange事件发生时
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementByID（'results'）.innerHTML=xmlhttp.responseText；
}
}//结束
open（'GET'，'ajax submit.php'，true）；
xmlhttp.send（）；
}//结束建议

这是我的php ajax提交文件：

<?php
echo 'Something';
?>

有人能帮我调试吗？这可能是一个范围问题，但我不知道

第二个问题是，您通常如何在Firebug中调试Ajax请求

谢谢

事实上，是的

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

事实上，是的

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

使用：

不是

使用：

不是

---

我写了一个更好的实现：跨浏览器/更可读的代码，函数拆分。下面是代码。不幸的是，tough读取php echo文本，它不会读取变量search_文本，我不知道为什么：

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

/*注意xmlHttp需要是一个全局变量。因为它不是，所以需要handleStateChange函数来传递xmlHttp
handleStateChange的编写方式要求xmlHttp是一个全局变量*/
函数startRequest（getURL）{
var xmlHttp=false；
xmlHttp=createXMLHttpRequest（）；
//onreadystatechange=handleStateChange；
onreadystatechange=function（）{handleStateChange（xmlHttp）；}
open（“GET”，getURL，true）；
xmlHttp.send（）；
}
函数createXMLHttpRequest（）{
变量_msxml_progid=[
“Microsoft.XMLHTTP”，
“MSXML2.XMLHTTP.3.0”，
“MSXML3.XMLHTTP”，
“MSXML2.XMLHTTP.6.0”
];
//req通过一个自调用函数辅助xmlhttp
var xmlHttp=（函数（）{
var-req；
试一试{
req=新的XMLHttpRequest（）；
}捕获（e）{
var len=_msxml_progid.length；
而(len--){
试一试{
req=新的ActiveXObject（_msxml_progid[len]）；
打破
}渔获物（e2）{}
}
}最后{
返回请求；
}
}());
返回xmlHttp；
}
//handleStateChange的编写方式要求xmlHttp是一个全局变量。
函数handleStateChange（xmlHttp）{
if（xmlHttp.readyState==4）{
if（xmlHttp.status==200）{
//警报（xmlHttp.status）；
//警报（xmlHttp.responseText）；
document.getElementById（“结果”）.innerHTML=xmlHttp.responseText；
}
}
}
函数建议（）{
startRequest（“ajax submit.php？search_text=“+document.search.search_text.value”）；
}

和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'];
?>

---

我写了一个更好的实现：跨浏览器/更可读的代码，函数拆分。下面是代码。不幸的是，tough读取php回显文本，它不会读取变量搜索文本，我不知道为什么：

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


/*注意xmlHttp需要是一个全局变量。因为它不是全局变量，所以需要handleStateChange函数来传递xmlHttp
handleStateChange的编写方式要求xmlHttp是一个全局变量*/
函数startRequest（getURL）{
var xmlHttp=false；
xmlHttp=createXMLHttpRequest（）；
//onreadystatechange=handleStateChange；
onreadystatechange=function（）{handleStateChange（xmlHttp）；}
open（“GET”，getURL，true）；
xmlHttp.send（）；
}
函数createXMLHttpRequest（）{
变量_msxml_progid=[
“Microsoft.XMLHTTP”，
“MSXML2.XMLHTTP.3.0”，
“MSXML3.XMLHTTP”，
“MSXML2.XMLHTTP.6.0”
];
//req通过一个自调用函数辅助xmlhttp
var xmlHttp=（函数（）{
var-req；
试一试{
req=新的XMLHttpRequest（）；
}捕获（e）{
var len=_msxml_progid.length；
而(len--){
试一试{
req=新的ActiveXObject（_msxml_progid[len]）；
打破
}渔获物（e2）{}
}
}最后{
返回请求；
}
}());
返回xmlHttp；
}
//handleStateChange的编写方式要求xmlHttp是一个全局变量。
函数handleStateChange（xmlHttp）{
if（xmlHttp.readyState==4）{
if（xmlHttp.status==200）{
//警报（xmlHttp.status）；
//警报（xmlHttp.responseText）；
document.getElementById（“结果”）.innerHTML=xmlHttp
<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>

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