[AJAX] Problem mit onreadystatechange im IE

25.03.2006, 17:52

Hallo,

ich beschäftige mich seit gestern mit AJAX und habe gleich eine simple Vorschlagssuche programmiert.

Wenn ich aber im Internet Explorer onreadystatechange verwende und bei XMLHttpRequest.open den dritten Parameter auf true setze (sonst funktionierts ja nicht) funktioniert mein Script für eine Eingabe und danach passiert gar nix mehr. Was hab ich falsch gemacht?

Hier der Code mit onreadystatechange.

PHP-Code:

  <html>
    <head>
    
    <script type="text/javascript">
    <!--
        var xhttp; // the XMLHttpRequest Object
        var oldValue;
        var target;

        function createXMLHttpRequest() {
           if (window.ActiveXObject) { 
                try { 
                   // IE 6 and higher
                   xhttp = new ActiveXObject("MSXML2.XMLHTTP");
                } catch (e) {
                    try {
                        // IE 5
                        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        xhttp=false;
                    }
                }
            }
            else if (window.XMLHttpRequest) {
                try {
                    // Mozilla, Opera, Safari ...
                    xhttp = new XMLHttpRequest();
                } catch (e) {
                    xhttp=false;
                }
            }
        }
        
        function setDisabled(text) {
            
            target.options.length=0;
            var obj = new Option(text,0);
            target.options.add(obj,0);
            target.disabled=true;
        }
        
        function init() {
            if (document.all) {
                target = document.all.suggestions;
            }
            else if (document.getElementById) {
                target = document.getElementById('suggestions');
            }
            createXMLHttpRequest();
            // set the select list to disabled as default
            setDisabled("-- Bitte Suchbegriff eingeben --");
            setFocus();
        }
        
        function updateContent() {

            if (!xhttp)
                return;

            var q = document.getElementById("q").value;
            
            // check if the input has changed
            if (q == oldValue)
                return;

            oldValue = q;
            
            if (q == "") {
                setDisabled("-- Bitte Suchbegriff eingeben --");
                return;
            }

            q = encodeURIComponent(q);
            xhttp.onreadystatechange=updateContent_callback;
            xhttp.open("GET","http://localhost/index.php?q="+q,true);
            xhttp.send(null);
        }
        
        function updateContent_callback() {

            // ensure the response is finished
            if (xhttp.readyState==4) {

                if (xhttp.responseText=="") {
                    setDisabled("-- Kein Vorschlag gefunden --");
                    return;
                }
                else {
                    target.disabled=false;
                }
            
                eval("var optionsArr = "+xhttp.responseText);
                target.options.length=0;
            
                for(var i=0; i<optionsArr.length;++i) {
                    var obj = new Option(optionsArr[i],i);
                    target.options.add(obj,i);
                }
            }
        }
        
        function addText(ele) {
            document.getElementById('q').value = ele.options[ele.selectedIndex].text;
        }
        
        function setFocus() {
            document.getElementById("q").focus();
        }
    // -->
    </script>
    
    <style type="text/css">
    <!--
    #suggestions {
        width:266px;
        margin-top:-1px;
    }
    -->
    </style>
    
    </head>
    
    
    <body onload="init();">
    
        <form action="http://google.com/search" method="get">
        <input onkeyup="setTimeout('updateContent()',100);" autocomplete="off" type="text" size="40" value="" name="q" id="q" />
        <input type="submit" value="Suchen" />
        <br />
        <select size="5" multiple="multiple" onchange="addText(this);" id="suggestions">
        </select>
        </form>  
    </body>
</html>

Hier die Links zur Anwendung
Mit onreadystatechange: http://vc-gleisdorf.at/ajax/mit_onreadystatechange.html

Ohne onreadystatechange: http://vc-gleisdorf.at/ajax/ohne_onreadystatechange.html

25.03.2006, 19:49

Problem gelöst:
Der onreadystatechange event handler muss nach XMLHttpRequest aufgerufen werden. Ich frage mich warum das nirgends steht oder bin ich einfach zu blöd zu m lesen.

Code:
xhttp.open("GET","http://localhost/index.php?q="+q,true);
xhttp.onreadystatechange=updateContent_callback;
xhttp.send(null);

