Question

我正在尝试建立类似于Google Suggestion（或Autosuggestion？）的自我提交搜索字段。

我使用纯javaScript / AJAX和2个文件：index.php和ajax-submit.php（我将实际查询数据库的文件）。但就目前而言，我只是回复一个文本进行调试。

有一些问题：

问题1：问题是firebug输出：我在搜索输入中输入内容时没有定义xmlhttp [已解决，见下文]。

问题2：我还想回复一下这样的搜索输入内容：

echo $_GET['search_text'];

或

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

但是我收到以下错误：*未定义的索引：ajax-submit.php中的search_text *

所以这是我的功能建议来电：

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

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

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

由于

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

使用：

new XMLHttpRequest

不

new xmlHttpRequest

Answer 3

我写了一个更好的实现：跨浏览器/更易读的代码，功能拆分。下面是代码。不幸的是，强硬读取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'];
?>

xmlHttpRequest在类似Google的自动提交脚本中发布

3 个答案: