AJAX - PHP-Script wird nicht aufgerufen

Ben · 02.11.2005, 20:01

Hallo,
ich habe hier gerade mal ein kleines AJAX-Beispiel, welches nicht funktioniert.
Ich habe mir das mal zusammengesucht und dachte jetzt eigentlich, dass das auch so laufen müsste.

Die .html-Datei:

HTML-Code:

<html>
 <head>

	<script type="text/javascript" language="javascript"> 
	   
	    var requestObject = null;
	   
	   
	    /**
	     * createRequestObject()
	     *
	     * This function returns an requestObject. Either an ActiveXObject if the client uses the
	     * Internet Explorer or a XMLHttpRequest object.
 	     */
	    function createRequestObject() {
		    var localRequestObject;
		    var browser = navigator.appName;
		    
		    if(browser == "Microsoft Internet Explorer"){
		        localRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
		    }
                    else{
		        localRequestObject = new XMLHttpRequest();
                    }
	    
	        return localRequestObject;
	    }


	    /**
	     * sendRequest(string)
	     *
	     * The parameter defines the PHP file that should be executed.
 	     */        
	    function sendRequest(phpFile) {
		requestObject.open('get', phpFile);
		requestObject.onreadystatechange = handleResponse;
		requestObject.send(null);
            }
		
		
	    function handleResponse() { 

	        if((requestObject.readyState == 4) && ( requestObject.status == 200 ) ) { 
	        	document.getElementById("colorSwitch").innerHTML = requestObject.responseText; 
	        } 
	     } 
		
		
		function changeColor(request) {
			createRequestObject();
			sendRequest(request);
		}
		   
	
	</script>

  </head>
  <body>  
     
     <a href="#" onclick="changeColor('script.php?color=red')">switch color</a>
     <div id="colorSwitch">default (black)</div>
     
     
  </body>  
</html>

Und die .php-Datei names script.php

PHP-Code:


			
<?php



    if(array_key_exists('color', $_GET) && is_string($_GET['color'])) {

        printf('<span style="color:%s">%s</span>', $_GET['color'], $_GET['color']);

    }

    else {

        exit('You are not allowed to access this file directly.');

    }

    

?>

Wenn ich jetzt auf den Link klicke tut sich nix .. hab ich da irgendwie Tomaten auf den Augen?
Ein Beispiel von Lars funktioniert dagegen einwandfrei.

HTML-Code:

<html>
 <head>

	<script type="text/javascript" language="javascript"> 
	    
	    var httpObject = false; 
	    
	    /** * Liefert das HTTPXML-Objekt und baut * automatisch eine HTTP-Verbindung zum Host-Server auf. */ 
	    
	    function setHttpObject() { 
	    	// Wenn der Browser kein HTTPXML-Objekt 
	    	// zur Verfügung stellt, wird eine Exception geworfen. 
	    	
	    	try { 
	    		// Mozilla bietet XMLHttpRequest, 
	    		// der IE das ActiveX-Equivalent. 
	    		
	    		httpObject = window.XMLHttpRequest 
	    		           ? new XMLHttpRequest() 
	    		           : new ActiveXObject("Microsoft.XMLHTTP"); 
	        } catch(exception) { 
	        	// [...] 
	        } 
	    } 
	    
	    
	    /** * Sendet einen GET-Request. */ 
	    
	    function request($request) { 
	    	// Beginnt den Request. 
	    	httpObject.open('get', $request); 
	    	
	    	
	    	// Event-Handler für Statusänderungen der 
	    	// Verbindung setzen.     	
	    	httpObject.onreadystatechange = response; 
	    	
	    	// Sendet den von httpObject.open() begonnen Request. 
	    	httpObject.send(null); 
	    } 
	    
	    /** * Event-Handler für Statusänderungen der Verbindung. */ 
	    
	    function response() { 
	    	// readyState = 4 (completed) 
	    	// 0 = uninitialized ; 
	    	// 1 = loading ; 
	        // 2 = loaded ; 
	        // 3 = interactive 
	        // status = 200 (okay) 
	        
	        if((httpObject.readyState == 4) && ( httpObject.status == 200 ) ) { 
	        	// Ist der request abgeschlossen und der 
	        	// Return-Code gleich 200, wird die 
	        	// Antwort ins HTML geschrieben. 
	        	document.getElementById("inhalt").innerHTML = httpObject.responseText; 
	        } 
	     } 
	     
	     /** * Ändert den Inhalt des Elements mit der ID "inhalt". */ 
	     function inhaltAendern() { 
	     	// Das HTTPXML-Objekt setzen. 
	     	setHttpObject(); 
	     	
	     	// Den Request senden. 
	     	request("phpscript.php"); 
	     } 
	
	</script>

  </head>
  <body>  
     <input type="button" name="inhaltAendern" onclick="inhaltAendern();" value="Inhalt &auml;ndern" />  
     <div id="inhalt">  alter inhalt </div> 
  </body>  
</html>

PHP-Code:


			
<?php



    echo 'neuer Inhalt';



?>

Wäre nett, wenn da mal jemand drüberschauen könnte.

Danke schön

Grüße Ben.

J33d3X · 02.11.2005, 21:07

also dieser code fuktioniert einwandfrei

Code:

<html>
<head>
<script type="text/javascript" language="javascript">

var httpObject = false;

/** * Liefert das HTTPXML-Objekt und baut * automatisch eine HTTP-Verbindung zum Host-Server auf. */

function setHttpObject() {
// Wenn der Browser kein HTTPXML-Objekt // zur Verfügung stellt, wird eine Exception geworfen. 

    try {
      // Mozilla bietet XMLHttpRequest, // der IE das ActiveX-Equivalent. 
      httpObject = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    } catch(evt) {
      // [...]
      alert("Sorry, your browser is not AJAX-enabled!");
    }
}
/** * Sendet einen GET-Request. */

function request($request) {
    // Beginnt den Request. 
    httpObject.open('get', $request);
    
    // Event-Handler für Statusänderungen der // Verbindung setzen.
    httpObject.onreadystatechange = response;
    
    // Sendet den von httpObject.open() begonnen Request. 
    httpObject.send(null);
}

/** * Event-Handler für Statusänderungen der Verbindung. */
function response() {
    // readyState = 4 (completed)
    // 0 = uninitialized ;
    // 1 = loading ;
    // 2 = loaded ;
    // 3 = interactive
    // status = 200 (okay) 
    if((httpObject.readyState == 4) && ( httpObject.status == 200 ) ) {
        // Ist der request abgeschlossen und der 
        // Return-Code gleich 200, wird die 
        // Antwort ins HTML geschrieben. 
        document.getElementById("inhalt").innerHTML = httpObject.responseText; 
    }
}

/** * Ändert den Inhalt des Elements mit der ID "inhalt". */ 
function inhaltAendern() {
    // Das HTTPXML-Objekt setzen. 
    setHttpObject();
    
    // Den Request senden. 
    request("test.php");
} 

</script>
</head>

<body>
<input type="button" name="inhaltAendern" onclick="inhaltAendern();" value="Inhalt &auml;ndern" />
<div id="inhalt"> alter inhalt </div>

</body>
</html>

test.php

Code:

echo 'cool';

getestet IE / Mozilla

ka was dein Prob ist

Ben · 02.11.2005, 21:09

Ich schrieb ja, dass das Beispiel von Lars geht .. aber meins nicht.

Lars · 02.11.2005, 21:26

Code:

function sendRequest(phpFile) {
	requestObject.open('get', phpFile);
	requestObject.onreadystatechange = handleResponse;
	requestObject.send(null);
}

Das ding heißt "localRequestObject"

// Edit:
Das gleich auch in handleResponse(). Außerdem gibt createRequestObject() das Objekt zurück, d. h. du musst es auch irgendwie abfangen.

J33d3X · 02.11.2005, 21:27

naja bei deinem code solltest du
entweder den unterschied zwischen
localRequestObject
requestObject

erkennen
oder requestObject auch localRequestObject zuweisen

Code:

<script type="text/javascript" language="javascript"> 
       
        var localRequestObject = null;
       
       
        /**
         * createRequestObject()
         *
         * This function returns an requestObject. Either an ActiveXObject if the client uses the
         * Internet Explorer or a XMLHttpRequest object.
          */
        function createRequestObject() {
            var browser = navigator.appName;
            
            if(browser == "Microsoft Internet Explorer"){
                localRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            }
                    else{
                localRequestObject = new XMLHttpRequest();
                    }
        
            return localRequestObject;
        }


        /**
         * sendRequest(string)
         *
         * The parameter defines the PHP file that should be executed.
          */        
        function sendRequest(phpFile) {
        localRequestObject.open('get', phpFile);
        localRequestObject.onreadystatechange = handleResponse;
        localRequestObject.send(null);
            }
        
        
        function handleResponse() { 

            if((localRequestObject.readyState == 4) && ( localRequestObject.status == 200 ) ) { 
                document.getElementById("colorSwitch").innerHTML = localRequestObject.responseText; 
            } 
         } 
        
        
        function changeColor(request) {
            createRequestObject();
            sendRequest(request);
        }
           
    
    </script>

ps:
entweder ist:
return localRequestObject;

sinnbefreit oder du schnappst den return und weist es dem requestObject zu

Ben · 02.11.2005, 21:38

Zitat:

Zitat von J33d3X

entweder ist:
return localRequestObject;

sinnbefreit oder du schnappst den return und weist es dem requestObject zu

Jup. Genau das ist es .. *ploink* ..

Wenn ich es so mache, dann geht es:

HTML-Code:

requestObject = localRequestObject;

Okido. Danke schön

J33d3X · 02.11.2005, 21:41

und ? ...

sach mal ehrlich es macht schon so ein spässchen mit ajax ?!
weg mit der "schnöden" validierung von formularen mittels js hinzu kompfortablen Anwendungen

Ben · 02.11.2005, 21:45

Zitat:

Zitat von J33d3X

sach mal ehrlich es macht schon so ein spässchen mit ajax ?!

Ich sag nur eins: MACHT.

Du-weisst-schon-wer · 15.11.2005, 16:35

Ajax macht schon was her. Aber öhm du muss die Formulare 2 mal validieren denn ajax hin order her javascript aus und dann sitzte da.

Ben · 15.11.2005, 17:24

Zitat:

Zitat von Du-weisst-schon-wer

Aber öhm du muss die Formulare 2 mal validieren denn ajax hin order her javascript aus und dann sitzte da.

Jou. Das ist ja irgendwie klar, oder?

AJAX stellt ja auch eigentlich nur eine Komfortlösung dar, aus dem von dir angesprochenen Grund.

Grüße Ben.

13.12.2005, 19:20

Hier ein Artikel zu AJAX: http://www.usabilityviews.com/ajaxsucks.html - Why Ajax Sucks (Most of the Time)

J33d3X · 17.12.2005, 06:04

völlig lapidare Begründungen ...

mfg

lokari · 02.01.2006, 23:43

wer den liest, sollte auch den lesen:

http://ntschutta.com/jat/2005/12/07/the-ajax-spoof/

DasMööp · 23.02.2008, 12:59

Ähm wie bekomme ich den request zurück !?

Code:

       function sendGetRequest(phpFile) {

            if (!xhttp) {
                alert("An Error occured when trying to initialize XMLHttpRequest!");
                return; // exit
            }

			xhttp.open('get', phpFile);
			xhttp.onreadystatechange = handleResponse;
			xhttp.send(null);

        }

	    function handleResponse() {

	        if((xhttp.readyState == 4) && (xhttp.status == 200 ) ) {
	        	alert ( xhttp.responseText );
	        }
	     }

statt dem Alert. Oder muss ich immer per ID Arbeiten ... !?

document.getElementById("colorSwitch").innerHTML

Hmm ... gibts da eine Übersicht was für Elemente es gibt ...

(getElementById)

Neq' · 25.02.2008, 08:34

Zitat:

Zitat von DasMööp

Oder muss ich immer per ID Arbeiten ... !?

document.getElementById("colorSwitch").innerHTML

Hmm ... gibts da eine Übersicht was für Elemente es gibt ...

(getElementById)

Kommt drauf an was du genau mit zurückgeben meinst. Grundsätzlich musst du das Element kennen das du mit dem neuen Text updaten möchtest. Es gibt getElementsByTagName, was dir ein Array aller definierten Elemente zurückgibt und getElementsByName, was dir ein Array aller Elemente des definierten Name-Attributes zurückgibt. Das heißt, grundsätzlich fährst du mit getElementById besser.

document.getElementById("colorSwitch").innerHTML = xhttp.responseText;

DasMööp · 25.02.2008, 19:30

Hmm, dann habe ich das evtl. bischen falsch gesehen. Bei dem Link gibt er die ganze Seite wieder zurück ...

Ist also doch nur um Feinheiten nachzuladen, hatte das im Template Compiler komplett umgesetzt das er auch Links einfach mittels Ajax umsetzt.

Dann werde ich normale SeitenLinks (hab irgendwo auch beim lesen gesehen das dies auch für die Suchm. besser ist.) auf dem "normalen" wege erstellen und eine Option mit einbauen wenn nur bestimmter Seiten Inhalt behandet wird per Ajax (im Template Format).

Nur müsste er dann für bestimmte Bereiche auch eine eigenes Ajax Script haben das dann mit geladen wird. .... Hmmm

Neq' · 26.02.2008, 08:23

Zitat:

Zitat von DasMööp

Hmm, dann habe ich das evtl. bischen falsch gesehen. Bei dem Link gibt er die ganze Seite wieder zurück ...

Ist also doch nur um Feinheiten nachzuladen, hatte das im Template Compiler komplett umgesetzt das er auch Links einfach mittels Ajax umsetzt.