25.03.2006, 17:52	Nach oben #1
Jay Gast Beiträge: n/a	[AJAX] Problem mit onreadystatechange im IE Hallo, ich beschäftige mich seit gestern mit AJAX und habe gleich eine simple Vorschlagssuche programmiert. Wenn ich aber im Internet Explorer onreadystatechange verwende und bei XMLHttpRequest.open den dritten Parameter auf true setze (sonst funktionierts ja nicht) funktioniert mein Script für eine Eingabe und danach passiert gar nix mehr. Was hab ich falsch gemacht? Hier der Code mit onreadystatechange. PHP-Code: <html> <head> <script type="text/javascript"> <!-- var xhttp; // the XMLHttpRequest Object var oldValue; var target; function createXMLHttpRequest() { if (window.ActiveXObject) { try { // IE 6 and higher xhttp = new ActiveXObject("MSXML2.XMLHTTP"); } catch (e) { try { // IE 5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhttp=false; } } } else if (window.XMLHttpRequest) { try { // Mozilla, Opera, Safari ... xhttp = new XMLHttpRequest(); } catch (e) { xhttp=false; } } } function setDisabled(text) { target.options.length=0; var obj = new Option(text,0); target.options.add(obj,0); target.disabled=true; } function init() { if (document.all) { target = document.all.suggestions; } else if (document.getElementById) { target = document.getElementById('suggestions'); } createXMLHttpRequest(); // set the select list to disabled as default setDisabled("-- Bitte Suchbegriff eingeben --"); setFocus(); } function updateContent() { if (!xhttp) return; var q = document.getElementById("q").value; // check if the input has changed if (q == oldValue) return; oldValue = q; if (q == "") { setDisabled("-- Bitte Suchbegriff eingeben --"); return; } q = encodeURIComponent(q); xhttp.onreadystatechange=updateContent_callback; xhttp.open("GET","http://localhost/index.php?q="+q,true); xhttp.send(null); } function updateContent_callback() { // ensure the response is finished if (xhttp.readyState==4) { if (xhttp.responseText=="") { setDisabled("-- Kein Vorschlag gefunden --"); return; } else { target.disabled=false; } eval("var optionsArr = "+xhttp.responseText); target.options.length=0; for(var i=0; i<optionsArr.length;++i) { var obj = new Option(optionsArr[i],i); target.options.add(obj,i); } } } function addText(ele) { document.getElementById('q').value = ele.options[ele.selectedIndex].text; } function setFocus() { document.getElementById("q").focus(); } // --> </script> <style type="text/css"> <!-- #suggestions { width:266px; margin-top:-1px; } --> </style> </head> <body onload="init();"> <form action="http://google.com/search" method="get"> <input onkeyup="setTimeout('updateContent()',100);" autocomplete="off" type="text" size="40" value="" name="q" id="q" /> <input type="submit" value="Suchen" /> <br /> <select size="5" multiple="multiple" onchange="addText(this);" id="suggestions"> </select> </form> </body> </html> Hier die Links zur Anwendung Mit onreadystatechange: http://vc-gleisdorf.at/ajax/mit_onreadystatechange.html Ohne onreadystatechange: http://vc-gleisdorf.at/ajax/ohne_onreadystatechange.html

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem E-Mails zu senden	Jann Hendrik	Plauderecke	7	25.05.2007 21:37
[CSS] Div + CSS + IE6 -> Problem	Binary	HTML, XML und CSS	5	14.02.2007 16:24
Logisches Problem beim einsatz von Ereignissen	Prophet	Allgemeine Java-Programmierung	19	05.06.2006 22:08
Problem mit Cookie und Reloads...	Bookworm	PHP-Programmierung	10	13.04.2006 12:09
OSX + Eclipse 3.1 Problem	bacarni	Eclipse	3	29.07.2005 21:19

25.03.2006, 19:49	Nach oben #2
Jay Gast Beiträge: n/a	Problem gelöst: Der onreadystatechange event handler muss nach XMLHttpRequest aufgerufen werden. Ich frage mich warum das nirgends steht oder bin ich einfach zu blöd zu m lesen. Code: xhttp.open("GET","http://localhost/index.php?q="+q,true); xhttp.onreadystatechange=updateContent_callback; xhttp.send(null);

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)