✔ Ajax-Such-Skript

J1M1 · 1. Mai 2007

Hallo!

Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript" src="search.js"></script>

</head>
<body>
<form name="search">
<input type="text" name="forename"><input type="text" name="surname">
<input type="button" onClick="searchResult()" value="Suchen">
</form>

<div id="result"></div>
</body>
</html>

search.js:

HTML:

<script language="JavaScript" type="text/javascript">
<!--

function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Dein Browser unterstützt leider nich das XMLHttpRequest-Objekt.");
	}
var forename = getElementsByName("forename");
var surname = getElementsbyName("surname");	
var searchReq = getXmlHttpRequestObject();

function searchResult(){
 if (searchReq.readyState == 4 || searchReq.readyState == 0) {
  searchReq.open("POST", 'response.php?forename=' + forename + '&surname=' + surname, true);
	searchReq.onreadystatechange = handleResponse; 
	searchReq.send(null);
 }
}

function handleResponse(){
 if (searchReq.readyState == 4){
 document.getElementById('result').innerHTML = searchReq.responseText;
 }
}

//-->
</script>

Problem: searchResult() wird beim Klicken nicht ausgeführt.

Was habe ich falsch gemacht?

J!M!

Maik · 1. Mai 2007

Hi,

ich zähle für die Funktion getXmlHttpRequestObject vier öffnende "{", aber nur drei schliessende "}".

J1M1 · 1. Mai 2007

Ok. Der Funktionsaufruf klappt nun, das Skript aber leider nicht.

Ich wollte für mein jetziges Problem auch kein neues Topic öffnen... Also, wenn die Moderator vielleicht den Namen vom Topic in "Ajax-Such-Skript" oder umändern könnten...?

Ja, also das Ganze funktioniert irgendwie nicht. Also um mit der Fehleranalyse zu beginnen, würde ich gern wissen ob das XMLHttpRequest-Objekt überhaupt richtig erzeugt wurde. Die Frage: Wie kann ich das überprüfen? Ich hab normalerweise leider mit JavaScript nicht so viel am Hut, eher mit PHP.

J!M!

Sven Mintel · 1. Mai 2007

Das Problem ist vorrangig dein Zugriff auf die Formularfelder.

Code:

var forename = getElementsByName("forename");
var surname = getElementsbyName("surname");

3 Fehler hast du da:

wenn du den Inhalt eines Formularfeldes benötigst, ermittle dessen value-Eigenschaft
wenn du auf ein Element per getElementsByName() zugreifst, musst du auch den Index des gewünschten Elementes angeben ....denn wie der Name getElementsByName() vermuten lässt, liefert diese Methode im Zweifelsfall auch mehrere Elemente, aber egal ob 1 oder mehrere...sie werden in Array-Form geliefert.
Korrekt wäre in deinem Fall:

Code:

var forename = document.getElementsByName("forename")[0];
var surname = document.getElementsbyName("surname")[0];

In diesem Fall ist es jedoch einfacher, die Elemente als Formular-Element anzusprechen. Es lässt dich die Elemente einfacher identifizieren und verbraucht oftmals weniger Bytes

Wenn du also ein Formularelementansprechen willst, dann nach dem Schema:

Code:

document.formularname.elementname

Dein Skript steht im Quelltext vor den Formularelementen, daher sind selbige zu der Zeit, wo du darauf zugreifen möchtest, noch nicht bekannt.

Hier mal die entsprechend geänderte Version

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
searchReq=false;
function getXmlHttpRequestObject() 
  {
	  if (window.XMLHttpRequest) 
	    {
		    return new XMLHttpRequest();
	    } 
	  else
	    {
	      if(window.ActiveXObject) 
	        {
		        return new ActiveXObject("Microsoft.XMLHTTP");
	        } 
	      else 
	        {
		        alert("Dein Browser unterstützt leider nich das XMLHttpRequest-Objekt.");
		        return false;
	        }
	    }
	}


function searchResult()
{

  var forename = escape(document.search.forename.value);
  var surname = escape(document.search.surname.value);	
  searchReq = getXmlHttpRequestObject();
  
  if (searchReq && (searchReq.readyState == 4 || searchReq.readyState == 0)) 
    {
      searchReq.open("POST", 'response.php?forename=' + forename + '&surname=' + surname, true);
	    searchReq.onreadystatechange = handleResponse; 
	    searchReq.send(null);
    }
}

function handleResponse()
{

 if (searchReq.readyState == 4 && searchReq.status==200)
  {
    document.getElementById('result').innerHTML = searchReq.responseText;
  }
}

//-->
</script>
</head>
<body>
<form name="search">
<input type="text" name="forename"><input type="text" name="surname">
<input type="button" onClick="searchResult()" value="Suchen">
</form>

<div id="result"></div>
</body>
</html>

J1M1 · 1. Mai 2007

Vielen Dank für die Antwort. Die asynchrone Anfrage klappt schon mal.

Es tut mir Leid, aber ich habe noch eine Frage... (Das erste Mal, dass ich versuche eine Ajax-App zu schreiben).

Das Problem liegt jetzt beim BackEnd:

PHP:

<?php
echo "<div id='o'><table align='center'><tr><td>Disziplin</td><td>Wert</td><td>Platzierung</td></tr></div>";
?>
<?php
$boolean = 'false';

