当前位置： 文江博客话题详情

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

发布于 2024-12-08 10:29:19 字数 1797 浏览 0 评论 0原文

我正在尝试建立一个类似于 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>

这是我的函数 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>

这是我的 php ajax-submit 文件：

<?php
echo 'Something';
?>

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

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

谢谢

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

旧人哭 2024-12-15 10:29:19

实际上，它

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

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;
    }
}());
回复 原文
像你 2024-12-15 10:29:19

用途:

new XMLHttpRequest

不

new xmlHttpRequest

Use:

new XMLHttpRequest

not

new xmlHttpRequest
回复 原文
伴随着你 2024-12-15 10:29:19

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

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'];
?>
回复 原文
~没有更多了~

关于作者

盗心人

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文