Dann werde ich normale SeitenLinks (hab irgendwo auch beim lesen gesehen das dies auch für die Suchm. besser ist.) auf dem "normalen" wege erstellen und eine Option mit einbauen wenn nur bestimmter Seiten Inhalt behandet wird per Ajax (im Template Format).

Nur müsste er dann für bestimmte Bereiche auch eine eigenes Ajax Script haben das dann mit geladen wird. .... Hmmm

Wenn man JavaScript optional verwenden möchte ist meiner Meinung nach "Unobtrusive JavaScript" die einzige wahre Lösung.

02.11.2005, 21:09	Nach oben #3
Ben Erfahrener Benutzer Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.800	Ich schrieb ja, dass das Beispiel von Lars geht .. aber meins nicht. __________________ Mehr TuS Koblenz geht nicht ... Aktuell ... - Neue Gegner für die TuS: 1.FC Nürnberg - 5 neue Gegner 2008/09 - Informationsveranstaltung für Mitglieder - Förderkasse füllt sich - B-Jugend Rheinlandpokalfinale terminiert - A-Jugend I gewinnt Rheinlandpokal

02.11.2005, 21:26	Nach oben #4
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Code: function sendRequest(phpFile) { requestObject.open('get', phpFile); requestObject.onreadystatechange = handleResponse; requestObject.send(null); } Das ding heißt "localRequestObject" // Edit: Das gleich auch in handleResponse(). Außerdem gibt createRequestObject() das Objekt zurück, d. h. du musst es auch irgendwie abfangen. __________________ Gedanken aus Draht stricken einen Zaun.

17.12.2005, 06:04	Nach oben #12
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	völlig lapidare Begründungen ... mfg __________________ Code: eval('echo "'.gzinflate(base64_decode('8zI2TjGOAAA=')).'";');

23.02.2008, 12:59	Nach oben #14
DasMööp Erfahrener Benutzer Registriert seit: 14.12.2004 Beiträge: 212	Ähm wie bekomme ich den request zurück !? Code: function sendGetRequest(phpFile) { if (!xhttp) { alert("An Error occured when trying to initialize XMLHttpRequest!"); return; // exit } xhttp.open('get', phpFile); xhttp.onreadystatechange = handleResponse; xhttp.send(null); } function handleResponse() { if((xhttp.readyState == 4) && (xhttp.status == 200 ) ) { alert ( xhttp.responseText ); } } statt dem Alert. Oder muss ich immer per ID Arbeiten ... !? document.getElementById("colorSwitch").innerHTML Hmm ... gibts da eine Übersicht was für Elemente es gibt ... (getElementById) __________________ Das Leben ist zwar bloß ein Adventure-Game, aber die Grafik ist verdammt gut. Ich such immer noch den Cheat für unlimited money!

25.02.2008, 19:30	Nach oben #16
DasMööp Erfahrener Benutzer Registriert seit: 14.12.2004 Beiträge: 212	Hmm, dann habe ich das evtl. bischen falsch gesehen. Bei dem Link gibt er die ganze Seite wieder zurück ... Ist also doch nur um Feinheiten nachzuladen, hatte das im Template Compiler komplett umgesetzt das er auch Links einfach mittels Ajax umsetzt. Dann werde ich normale SeitenLinks (hab irgendwo auch beim lesen gesehen das dies auch für die Suchm. besser ist.) auf dem "normalen" wege erstellen und eine Option mit einbauen wenn nur bestimmter Seiten Inhalt behandet wird per Ajax (im Template Format). Nur müsste er dann für bestimmte Bereiche auch eine eigenes Ajax Script haben das dann mit geladen wird. .... Hmmm __________________ Das Leben ist zwar bloß ein Adventure-Game, aber die Grafik ist verdammt gut. Ich such immer noch den Cheat für unlimited money!

02.11.2005, 21:41	Nach oben #7
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	und ? ... sach mal ehrlich es macht schon so ein spässchen mit ajax ?! weg mit der "schnöden" validierung von formularen mittels js hinzu kompfortablen Anwendungen

15.11.2005, 16:35	Nach oben #9
Du-weisst-schon-wer Neuer Benutzer Registriert seit: 18.08.2005 Ort: Hürth Beiträge: 28	Ajax macht schon was her. Aber öhm du muss die Formulare 2 mal validieren denn ajax hin order her javascript aus und dann sitzte da.

13.12.2005, 19:20	Nach oben #11
Jay Gast Beiträge: n/a	Hier ein Artikel zu AJAX: http://www.usabilityviews.com/ajaxsucks.html - Why Ajax Sucks (Most of the Time)

02.01.2006, 23:43	Nach oben #13
lokari Benutzer Registriert seit: 28.12.2005 Beiträge: 35	wer den liest, sollte auch den lesen: http://ntschutta.com/jat/2005/12/07/the-ajax-spoof/