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, 17:52
[AJAX] Problem mit onreadystatechange im IE