$forename_post = $_POST['forename']; 
$forename = ucwords(strtolower(trim($forename_post)));
$surname_post = $_POST['surname'];
$surname = ucwords(strtolower(trim($surname_post)));

$name = $forename.' '.$surname; 

$filename1 = "dateinamen.txt";
$handle1 = fopen($filename1, "r");
$content1 = fread($handle1, filesize($filename1));
$handle1 = fclose($handle1);

$array1 = explode('.', $content1);

for($i=0;$i<sizeof($array1);$i++){
$filename2 = $array1[$i].'.txt'; 
$handle2 = fopen($filename2, "r");
$content2 = fread($handle2, filesize($filename2));
$handle2 = fclose($handle2);
$competition = $array1[$i];

$array2 = explode('|', $content2);

 for($x=0;$x<sizeof($array2);$x++){
 $array2_1 = explode(';', $array2[$x]);
  if($name == $array2_1[0]){ 
   $boolean = 'true';
	
	 echo '<tr><td></td></tr>';
	 echo '<tr><td colspan="3">'.$competition.'</td></tr>';
	 for($n=1;$n<sizeof($array2_1);$n++){
	 echo '<tr>'; 
	 $array2_1_1 = explode('.', $array2_1[$n]);
	  for($m=0;$m<sizeof($array2_1_1);$m++){ 
		echo '<td>'.$array2_1_1[$m].'</td>';
		}
	 echo '</tr>';	
	 }
	}
 }

} 

?>
<?php
if($boolean == 'false'){
echo '<script language="JavaScript" type="text/javascript">o.innerHTML = "&nbsp;";</script>';
echo '<script language="JavaScript" type="text/javascript">u.innerHTML = "&nbsp;";</script>';
echo '<p align="center">Zu dem angegebenem Mitglied konnten keine Einträge gefunden werden.</p>';
}
?>
<?php
echo "<div id='u'></table></div>";
?>

Die Ausgabe ist jetzt:

Disziplin Wert Platzierung

Zu dem angegebenem Mitglied konnten keine Einträge gefunden werden.

1. Den Mitglied gibt es eigentlich.
2. Wenn es einen Mitglied nicht geben sollte, dann sollten eigentlich "Disziplin Wert Platzierung" nicht mehr ausgegeben werden.

Was ist die Ursache?

J!M!

Sven Mintel · 1. Mai 2007

Code:

searchReq.open("POST", 'response.php?forename=' + forename + '&surname=' + surname, true);

Du setzt zwar den Request per POST ab...die Parameter übergibst du aber über die Adresse der angefragten Datei...du musst dort also per $_GET darauf zugreifen.

J1M1 · 1. Mai 2007

JAAAA! Es funktioniert fast alles! tutorials.de ist einfach super

Letztes Problem:
Irgendwie klappt das hier nicht richtig:

PHP:

echo '<script language="JavaScript" type="text/javascript">o.innerHTML = "&nbsp;";</script>';
echo '<script language="JavaScript" type="text/javascript">u.innerHTML = "&nbsp;";</script>';

Denn, wenn ich ein Mitglied angebe, den es nicht gibt, sollte dadurch eigentlich "Disziplin Wert Platzierung" weggemacht werden. Es steht jedoch immer noch da... ?-|

J!M!

Sven Mintel · 1. Mai 2007

Das liegt daran, dass der JS-Code dort überhaupt nicht ausgeführt wird, ein Thema dazu findest du hier: http://www.tutorials.de/forum/javas...nd-das-js-soll-sofort-ausgefuehrt-werden.html

Aber in deinem Fall würde ich das Ganze erst garnicht an den Browser senden, wenn es garnicht angezeigt werden soll. Probiere es mal so:

Ganz als erstes im PHP-Skript dieses:

PHP:

ob_start();

...dadurch werden erstmal alle Ausgaben gepuffert.

und dann ändere Dieses:

PHP:

<?php
if($boolean == 'false'){
echo '<script language="JavaScript" type="text/javascript">o.innerHTML = "&nbsp;";</script>';
echo '<script language="JavaScript" type="text/javascript">u.innerHTML = "&nbsp;";</script>';
echo '<p align="center">Zu dem angegebenem Mitglied konnten keine Einträge gefunden werden.</p>';
}
?>

...in Jenes:

PHP:

<?php
if($boolean == 'false'){
ob_end_clean();
die('<p align="center">Zu dem angegebenem Mitglied konnten keine Einträge gefunden werden.</p>');
}
?>

Du löschst damit den Ausgabepuffer, das erste <div> ist also schonmal weg.
Die Meldung wird dann statt mit echo() per die() ausgegeben, wodurch das Skript sofort abgebrochen wird.... es kommt also nicht mehr zu der Stelle mit dem 2. <div>.

Wenn alles korrekt läuft, sollte das Skript jetzt nur noch dieses ausgeben:

Code:

<p align="center">Zu dem angegebenem Mitglied konnten keine Einträge gefunden werden.</p>

J1M1 · 1. Mai 2007

Perfekt°

J!m!

✔ Ajax-Such-Skript

J1M1

Erfahrenes Mitglied

Maik

J1M1

Erfahrenes Mitglied

Sven Mintel

Mitglied

J1M1

Erfahrenes Mitglied

Sven Mintel

Mitglied

J1M1

Erfahrenes Mitglied

Sven Mintel

Mitglied

J1M1

Erfahrenes Mitglied

Neue Beiträge